{{!--
This template is used for the post page.
--}}

{{!-- This block preloads specific assets for the post page --}}
{{#contentFor "preload"}}
  <link rel="preload" href="{{asset "css/post.css"}}" as="style" />
  <link rel="preload" href="{{asset "js/post.js"}}" as="script" />
{{/contentFor}}

{{!-- This block loads specific styles for the post page --}}
{{#contentFor "styles"}}
  <link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
{{/contentFor}}

{{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!< default}}

{{!-- Special header.hbs partial to generate the <header> tag --}}
{{#post}}
  {{> header background=feature_image}}
{{/post}}

<main class="main-wrap">
  {{#post}}
    {{!-- Inject styles of the hero image to make it responsive --}}
    {{> hero background=feature_image}}
    </section>
    {{#if feature_image}}
      {{#if feature_image_caption}}
        <div class="l-wrapper in-caption">
          <p class="m-small-text align-center">
            {{feature_image_caption}}
          </p>
        </div>
      {{/if}}
    {{/if}}
  {{/post}}
  
  <article>
    <div class="l-content in-post">
      {{!-- Everything inside the #post tags pulls data from the post --}}
      {{#post}}
        <div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-animation-wrapper" data-animate="fade-up">
          <div
            class="l-post-content js-progress-content">
            <header class="m-heading">
              <h1 class="m-heading__title in-post">{{title}}</h1>
              <div class="m-heading__meta">
                {{#if primary_tag}}
                  <span class="m-heading__meta__tag">{{primary_tag.name}}</span>
                {{/if}}
              </div>
            </header>
            <div class="pos-relative js-post-content">
              {{content}}
            </div>
          </div>
        </div>
        {{!-- Email subscribe form at the bottom of the page --}}
        {{#if @site.members_enabled}}
          <section class="m-subscribe-section js-newsletter">
            <div class="l-wrapper in-post">
              <div class="m-subscribe-section__content">
                <div class="m-subscribe-section__text">
                  <h4 class="m-subscribe-section__title">{{t "Subscribe to our newsletter"}}</h4>
                  <p class="m-subscribe-section__description">
                    {{t "Get the latest posts delivered right to your inbox."}}
                  </p>
                </div>
                <div class="m-subscribe-section__form">
                  {{> "newsletter-form"}}
                </div>
              </div>
            </div>
          </section>
        {{/if}}
        {{!-- Native comments --}}
        {{#if comments}}
          <div class="m-comments">
            <div class="l-wrapper in-comments js-native-comments">
              {{comments}}
            </div>
          </div>
        {{/if}}
        {{!-- Third-party comments --}}
        {{!--
          <section class="m-comments">
            <div class="l-wrapper in-comments js-third-party-comments">
              <!-- Paste here the provided code snippet -->
            </div>
          </section>
        --}}
      {{/post}}
    </div>
  </article>
</main>

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
  <script defer src="{{asset "js/post.js"}}"></script>
{{/contentFor}}