{% extends "base.html" %}

{% block title %}{{ post.title }} — {{ site_display_name() }}{% endblock %}

{% block head_extra %}
  {{ super() }}
  {% if post_header_meta_html %}
    {{ post_header_meta_html | safe }}
  {% endif %}
{% endblock %}

{% block content %}
<div class="container px-3 px-md-4 px-lg-5 py-4 py-md-5">
  <article class="row justify-content-center">
    <div class="col-lg-9 col-xl-8">
    
    <!-- Category & Metadata Header -->
    <div class="mb-3 d-flex flex-wrap align-items-center gap-2">
      {% if post.category %}
        <span class="badge text-bg-primary rounded-pill px-3 py-2 fs-6">{{ post.category }}</span>
      {% endif %}
      {% if post.author_name %}
        <span class="text-secondary small fw-semibold">✍️ {{ t_safe(translations, 'blog.author', 'Autor') }}: {{ post.author_name }}</span>
      {% endif %}
      {% if post.published_at %}
        <span class="text-secondary small">📅 {{ post.published_at.strftime("%d %B %Y") }}</span>
      {% endif %}
      {% if post.draft %}
        <span class="badge text-bg-warning">Draft</span>
      {% endif %}
    </div>

    <!-- Article Main Title -->
    <h1 class="display-4 fw-bold mb-4">{{ post.title }}</h1>

    <!-- Plugin Area Header (e.g. Share buttons at top, Author metadata) -->
    {% if plugin_area_article_header %}
    <div class="mb-4">
      {{ plugin_area_article_header | safe }}
    </div>
    {% endif %}

    <!-- Hero Image (1200x630 OpenGraph Banner) -->
    {% set hero_src = post.hero_image_url or post.image_url %}
    {% if hero_src %}
    <figure class="mb-5 text-center">
      <img src="{{ hero_src }}" alt="{{ post.title }}" class="img-fluid rounded-4 shadow-lg w-100 object-fit-cover" style="aspect-ratio: 1200 / 630; max-height: 520px;" loading="lazy" decoding="async" />
    </figure>
    {% endif %}

    <!-- Article Content Body -->
    <div class="post-content mb-5">
      {{ (post.content_html or post.content or post.rendered_content or '') | safe }}
    </div>

    <!-- Author Info Card -->
    {% if post.author_name %}
    <div class="card p-4 mb-5 border-0 shadow-sm rounded-4 bg-body-tertiary">
      <div class="d-flex align-items-center gap-3">
        <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center fw-bold fs-4 flex-shrink-0" style="width:52px; height:52px;">
          {{ post.author_name[0]|upper }}
        </div>
        <div>
          <h5 class="fw-bold mb-1">Scris de {{ post.author_name }}</h5>
          <p class="text-secondary small mb-0">Autor pe {{ site_display_name() }}</p>
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Plugin Area Footer (where Share & Comments Plugins Render) -->
    {% if post_article_footer_html %}
    <div class="mt-5 pt-3">
      {{ post_article_footer_html | safe }}
    </div>
    {% endif %}

  </div>
</article>
</div>
{% endblock %}