---
layout: main/base.html
---
<div class="sm:container m-0 p-0 sm:mx-auto sm:p-4 md:p-10">
	<div class="the-card">
    <!-- top navbar -->
    <div class="the-navbar rounded-t-xl">
      <div class="navbar-start">
        <!-- back to posts -->
        <a href="/blog" aria-label="back" class="btn btn-ghost btn-circle">
          <svg
  				  xmlns="http://www.w3.org/2000/svg"
  				  class="h-5 w-5"
  				  fill="none"
  				  viewBox="0 0 24 24"
  				  stroke="currentColor">
  				  <path
  				    stroke-linecap="round"
  				    stroke-linejoin="round"
  				    stroke-width="2"
  				    d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
  				  <path
  				    stroke-linecap="round"
  				    stroke-linejoin="round"
  				    stroke-width="2"
  				    d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
  				</svg>
        </a>
        <!-- back home -->
        <a href="/" aria-label="home" class="btn btn-ghost btn-circle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
            <polyline
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              points="9 22 9 12 15 12 15 22" />
          </svg>
        </a>
      </div>
      <div class="navbar-end">
        <!-- comment -->
        {% include "post/commentbutton.html" %}
        <!-- share -->
        {% include "post/sharebutton.html" %}
      </div>
    </div>
    <!-- content -->
    <div class="flex-grow">
      <div class="card-body pt-4 tn:pt-8">
        <div class="w-full">
          <div class="prose max-w-none">
            <h3>{{ title }}</h3>
            <div class="text-sm mt-0 mx-0 mb-6">
              {{ date | date: "%a, %d %b %Y" }}
            </div>
            {{ content }}
          </div>
        </div>
      </div>
    </div>
    <div class="border-t border-base-200"></div>
    <!-- bottom navbar -->
    {%- if collections.posts %}
  {%- assign previousPost = collections.posts | getPreviousCollectionItem %}
  {%- assign nextPost = collections.posts | getNextCollectionItem %}
  {%- if nextPost or previousPost %}
    <div class="card-action navbar bg-base-100 rounded-b-xl px-4">
      <div class="navbar-start">
        <!-- next post -->
        {%- if nextPost %}
        <a aria-label="next" href="{{ nextPost.url }}" class="btn btn-ghost btn-circle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
        </a>
        {% endif %}
      </div>
      <!-- credit license -->
      <div class="navbar-center text-center py-4">
        {% include "footer/footer-credit.html" %}
      </div>
      <div class="navbar-end">
        <!-- prev post -->
        {%- if previousPost %}
        <a href="{{ previousPost.url }}" aria-label="previous" class="btn btn-ghost btn-circle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14 5l7 7m0 0l-7 7m7-7H3" />
          </svg>
        </a>
        {% endif %}
      </div>
    </div>
    {% endif %}
    {% endif %}
  </div>
</div>
{% include "post/sharemodal.html" %}
{% include "post/comment-modal.html" %}
