{{> head}}
{{> navbar}}
<main class="page">
   {{#if @customHTML.beforePage}}
      <div class="banner banner--before-content">
         {{{@customHTML.beforePage }}}
      </div>
   {{/if}}
   {{#page}}
      <article class="content wrapper">
         <header class="hero">
            {{#checkIfAny @config.page.displayAuthor @config.page.displayDate}}
               <p class="content__meta">
                  {{#if @config.page.displayAuthor}}
                     {{#author}}
                        {{ translate 'post.publishedBy' }}
                        <a href="{{url}}" rel="author" title="{{name}}">{{name}}</a>
                     {{/author}}
                  {{/if}}
                  {{#if @config.page.displayDate}}
                     {{ 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>
                  {{/if}}
               </p>
            {{/checkIfAny}}
            <h1 class="content__title">{{title}}</h1>
         </header>
         {{#featuredImage}}
            {{#if url}}               
              <figure class="content__featured-image {{@config.page.featuredImageWidth}}">
                 <img
                    src="{{url}}"
                    {{#if @config.site.responsiveImages}}                           
                        {{responsiveImageAttributes 'featuredImage' srcset.post sizes.post}}
                    {{/if}}
                    {{ lazyload "eager" }}
                    height="{{height}}"
                    width="{{width}}"
                    alt="{{alt}}">

                 {{#checkIfAny caption credits}}
                    <figcaption>
                       {{caption}}
                       {{credits}}
                    </figcaption>                      
                 {{/checkIfAny}}
              </figure>               
            {{/if}}
         {{/featuredImage}}
         <div class="content__entry">
            {{{text}}}
         </div>
         {{#checkIfAny @config.page.displayLastUpdatedDate @config.page.displayshareButtons @config.page.displayAuthorBio}}
            <footer class="content__footer">
               {{#if @config.page.displayLastUpdatedDate}}
                  {{#if modifiedAt}}
                     <div class="content__last-updated">
                        {{ translate 'post.lastUpdatedDate' }}

                        {{#checkIf @config.custom.formatDate '!=' 'custom'}}
                           {{date modifiedAt @config.custom.formatDate}}
                        {{else}}
                           {{date modifiedAt @config.custom.formatDateCustom}}
                        {{/checkIf}}

                     </div>
                  {{/if}}
               {{/if}}

               {{#if @config.page.displayShareButtons}}
                  <div class="content__footer__col">
                     {{#checkIfAll @plugins.socialSharing @plugins.socialSharing.state}}
                        <div class="content__share">
                           {{{@customSocialSharing}}}
                        </div>
                     {{else}}
                        <div class="content__share">
                           {{> share-buttons}}
                        </div>
                     {{/checkIfAll}}    
                  </div>      
               {{/if}}

               {{#if @config.page.displayAuthorBio}}
                  {{#author}}
                     <div class="content__bio">
                        {{#if avatar}}                          
                           <img 
                              src="{{avatarImage.url}}" 
                              {{ lazyload "eager" }}
                              height="{{avatarImage.height}}"
                              width="{{avatarImage.width}}"
                              alt="{{avatarImage.alt}}">                      
                        {{/if}}
                        <div>
                           {{#if name}}
                              <h3>
                                 <a href="{{url}}" class="invert" title="{{name}}">{{name}}</a>
                              </h3>
                           {{/if}}

                           {{{description}}}
                        </div>
                     </div>
                  {{/author}}
               {{/if}}
            </footer>
         {{/checkIfAny}}
      </article>

      {{#if @config.page.displayChildPages}}
         {{#if subpages}}
            <div class="subpages">
               <div class="wrapper">
                  <h2 class="h6 subpages__title">{{ translate 'page.childPages' }}</h2>
                  <ul class="subpages__list">
                     {{> subpages-list}}
                  </ul>
               </div>
            </div>
         {{/if}}
      {{/if}}

      {{#if @config.page.displayComments}}
         <div class="comments-area wrapper">
            {{{@commentsCustomCode}}}
         </div>
      {{/if}}

      {{#if @customHTML.afterPage}}
         <div class="banner banner--after-content">
            {{{@customHTML.afterPage}}}
         </div>
      {{/if}}
   {{/page}}
</main>
{{> footer}}
