{% extends "index.html" %}

{% import "macros.html" as macros %}

{% block header %}
<header id="site-header" class="">
  <div class="hdr-wrapper section-inner">
    <div class="hdr-left">
      <div class="site-branding">
        <a href="{{ config.base_url}}">{{ config.title }}</a>
      </div>
      <nav class="site-nav hide-in-mobile">
        {% for menu_item in config.extra.hermit_menu %}
        <a href="{{ config.base_url ~ menu_item.link }}">{{ menu_item.name }}</a>
        {% endfor %}
      </nav>
    </div>
    <div class="hdr-right hdr-icons">
      <span class="hdr-social hide-in-mobile">
        {{ macros::render_social_icons() }}
      </span>
      <button id="menu-btn" class="hdr-btn" title="Menu">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="feather feather-menu">
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
    </div>
  </div>
</header>

<div id="mobile-menu" class="">
  <ul>
    {% for menu_item in config.extra.hermit_menu %}
    <li>
      <a href="{{ config.base_url ~ menu_item.link }}">{{ menu_item.name }}</a>
    </li>
    {% endfor %}
  </ul>
</div>
{% endblock header %}

{% block title %} {% endblock title %}

{% block main %}
<main class="site-main section-inner">
  <article class="thin">
    <header class="post-header">
      <div class="post-meta">

        {% if page.date %}
        <span>{{ page.date | date(format="%b %d, %Y") }}</span>
        <small> - {{ macros::read_time(words=page.word_count) }}</small>
        {% endif %}

        {% if page.extra.toc %}
          <button id="toc-btn" class="hdr-btn desktop-only-ib">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="feather feather-list">
              <line x1="8" y1="6" x2="21" y2="6"></line>
              <line x1="8" y1="12" x2="21" y2="12"></line>
              <line x1="8" y1="18" x2="21" y2="18"></line>
              <line x1="3" y1="6" x2="3" y2="6"></line>
              <line x1="3" y1="12" x2="3" y2="12"></line>
              <line x1="3" y1="18" x2="3" y2="18"></line>
            </svg>
            <span>ToC</span>
          </button>
        {% endif %}

      </div>
      <h1>{{ page.title }}</h1>
    </header>

    <div class="content">
      {{ page.content | safe }}
    </div>

    <hr class="post-end">

    <footer class="post-info">

      {% if page.taxonomies and page.taxonomies.tags %}
      <p>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="feather feather-tag meta-icon">
          <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
          <line x1="7" y1="7" x2="7" y2="7"></line>
        </svg>

        {% for k, tags in page.taxonomies %}
          {% for t in tags %}
            <span class="tag">
              <a href="{{ get_taxonomy_url(kind="tags", name=t) }}">{{ t }}</a>
            </span>
          {% endfor %}
        {% endfor %}
      </p>
      {% endif %}

      <p>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="feather feather-file-text">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
          <line x1="16" y1="13" x2="8" y2="13"></line>
          <line x1="16" y1="17" x2="8" y2="17"></line>
          <polyline points="10 9 9 9 8 9"></polyline>
        </svg>

        {{ page.word_count }} Words
      </p>

      {% if page.date %}
      <p>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="feather feather-calendar">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
          <line x1="16" y1="2" x2="16" y2="6"></line>
          <line x1="8" y1="2" x2="8" y2="6"></line>
          <line x1="3" y1="10" x2="21" y2="10"></line>
        </svg>

        {{ page.date }}
      </p>
      {% endif %}

    </footer>
  </article>

  {% if page.extra.toc %}
  <aside id="toc">
    <div id="TableOfContents">
      <div class="toc-title">Table of Contents</div>
        <ul>
          {% for h1 in page.toc %}
          <li>
            <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
            {% if h1.children %}
            <ul>
              {% for h2 in h1.children %}
              <li>
                <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
              </li>
              {% endfor %}
            </ul>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
      </div>
    </aside>
    {% endif %}

  <div class="post-nav thin">

    {% if page.extra.later %}
    <a class="next-post" href="{{ page.extra.later.permalink }}">
      <span class="post-nav-label">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="feather feather-arrow-left">
          <line x1="19" y1="12" x2="5" y2="12"></line>
          <polyline points="12 19 5 12 12 5"></polyline>
        </svg>
        &nbsp;Newer
      </span>
      <br>
      <span>{{ page.extra.later.title }}</span>
    </a>
    {% endif %}

    {% if page.extra.earlier %}
    <a class="prev-post" href="{{ page.extra.earlier.permalink }}">
      <span class="post-nav-label">
        Older&nbsp;
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="feather feather-arrow-right">
          <line x1="5" y1="12" x2="19" y2="12"></line>
          <polyline points="12 5 19 12 12 19"></polyline>
        </svg>
      </span>
      <br>
      <span>{{ page.extra.earlier.title }}</span>
    </a>
    {% endif %}

  </div>

  {% if config.extra.disqus.enable and not page.extra.disable_comments %}
  <div id="disqus_thread"></div>
  <script>
    (function() {
      var disqus_config = function () {
        this.page.url = "{{ page.extra.permalink }}";
        this.page.identifier = "{{ page.extra.permalink }}";
      };
      var d = document, s = d.createElement('script');
      s.src = 'https://{{ config.extra.disqus.shortname }}.disqus.com/embed.js';
      s.setAttribute('data-timestamp', + new Date());
      (d.head || d.body).appendChild(s);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  {% endif %}

</main>
{% endblock main %}

{% block footer %} {{ macros::footer() }} {% endblock footer %}