{{!< default}}

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

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

        {{#get "tags" limit="all" include="count.posts"}}
            {{#if tags}}
                <section class="tags-grid-section">
                    <div class="wide-container">
                        <div class="section-heading">
                            <span class="section-heading-title">
                                {{t "Browse by Tags"}}
                            </span>
                            
                            <span class="section-heading-article-number">
                                {{plural tags.length empty=(t "No Tags") singular=(t "1 Tag") plural=(t "% Tags")}}
                            </span>
          
                        </div>

                        <div class="grid pagination-grid tags-grid">
                            {{#foreach tags}}
                                {{> "components/slide-card" title=name }}
                            {{/foreach}}
                        </div>
                    </div>
                </section>
            {{/if}}
        {{/get}}
    {{/post}}
</main>