{{> head}}
{{> navbar}}
<main class="main">
   {{#if @renderer.isFirstPage}}
      {{#if featuredPosts}}
         <div class="hero hero--frontpage">
            {{#each featuredPosts}}
               {{#checkIf @index '==' 0}}
                  <figure class="hero__top">                      
                     {{#featuredImage}}
                        {{#if url}}                              
                           <img
                              class="hero__image"
                              src="{{url}}"
                              {{#if @config.site.responsiveImages}}
                                 {{responsiveImageAttributes 'featuredImage' srcset.cards sizes.cards}}
                              {{/if}}
                              {{ lazyload "eager" }}
                              height="{{height}}"
                              width="{{width}}"
                              alt="{{alt}}">                    
                        {{/if}}
                     {{/featuredImage}}
                     <figcaption class="hero__text">
                        {{#if @config.custom.heroCategory}}
                           <span class="hero__category">
                              {{#checkIf @config.custom.heroCategorySource '==' "text" }}
                                 {{@config.custom.heroCategoryText}}
                              {{else}}
                                 {{#if mainTag}}
                                    {{ mainTag.name }}                                      
                                 {{/if}}
                              {{/checkIf}}
                           </span>
                        {{/if}}
                        <h1>
                           {{title}}
                        </h1>
                        {{#if @config.custom.heroDate}}
                           <p class="hero__meta">
                              <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>
                           </p>
                        {{/if}}
                        {{#if @config.custom.heroReadmore}}
                           <a href="{{url}}" class="btn">{{ translate 'post.readMore' }}</a>
                        {{/if}}
                     </figcaption>
                  </figure>
               {{/checkIf}}
            {{/each}}
            {{#if @config.custom.heroThumbnails}}
               <div class="hero__bottom">
                  {{#each featuredPosts}}
                     {{#checkIf @index '>' 0}}
                        <figure class="hero__thumbnail">
                           {{#featuredImage}}
                              {{#if url}}                             
                                 <a href="{{../url}}" class="hero__link">
                                    <img
                                       src="{{url}}"
                                       {{#if @config.site.responsiveImages}}
                                          {{responsiveImageAttributes 'featuredImage' srcset.cards sizes.cards}}
                                       {{/if}}
                                       {{ lazyload "lazy" }}
                                       height="{{height}}"
                                       width="{{width}}"
                                       alt="{{alt}}">
                                 </a>
                              {{/if}}
                           {{/featuredImage}}
                           <figcaption>
                              <h2>
                                 <a href="{{url}}" class="inverse">
                                    {{title}}
                                 </a>
                              </h2>
                           </figcaption>
                        </figure>
                     {{/checkIf}}
                  {{/each}}
               </div>
            {{/if}}
         </div>
      {{/if}}
   {{/if}}

   {{#if posts.length}}
      <div class="l-cards{{#if @config.custom.cardsReverse}} l-cards--reverse{{/if}}{{#if @config.custom.showBgLetters}} l-cards--letters{{/if}}">
         {{#each posts}}
            <article class="c-card{{#if @config.custom.cardsFeaturedBadge}}{{#isFeatured}} c-card--featured{{/isFeatured}}{{/if}}">
               {{#featuredImage}}
                  {{#if url}}
                     <a href="{{../url}}" class="c-card__image">
                        <img
                           src="{{url}}"
                           {{#if @config.site.responsiveImages}}
                              {{responsiveImageAttributes 'featuredImage' srcset.cards sizes.cards}}
                           {{/if}}
                           {{ lazyload "lazy" }}
                           height="{{height}}"
                           width="{{width}}"
                           alt="{{alt}}">
                     </a>
                  {{/if}}
               {{/featuredImage}}
               <div class="c-card__text">
                  <header>
                     <h2>
                        <a href="{{url}}" class="inverse">
                           {{title}}
                        </a>
                     </h2>
                     {{#checkIfAny @config.custom.cardsAuthor @config.custom.cardsDate}}
                        <p class="c-card__meta">
                           {{#author}}
                              {{#if @config.custom.cardsAuthor}}
                                 <a href="{{url}}" title="{{name}}">{{name}}</a>
                              {{/if}}
                           {{/author}}
                           {{#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}}
                        </p>
                     {{/checkIfAny}}
                  </header>
                  {{#if @config.custom.cardsExcerpt}}
                     {{#if excerpt}}
                        <p class="c-card__desc">{{{excerpt}}}</p>
                     {{/if}}
                  {{/if}}
                  {{#if @config.custom.cardsReadmore}}
                     <a href="{{url}}" class="btn c-card__btn">{{ translate 'post.readMore' }}</a>
                  {{/if}}
               </div>
            </article>
         {{/each}}
      </div>
   {{/if}}
   {{> pagination}}
</main>

{{> footer}}