{% extends "base.html" %}


{% block extra_head %}
<link rel="canonical" href="{{ page.permalink | safe }}">
<meta property="og:url" content="{{ page.permalink | safe }}" />
{% endblock extra_head %}

{% block title %}
{{ page.title }}
{% endblock title %}

{% block content %}

<div class="mx-auto px-4 max-w-3xl py-8">
  <div class="py-2">
    {{ prev_macros::page_back_link(page=page) }}
  </div>

  <article class="blog-content">
    <h1 class="title">
      {{ page.title }}
    </h1>
    <a href="https://github.com/kjuulh" target="_blank" rel="noopener noreferrer"
      class="text-peach hover:text-orange-400">
      @kjuulh
    </a>
    <p class="subtitle"><strong>{{ page.date }}</strong></p>
    {{ page.content | safe }}
  </article>

  {% if page.lower or page.higher %}
  <div class="flex place-content-around max-w-lg mx-auto">
    {% if page.lower %}
    <a class="previous" href="{{ page.lower.permalink | safe }}">‹ {{ page.lower.title }}</a>
    {% endif %}
    {% if page.higher %}
    <a class="next" href="{{ page.higher.permalink | safe }}">{{ page.higher.title }} ›</a>
    {% endif %}
  </div>
  {% endif %}
</div>

{% endblock content %}