{{!< 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"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />

<main class="main">
    <section class="simple-hero{{#match @custom.tag_page_layout "Column"}} hide-on-desktop{{/match}}">
        <div class="wide-container simple-hero-inner">
            {{#tag}}
                <div class="text-card">
                    <h1 class="text-card-heading">{{name}}</h1>

                    <div class="text-card-paragraph">
                        <p>
                            {{description}}
                        </p>
                    </div> 
                </div>  
            {{/tag}} 
        </div> 
    </section>

    {{#match @custom.tag_page_layout "Column"}}
        <section class="column-layout hide-on-mobile">
            <div class="column-layout-grid">
                <div class="left-column">
                    {{#tag}}
                        <div class="text-card">
                            <h1 class="text-card-heading">{{name}}</h1>

                            <div class="text-card-paragraph">
                                <p>
                                    {{description}}
                                </p>
                            </div> 
                        </div>  
                    {{/tag}} 

                    {{#foreach posts from="2" to="3"}}
                        {{> "components/extra-small-card"}}
                    {{/foreach}}
                </div>

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

                {{#tag}}
                    {{#get "tags" filter='slug:-{{slug}}' include="count.posts" limit="4"}}
                        {{#if tags}}
                            <div class="right-column">
                                <div class="section-heading-slider">
                                    <div class="section-heading">
                                        <span>
                                            {{t "Other Tags"}}
                                        </span>
                                    </div>
                                </div>
                                
                                <div class="slider-outer">
                                    <div class="slider-inner featured-slider">
                                        {{#foreach tags}}                   
                                            {{> "components/extra-small-side-card" }}
                                        {{/foreach}}
                                    </div>
                                </div>
                            </div>
                        {{/if}} 
                    {{/get}}  
                {{/tag}}       
            </div>
        </section>
    {{/match}}

    <section class="articles-grid-section">
        <div class="wide-container">
            <div class="section-heading">
                <span class="section-heading-title">
                    {{t "Latest Articles"}}
                </span>
                
                <span id="data-length" class="section-heading-article-number" data-length="{{plural pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}">
                    {{plural pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
                </span>  

                {{#tag}}
                    <a id="homepage-section-heading-button" href="{{@site.url}}/tag/{{slug}}/" class="section-heading-button hidden">
                        {{t "View All"}} 
                        
                        <div class="section-heading-arrow">                        
                            {{> "icons/section-heading-arrow"}}                         
                        </div>                              
                    </a>   
                {{/tag}}        
            </div>

            <div id="pagination-grid" class="grid pagination-grid">
                {{#foreach posts}}
                    {{> "components/small-card" isForGrid=true }}
                {{/foreach}}
            </div>

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

    {{#tag}}
        {{#get "tags" filter='slug:-{{slug}}' limit="6" include="count.posts"}}
            {{#if tags}}
                <section class="footer-slider hide-on-desktop">
                    <div class="wide-container">
                        <div class="section-heading">
                            <span>
                                {{t "Other 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}}
    {{/tag}}
</main>