{{!< default}}

<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/membership.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/slider.css"}}" />

<main>
    {{#post}}
        <section class="simple-hero membership-hero">
            <div class="wide-container simple-hero-inner">
                <div class="text-card">
                    <h1 class="text-card-heading">{{title}}</h1>

                    <div class="text-card-paragraph">
                        <p>
                            {{excerpt}}
                        </p>
                    </div>
                </div>  
            </div> 
        </section>
    {{/post}}

    <section class="membership-section-outer wide-container section-padding-bottom">
        {{#get "tiers"}}
            {{#if tiers}}
                <custom-membership class="membership-section">
                    <div class="membership-buttons">
                        <button class="button membership-button" data-inactive="true" data-tab="monthly">{{t "Monthly"}}</button>
                        <button class="button membership-button" data-tab="yearly">{{t "Yearly"}}</button>
                    </div>

                    <div class="tiers-wrapper">
                        <div class="membership-tiers" data-inactive="true" data-tab-content="monthly">
                            {{#foreach tiers}}
                                {{#if @member}}
                                    {{#match type "paid"}}
                                        {{> "components/tier-card"}}
                                    {{/match}}
                                {{else}}
                                    {{> "components/tier-card"}}
                                {{/if}}                   
                            {{/foreach}}
                        </div>
                        <div class="membership-tiers" data-tab-content="yearly">
                            {{#foreach tiers}}
                                {{#if @member}}
                                    {{#match type "paid"}}
                                        {{> "components/tier-card" yearly=true}}
                                    {{/match}}
                                {{else}}
                                    {{> "components/tier-card" yearly=true}}
                                {{/if}}
                            {{/foreach}}
                        </div>
                    </div> 
                </custom-membership>
            {{/if}}
        {{/get}}
    </section>

    {{#get "posts" limit="6" include="count.posts" filter='visibility:paid'}}
        {{#if posts}}
            <section class="footer-slider">
                <div class="wide-container">
                    <div class="section-heading">
                        <span>
                            {{t "Subscribers Only Articles"}}
                        </span>

                        {{#match @custom.use_custom_pages "All Custom Pages"}}
                            <a href="{{@site.url}}/archive/" class="section-heading-button">
                                {{t "View All"}} 
                                
                                <div class="section-heading-arrow">                        
                                    {{> "icons/section-heading-arrow"}}                         
                                </div>                              
                            </a>
                        {{else}}                  
                            {{plural posts.length empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
                        {{/match}}
                    </div>
                </div>

                <div class="slider">
                    <div class="slider-outer section-padding-small">
                        <div class="slider-inner">                           
                            {{#foreach posts}}
                                {{> "components/slide-card" isPost=true}}
                            {{/foreach}}                                           
                        </div>
                    </div>
                </div>          
            </section>
        {{/if}}
    {{/get}}
</main>