{% extends "base.html" %}
{% load static i18n wagtailcore_tags wagtailimages_tags %}

{% block title %}{{ page.specific.title }} | {% trans "Blog" %}{% endblock title %}

{% block body_class %}template-blog{% endblock body_class %}

{% block content %}
<div class="max-w-3xl mx-auto py-12 px-4">
  <a href="{{ page.get_parent.url }}" class="inline-flex items-center gap-1 text-gray-500 text-4xl mb-4 hover:text-gray-700 transition-colors duration-300">
    <i class="fi fi-br-arrow-left leading-0"></i>
  </a>
  <h1 class="text-4xl font-bold mb-6 text-gray-800">
    {{ page.specific.title }}
  </h1>
  <div class="flex items-center gap-4 mb-8 text-gray-500">
    <div class="flex items-center gap-1">
      <i class="fi fi-br-circle-user leading-0"></i>
      <span class="text-sm">{{ page.specific.author }}</span>
    </div>
    <div class="flex items-center gap-1">
      <i class="fi fi-br-calendar leading-0"></i>
      <span class="text-sm">{{ page.first_published_at|date:"F j, Y | H:i" }}</span>
    </div>
  </div>
  {% if page.specific.image %}
    <div class="mb-8">
      {% image page.specific.image original class="w-full max-h-100 object-contain rounded-lg" %}
    </div>
  {% endif %}
  <article class="prose max-w-none">
  {% for block in page.body %}
    {% if block.block_type == 'heading' %}
      <h2>
        {{ block.value }}
      </h2>
    {% else %}
      <section class="block-{{ block.block_type }}">
      {% include_block block %}
      </section>
    {% endif %}
  {% endfor %}
  </article>
</div>
{% endblock content %}