{{> head}}
{{> navbar}}
<main class="page page--author">
   {{#author}}
      <section class="hero wrapper">
         {{#if authorViewConfig.displayAvatar}}
            {{#if avatar}}
               <img 
                  src="{{avatarImage.url}}" 
                  {{ lazyload "eager" }}
                  height="{{avatarImage.height}}"
                  width="{{avatarImage.width}}"
                  class="page--author__avatar" 
                  alt="{{avatarImage.alt}}">
            {{/if}}
         {{/if}}
         <h1>
            {{name}} 
            {{#if authorViewConfig.displayPostCounter}}<sup>({{postsNumber}})</sup>{{/if}}
         </h1>
         {{#if authorViewConfig.displayDescription}} 
            {{#if description}}
               <div class="page--author__desc">
                  {{{description}}}
               </div>
            {{/if}}  
         {{/if}}
         {{#if authorViewConfig.displayWebsite}} 
            {{#if website}}
               <div class="page--author__website">                
                  <a href="{{website}}" target="_blank" rel="nofollow noreferrer noopener" class="invert"> 
                     <svg height="20" width="20" aria-hidden="true" stroke="currentColor" stroke-width="2">
                        <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#website"/>
                     </svg> 
                     {{ translate 'author.visitWebsite' }}
                  </a>
               </div>
            {{/if}}
         {{/if}}
      </section>
      {{#if authorViewConfig.displayPostList}} 
         {{#checkIf @config.custom.cardsLayout '==' "compact" }}
            <section class="l-col l-col{{@config.custom.layoutAuthor}}">
               {{#each ../posts}}
                  <article
                     class="c-card{{#isFeatured}} c-card--compact c-card--featured{{/isFeatured}}">
                     <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>
                  </article>
               {{/each}}
            </section>
         {{else}}
            <section class="l-col l-col{{@config.custom.layoutAuthor}}">
               {{#each ../posts}}
                  <article class="c-card{{#isFeatured}} c-card--featured{{/isFeatured}}">
                     <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}}
      {{/if}} 
   {{/author}}
</main>
{{> footer}}
