{{!< default}}

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

<main>
    {{#post}}
        <section class="simple-hero faq-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>

        <section class="toggle-card-section section-padding-bottom">
            <div class="narrow-container">
                {{content}}
            </div>
        </section>
    {{/post}}

    {{#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>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        setToggle();
    })
</script>