{% extends "base.html" %}

{% block title %}{{ site_display_name() }} — {{ site_tagline() }}{% endblock %}

{% block content %}
<div class="container px-3 px-md-4 px-lg-5 py-4 py-md-5">
  <!-- Plugin Area for Homepage Main Takeover -->
  {% if plugin_area_main_content %}
    {{ plugin_area_main_content | safe }}
  {% endif %}

  <!-- Elevate Hero Welcome Section -->
  <section class="py-4 py-md-5 mb-4 text-center">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <span class="badge text-bg-primary rounded-pill px-3 py-2 mb-3 shadow-sm">✨ Jurnal Tehnologic & Povești</span>
        <h1 class="display-5 fw-bold mb-3">{{ site_display_name() }}</h1>
        <p class="lead text-secondary mb-0">
          {{ site_tagline() or 'Articole, ghiduri tehnice și impresii din călătorii.' }}
        </p>
      </div>
    </div>
  </section>

  <!-- Main Articles List -->
  <section class="mb-5">
    {% if posts %}
      <div class="vstack gap-4">
        {% for post in posts %}
          <article class="card elevate-card overflow-hidden">
            <div class="row g-0 align-items-center {% if loop.index is even %}flex-md-row-reverse{% endif %}">
              {% set thumb_url = post.hero_image_url or post.image_url %}
              {% if thumb_url %}
              <div class="col-md-5 col-lg-5">
                <a href="{{ post_public_path(post.slug) }}" class="d-block overflow-hidden h-100">
                  <img src="{{ thumb_url }}" alt="{{ post.title }}" class="elevate-hero-img h-100 w-100" style="aspect-ratio: 1200 / 630; min-height: 180px; max-height: 240px; object-fit: cover;" loading="lazy" decoding="async" />
                </a>
              </div>
              {% endif %}
              <div class="{% if thumb_url %}col-md-7 col-lg-7{% else %}col-12{% endif %}">
                <div class="card-body p-4">
                  <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
                    {% 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.strftime("%d.%m.%Y") }}</small>
                    {% endif %}
                    {% if post.draft %}
                      <span class="badge text-bg-warning">Draft</span>
                    {% endif %}
                  </div>

                  <h2 class="h4 mb-3">
                    <a class="text-decoration-none text-body fw-bold" href="{{ post_public_path(post.slug) }}">{{ post.title }}</a>
                  </h2>

                  {% if post.excerpt %}
                    <p class="text-secondary mb-3 small">{{ post.excerpt }}</p>
                  {% endif %}

                  <div class="d-flex align-items-center justify-content-between pt-2 mt-auto">
                    <a href="{{ post_public_path(post.slug) }}" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-semibold">
                      Citește totul &rarr;
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </article>
        {% endfor %}
      </div>

      <!-- Pagination -->
      {% if total_pages and total_pages > 1 %}
      <nav class="mt-5 d-flex justify-content-center" aria-label="Navigare pagini">
        <ul class="pagination pagination-md gap-1">
          {% for p in pages %}
            <li class="page-item {% if p == current_page %}active{% endif %}">
              <a class="page-link rounded-circle px-3 py-2 fw-semibold" href="?page={{ p }}">{{ p }}</a>
            </li>
          {% endfor %}
        </ul>
      </nav>
      {% endif %}

    {% else %}
      <div class="card p-5 text-center my-4">
        <div class="py-4">
          <div class="fs-1 mb-3">📝</div>
          <h3 class="h4 fw-bold mb-2">Nu există articole publicate</h3>
          <p class="text-secondary mb-4">Fii primul autor care publică o poveste sau un ghid pe acest blog!</p>
          {% if user and user.role in ['admin', 'editor'] %}
            <a href="/admin/new" class="btn btn-primary rounded-pill px-4">✍️ Scrie un articol acum</a>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </section>
</div>
{% endblock %}