{{!< default}}

{{#post}}
<div class="relative group index-header">
  {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
    <div class="h-full opacity-50 bg-black">
    </div>
  </div>
  <div class="absolute bottom-0 py-4 left-0 right-0">
    <div class="container mx-auto content-full">
      <div>
        {{> primary-tag}}
      </div>
      <div>
        <h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
      </div>
      <div class="mb-4">
        <p><span class="text-white text-sm"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p>
      </div>
      <div class="author-list text-base text-white">
        <div class="author-images">
          {{#foreach authors}}
            {{#if profile_image}}
              <div class="h-8 ml-1 mr-3">
                <a href="{{url}}">
                  <img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
                </a>
              </div>
            {{/if}}
          {{/foreach}}
        </div>
        <div class="author-names">
          <div>
            <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<article class="post-article">
<main class="content container" id="post">
  <div class="content-full">
    {{content}}
  </div>
</main>
<div class="my-4 w-full content-full">
    <div class="flex flex-col md:flex-row justify-between">
      {{#prev_post}}
      <a href="{{url}}" class="block w-full md:w-1/3 flex flex-row items-center justify-start md:justify-end hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4">
        <span class="material-icons mr-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_back</span>
        <div class="flex flex-col items-start md:items-end ">
          <p class="text-xl text-yuika-blue-700 group-hover:text-white">Previous post</p>
          <p>{{title}}</p>
        </div>
      </a>
      {{/prev_post}}
      <div class="flex flex-grow"></div>
      {{#next_post}}
      <a href="{{url}}" class="block w-full md:w-1/3 flex flex-row items-center justify-end md:justify-start hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4">
        <div class="flex flex-col items-end md:items-start">
          <p class="text-xl text-yuika-blue-700 group-hover:text-white">Next post</p>
          <p>{{title}}</p>
        </div>
        <span class="material-icons ml-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_forward</span>
      </a>
      {{/next_post}}
    </div>
</div>
<div class="my-4 w-full content-full">
    <div class="my-4" id="comments">
      {{#is "preview"}}
      <p>Comments are disabled for post previews</p>
      {{else}}
      {{!-- Comments  --}}
        
      {{/is}}
    </div>
</div>
<div class="mx-auto px-4 my-4 w-full">
            {{#if primary_tag}}
              {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
                {{#if related_posts}}
                  {{#../primary_tag}}
                      <div class="px-3 w-full">
                        <p class="text-2xl">
                          More in 
                          <a href="{{url}}">
                            {{#if accent_color}} 
                            <span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
                            {{else}}
                            <span class="tag-accent-color medium"></span>{{name}}
                            {{/if}}
                            <span class="hover:underline">{{name}}</span>
                          </a>
                        </p>
                      </div>
                  {{/../primary_tag}}
                  <div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
                  {{#foreach related_posts}}
                    {{> post-card}}
                  {{/foreach}}
                  </div>
                {{/if}}
              {{/get}}
            {{/if}}
</div>
{{/post}}
</article>

{{#contentFor "scripts"}}
<script>
$(document).ready(function () {
        // FitVids - start
        var $postContent = $("#post");
        $postContent.fitVids();
        // FitVids - end
});
</script>
{{/contentFor}}