{% extends "base.html" %}

{% block head_extra %}
  <meta property="article:published_time" content="{{ post.published_at_utc.strftime('%Y-%m-%dT%H:%M:%SZ')|e }}" />
{% endblock %}

{% block content %}
<article class="container py-4 py-lg-5">
  <div class="row justify-content-center">
    <div class="col-lg-10 col-xl-9">
      <nav class="mb-3">
        <a href="/" class="text-decoration-none">← {{ t_safe(translations, 'home.postPage.backToBlog') }}</a>
      </nav>

      <header class="mb-4">
        <div class="d-flex flex-wrap gap-2 align-items-center mb-2">
          {% if post.category %}
            <span class="badge text-bg-light border">{{ post.category }}</span>
          {% endif %}
          {% if post.author_name %}
            <small class="text-muted">✍️ {{ t_safe(translations, 'blog.author', 'Autor') }}: {{ post.author_name }}</small>
          {% endif %}
          {% if post.published_at %}
            <small class="text-muted">• {{ post.published_at_utc.strftime("%d.%m.%Y") }}</small>
          {% endif %}
          {% if post.draft %}
            <span class="badge text-bg-warning">Draft</span>
          {% endif %}
        </div>
        <h1 class="h2 fw-semibold mb-2">{{ post.title }}</h1>
        {% if post.excerpt %}
          <p class="text-secondary mb-0">{{ post.excerpt }}</p>
        {% endif %}
        {% if post_header_meta_html %}
          <div class="mt-2">{{ post_header_meta_html | safe }}</div>
        {% endif %}
        {% if plugin_area_article_header %}
          <div class="mt-2">{{ plugin_area_article_header | safe }}</div>
        {% endif %}
      </header>

      {% set hero_src = post.hero_image_url or post.image_url %}
      {% if hero_src %}
      <figure class="mb-4 text-center">
        <img src="{{ hero_src }}" alt="{{ post.title }}" class="img-fluid rounded border shadow-sm w-100 object-fit-cover" style="aspect-ratio: 1200 / 630; max-height: 480px;" loading="lazy" decoding="async" />
      </figure>
      {% endif %}

      <div class="card">
        <div class="card-body post-body content">
          {{ post.content_html | safe }}
        </div>
      </div>

      {% if post_article_footer_html %}
      <div class="mt-4">
        <div class="card border-0 shadow-sm">
          <div class="card-body p-4">
            {{ post_article_footer_html | safe }}
          </div>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</article>
{% endblock %}