{{!--
This template is used for the tag page.
--}}

{{!-- This block preloads specific assets for the tag page --}}
{{#contentFor "preload"}}
  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
{{/contentFor}}

{{!-- This block loads specific styles for the tag page --}}
{{#contentFor "styles"}}
  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
{{/contentFor}}

{{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!< default}}

{{!-- Special header.hbs partial to generate the <header> tag --}}
{{#tag}}
  {{> header background=feature_image}}
{{/tag}}

<main class="main-wrap">
  {{!-- Everything inside the #tag tags pulls data from the tag --}}
  {{#tag}}
    {{!-- Inject styles of the hero image to make it responsive --}}
    {{> hero background=feature_image}}
    <div class="m-hero__content" data-aos="fade-down">
      <h1 class="m-hero-title bigger">{{name}}</h1>
      {{#if description}}
        <p class="m-hero-description">
          {{description}}
        </p>
      {{/if}}
      <div class="m-hero__meta">
        <ul class="m-hero-stats">
          <li>
            {{plural ../pagination.total empty=(t "No posts") singular=(t "1 post") plural=(t "% posts")}} {{t "with this tag"}}
          </li>
        </ul>
      </div>
    </div>
    </section>
  {{/tag}}
  
  <div class="l-content">
    <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
      <div class="l-grid centered">
        {{!-- The tag below iterates over all the posts --}}
        {{> "loop"}}
      </div>
    </div>
    {{!-- Links to Previous/Next posts --}}
    {{pagination}}
  </div>
</main>