{{!< default}}

<link rel="stylesheet" type="text/css" href="{{asset "css/slider.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/column-layout.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />

<main class="homepage">
    <section class="column-layout{{#if @custom.use_newsletter_on_homepage_and_post_sidebar}}{{#if @site.members_enabled}}{{#unless @site.members_invite_only}}{{#unless @member}} homepage-newsletter{{/unless}}{{/unless}}{{/if}}{{/if}}">
        <div class="column-layout-grid">
            <div class="left-column">
                {{#foreach posts from="1" to="8"}}
                    {{> "components/small-card"}}
                {{/foreach}}
            </div>

            <div class="center-column">
                <div class="big-card-desktop">
                    {{#foreach posts limit="1"}}
                        {{> "components/big-card"}}
                    {{/foreach}}
                </div>
        
                {{> "components/newsletter"}}

                <div class="horizontal-cards">
                    {{#foreach posts from="2" to="8"}}
                        {{> "components/horizontal-card"}}
                    {{/foreach}}
                </div>  
            </div>

            {{#get "posts" filter="featured:true" include="tags" limit="8"}}
                {{#if posts}}
                    <div class="right-column">
                        <div class="section-heading-slider">
                            <div class="section-heading">
                                <span>
                                    {{t "Featured Articles"}}
                                </span>

                                <span class="mobile-heading-span">
                                    {{plural posts.length empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
                                </span>
                            </div>
                        </div>
                        
                        <div class="slider-outer">
                            <div class="slider-inner featured-slider">
                                {{#foreach posts}}                   
                                    {{> "components/extra-small-card" }}
                                {{/foreach}}
                            </div>
                        </div>
                    </div>
                {{/if}} 
            {{/get}}         
        </div>
    </section>

    {{#if @custom.featured_tags_on_homepage }}
        <section class="featured-tags-section">
            <featured-tags data-featured-tags="{{@custom.featured_tags_on_homepage}}">
                <div class="featured-tags-inner"></div>
            </featured-tags>
        </section>
    {{/if}}

    <section class="articles-grid-section">
        <div class="wide-container">
            <div class="section-heading">
                <span id="data-length" data-length="{{plural pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}">
                    {{t "Latest 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 pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
                {{/match}}
            </div>
            
            <div id="pagination-grid" class="grid pagination-grid">
                {{#foreach posts}}
                    {{> "components/small-card" isForGrid=true }}
                {{/foreach}}
            </div>

            {{pagination}}
        </div>
    </section>

    {{#get "tags" limit="6" include="count.posts"}}
        {{#if tags}}
            <section class="footer-slider">
                <div class="wide-container">
                    <div class="section-heading">
                        <span>
                            {{t "Popular Tags"}}
                        </span>

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

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