{% extends "baselayout.njk" %}

{% block header %}
  <div class="prose lg:prose-xl prose-invert m-auto text-center">
    <p class="text-left">
      <a href="/til" class="pt-4 pr-1 inline-flex items-center text-sm font-medium text-slate-300 hover:text-slate-100">
        <!-- Heroicon name: solid/arrow-narrow-left -->
        <svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
        </svg>
        Back
      </a>
    </p>

    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
{% endblock %}

{% block main %}
  <main class="flex flex-col rounded-lg shadow-lg overflow-hidden mx-auto max-w-lg lg:max-w-xl mt-8">
    <div class="flex-1 bg-white p-6 flex flex-col justify-between prose prose-slate">
  {{ content | safe }}
  </main>
{% endblock %}

{% block footer %}
  <a href="/til" class="pt-4 pr-1 inline-flex items-center text-sm font-medium text-slate-300 hover:text-slate-100">
    <!-- Heroicon name: solid/arrow-narrow-left -->
    <svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
    </svg>
    Back
  </a>
{% endblock %}