{{> head}}
{{> navbar}}
<main class="post">
   {{#if @customHTML.beforePost}}
      <div class="banner banner--before-content">
         {{{@customHTML.beforePost }}}
      </div>
   {{/if}}
   {{#post}}
      <article class="content wrapper">
         <header class="hero">
            {{#if @config.post.displayCategoryName}}
                {{#if mainTag}}
                  <span class="hero__suptitle">            
                     <a href="{{ mainTag.url }}" class="inverse">{{ mainTag.name }}</a>                  
                  </span>
               {{/if}}
            {{/if}}
            <h1>
               {{title}}
            </h1>
            {{#checkIfAny @config.post.displayAuthor @config.post.displayDate}}
               <p class="hero__meta">
                  {{#if @config.post.displayAuthor}}
                     {{#author}}
                        <a href="{{url}}" rel="author" title="{{name}}">{{name}}</a>
                     {{/author}}
                  {{/if}}
                  {{#if @config.post.displayDate}}
                     <span>{{ translate 'post.publishedOn' }}
                        <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>
                     </span>
                  {{/if}}
               </p>
            {{/checkIfAny}}
            {{#featuredImage}}
               {{#if url}}
                  <figure class="content__image {{@config.post.postFeaturedImage}}">
                     <img
                        src="{{url}}"
                        {{#if @config.site.responsiveImages}}
                           {{responsiveImageAttributes 'featuredImage' srcset.post sizes.post}}
                        {{/if}}
                        {{ lazyload "lazy" }}
                        height="{{height}}"
                        width="{{width}}"
                        alt="{{alt}}">
                        {{#checkIfAny caption credits}}
                           <figcaption>
                              {{caption}}
                              {{credits}}
                           </figcaption>                      
                        {{/checkIfAny}} 
                  </figure>
               {{/if}}
            {{/featuredImage}}           
         </header>

         <div class="content__entry">
            {{{text}}}
         </div>

         {{#checkIfAny @config.post.displayLastUpdatedDate @config.post.displayShareButtons @config.post.displayTags @config.post.displayAuthorBio @config.post.displayPostNavigation @config.post.displayRelatedPosts}}
            <footer class="content__footer">

               {{#if @config.post.displayLastUpdatedDate}}
                  {{#if modifiedAt}}
                     <p class="content__last-updated">
                        {{ translate 'post.lastUpdatedDate' }}
                        {{#checkIf @config.custom.formatDate '!=' 'custom'}}
                           {{date modifiedAt @config.custom.formatDate}}
                        {{else}}
                           {{date modifiedAt @config.custom.formatDateCustom}}
                        {{/checkIf}}
                     </p>
                  {{/if}}
               {{/if}}

               {{#checkIfAny @config.post.displayShareButtons @config.post.displayTags}}
                  <div class="content__share-tag-wrap">
                     {{#if @config.post.displayShareButtons}}
                        {{#checkIfAll @plugins.socialSharing @plugins.socialSharing.state}}
                           <div class="content__share">
                               <h3 class="h6">{{ translate 'post.share' }}</h3>
                              {{{@customSocialSharing}}}
                           </div>
                        {{else}}
                           <div class="content__share">
                              <h3 class="h6">{{ translate 'post.share' }}</h3>
                              {{> share-buttons}}
                           </div>
                        {{/checkIfAll}}          
                     {{/if}}
                     {{#if @config.post.displayTags}}
                        {{#if tags}}
                           <div class="content__tag">
                              <dt>{{ translate 'post.tags' }}</dt>
                              {{#each tags}}
                                 <dd>
                                    <a href="{{url}}">{{name}}</a>
                                 </dd>
                              {{/each}}
                           </div>
                        {{/if}}
                     {{/if}}
                  </div>
               {{/checkIfAny}}

               {{#if @config.post.displayAuthorBio}}
                  {{#author}}
                     <div class="content__bio">
                        {{#if avatar}}
                           <img 
                              src="{{avatarImage.url}}" 
                              {{ lazyload "lazy" }}
                              height="{{avatarImage.height}}"
                              width="{{avatarImage.width}}" 
                              alt="{{avatarImage.alt}}">
                        {{/if}}
                        <h3 class="h5">
                           <a href="{{url}}" class="inverse" title="{{name}}">{{name}}</a>
                        </h3>
                        {{{description}}}
                        <p>
                           <a href="{{url}}" class="btn">{{ translate 'post.viewAuthorPosts' }}</a>
                        </p>     
                     </div>
                  {{/author}}
               {{/if}}

               {{#if @config.post.displayPostNavigation}}
                  {{#checkIfAny ../previousPost ../nextPost}}
                     <nav class="content__nav">
                        {{#../previousPost}}
                           <div class="content__nav__prev">
                              <a href="{{url}}" class="content__nav__link" rel="prev">
                                 {{#featuredImage}}
                                    {{#if url}}                                     
                                       <img 
                                          {{#if @config.site.responsiveImages}}                           
                                             src="{{urlXs}}"
                                          {{else}}
                                             src="{{url}}"
                                          {{/if}}
                                          {{ lazyload "lazy" }}
                                          height="{{height}}"
                                          width="{{width}}"
                                          alt="{{alt}}">                                     
                                    {{/if}}
                                 {{/featuredImage}}
                                 <div class="content__nav__text">
                                    {{ translate 'post.previousPost' }}
                                      <h3 class="h5">{{title}}</h3>
                                 </div>
                              </a>
                           </div>
                        {{/../previousPost}}
                        {{#../nextPost}}
                           <div class="content__nav__next">
                              <a href="{{url}}" class="content__nav__link" rel="next">
                                 <div class="content__nav__text">
                                    {{ translate 'post.nextPost' }}
                                      <h3 class="h5">{{title}}</h3>
                                 </div>
                                 {{#featuredImage}}
                                    {{#if url}}                                     
                                       <img 
                                          {{#if @config.site.responsiveImages}}                           
                                             src="{{urlXs}}"
                                          {{else}}
                                             src="{{url}}"
                                          {{/if}}
                                          {{ lazyload "lazy" }}
                                          height="{{height}}"
                                          width="{{width}}"
                                          alt="{{alt}}">                                     
                                    {{/if}}
                                 {{/featuredImage}}
                              </a>
                           </div>
                        {{/../nextPost}}
                     </nav>
                  {{/checkIfAny}}
               {{/if}}
               {{#if @config.post.displayRelatedPosts}}
                  {{#if ../relatedPosts}}
                     <div class="content__related">
                        <h3 class="h5">
                           {{ translate 'post.relatedPosts' }}
                        </h3>
                        <div class="content__related__wrap">
                           {{#each ../relatedPosts}}
                              <figure>
                                 {{#featuredImage}}
                                    {{#if url}}                                       
                                       <a href="{{../url}}">
                                          <img 
                                             {{#if @config.site.responsiveImages}}                           
                                                src="{{urlXs}}"
                                             {{else}}
                                                src="{{url}}"
                                             {{/if}}
                                             {{ lazyload "lazy" }}
                                             height="{{height}}"
                                             width="{{width}}"
                                             alt="{{alt}}">   
                                       </a>
                                    {{/if}}
                                 {{/featuredImage}}
                                 <figcaption>
                                    <h4>
                                       <a href="{{url}}" class="inverse">{{title}}</a>
                                    </h4>
                                    <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>
                                 </figcaption>
                              </figure>
                           {{/each}}
                        </div>
                     </div>
                  {{/if}}
               {{/if}}
            </footer>
         {{/checkIfAny}}
      </article>
      {{#if @config.post.displayComments}}
         <div class="comments-area wrapper">
            {{{@commentsCustomCode}}}
         </div>
      {{/if}}
      {{#if @customHTML.afterPost}}
         <div class="banner banner--after-content">
            {{{@customHTML.afterPost}}}
         </div>
      {{/if}}
   {{/post}}
</main>
{{> footer}}