{{> head}}
{{> navbar}}
<main>
   <section class="hero wrapper">
      {{{@config.custom.textHero}}}
   </section>
   {{#checkIfAll @config.custom.filters tags}}
      <nav class="filter" aria-label="{{ translate 'homepage.contentFilters' }}">
         <ul class="filter__button-group" role="group">
            {{#if @config.custom.filtersLabel}}
               <li aria-hidden="true">
                  <span class="filter__label">{{@config.custom.filtersLabel}}</span>
               </li>
            {{/if}}
            {{#if @config.custom.filtersAllPhrase}}
               <li>
                  <button 
                     class="filter__item is-active" 
                     data-filter="*" 
                     aria-pressed="true">
                     {{@config.custom.filtersAllPhrase}}
                  </button>
               </li>
            {{/if}}
            {{#checkIf @config.custom.filtersType '=='"tags"}}
               {{#each tags}}
                  <li>
                     <button 
                        class="filter__item" 
                        data-filter=".{{slug}}" 
                        aria-pressed="false">
                        {{name}}
                     </button>
                  </li>
               {{/each}}
            {{else}}
                  {{#each mainTags}}
                  <li>
                     <button 
                        class="filter__item" 
                        data-filter=".{{slug}}" 
                        aria-pressed="false">
                        {{name}}
                     </button>
                  </li>
               {{/each}}
            {{/checkIf}}
         </ul>
      </nav>
   {{/checkIfAll}}
   {{#checkIf @config.custom.cardsLayout '==' "compact" }}
      <div class="l-col l-col{{@config.custom.layoutFrontpage}}">
         {{#each posts}}
            <section
               class="c-card{{#isFeatured}} c-card--compact c-card--featured{{/isFeatured}}
                  {{#checkIf @config.custom.filtersType '=='"maintag"}} 
                     {{#if mainTag}}{{ mainTag.slug }}{{/if}}
                  {{else}}
                     {{#each tags}} {{slug}} {{/each}}
                  {{/checkIf}}">
               <a href="{{url}}" class="c-card__link">
                  {{#featuredImage}}     
                     {{#if url}}                 
                        <div class="c-card__header">
                           <img
                              src="{{url}}"
                              {{#if @config.site.responsiveImages}}
                                 {{responsiveImageAttributes 'featuredImage' srcset.cards sizes.cards}}
                              {{/if}}
                              {{ lazyload "lazy" }}
                              height="{{height}}"
                              width="{{width}}"
                              alt="{{alt}}">
                        </div>   
                     {{/if}}                     
                  {{/featuredImage}}
                  <div class="c-card__body c-card__body--compact">
                     <div class="c-card__text c-card__text--compact">
                        <h2>
                           {{title}}
                        </h2>
                        {{#if @config.custom.cardsDate}}
                           <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">
                              {{#checkIf @config.custom.formatDate '!=' 'custom'}}
                                 {{date createdAt @config.custom.formatDate}}
                              {{else}}
                                 {{date createdAt @config.custom.formatDateCustom}}
                              {{/checkIf}}
                           </time>
                        {{/if}}
                     </div>
                  </div>
               </a>
            </section>
         {{/each}}
      </div>
   {{else}}
      <section class="l-col l-col{{@config.custom.layoutFrontpage}}">
         {{#each posts}}
            <article
               class="c-card{{#isFeatured}} c-card--featured{{/isFeatured}} 
                  {{#checkIf @config.custom.filtersType '=='"maintag"}} 
                     {{#if mainTag}}{{ mainTag.slug }}{{/if}}
                  {{else}}
                     {{#each tags}} {{slug}} {{/each}}
                  {{/checkIf}}
               ">
               <a href="{{url}}" class="c-card__link">
                  {{#featuredImage}}
                     {{#if url}} 
                        <div class="c-card__header">
                           <img
                              src="{{url}}"
                              {{#if @config.site.responsiveImages}}
                                 {{responsiveImageAttributes 'featuredImage' srcset.cards sizes.cards}}
                              {{/if}}
                              {{ lazyload "lazy" }}
                              height="{{height}}"
                              width="{{width}}"
                              alt="{{alt}}">
                        </div> 
                     {{/if}} 
                  {{/featuredImage}}
                  <div class="c-card__body">
                     <div class="c-card__text">
                        <h2>
                           {{title}}
                        </h2>
                        {{#if @config.custom.cardsDate}}
                           <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">
                              {{#checkIf @config.custom.formatDate '!=' 'custom'}}
                                 {{date createdAt @config.custom.formatDate}}
                              {{else}}
                                 {{date createdAt @config.custom.formatDateCustom}}
                              {{/checkIf}}
                           </time>
                        {{/if}}
                     </div>
                  </div>
               </a>
            </article>
         {{/each}}
      </section>
   {{/checkIf}}
   {{> pagination}}
</main>

{{> footer}}