{{!--
    Parameters:
    - yearly: boolean
--}}

<div class="tier-card">
    <div class="tier-name">
        <div class="big-text">{{name}}</div>
    </div>
    
    <div class="tier-price">
        <span class="tier-currency{{#match type "free"}} tier-currency-free{{/match}}">

        </span>

        <span class="tier-price-span">
            {{#match type "paid"}}            
                {{#if yearly}}{{price yearly_price currency=currency}}{{else}}{{price monthly_price currency=currency}}{{/if}}
            {{else}}
                0
            {{/match}}
        </span>

        <div class="big-text tier-time">
            {{#match type "paid"}}
                {{#if yearly}}/{{t "year"}}{{else}}/{{t "month"}}{{/if}}
            {{/match}}
        </div>       
    </div>

    {{#if description}}
        <div class="medium-text tier-description">
            {{description}}
        </div>
    {{/if}}

    {{#if benefits}}
        <div class="benefits-outer">
            <ul class="benefits-container unstyled-list">
                {{#foreach benefits}}
                    <li class="benefits-item">
                        <div class="benefit-square">
                            <div class="benefit-icon">
                                {{> "icons/check-icon"}}
                            </div>
                        </div>
                        <p>
                            {{this}}
                        </p>                
                    </li>
                {{/foreach}}       
            </ul>
        </div>
    {{/if}}

    <div class="membership-subscribe-button">
        <a class="button" {{#match type "paid"}}href="javascript:" data-portal="signup/{{id}}/{{#if yearly}}yearly{{else}}monthly{{/if}}"{{else}}{{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="signup"{{else}}href="{{@site.url}}/signup/"{{/match}}{{/match}}>
            {{t "Subscribe now"}}
        </a>
    </div> 
</div>