{% extends "baselayout.njk" %}

{% block header %}
  <div class="prose lg:prose-xl prose-invert m-auto text-center">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>

    <div class="mt-6 flex justify-between">
      <div class="text-sm text-slate-200">
        <time datetime="{{ date.toISOString() }}">
          {{ date.toDateString() }}
        </time>
      </div>
      <div class="text-sm text-slate-200">
        <span>
          {{ content | emojiReadTime }}
        </span>
      </div>
    </div>
  </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-shrink-0">
      <img class="h-48 w-full object-cover" src="{{ coverImage if coverImage else '/images/default-thumb.png'}}" alt="">
    </div>
    <div class="flex-1 bg-white p-6 flex flex-col justify-between prose prose-slate">
  {{ content | safe }}
  </main>
{% endblock %}