{% extends "base.html" %}
{% block title %}{{ site_display_name() }} — {{ site_tagline() }}{% endblock %}

{% block content %}
<div class="container px-3 px-md-4 py-5">
  <section class="text-center py-4 py-md-5 mb-5 border-bottom">
    <h1 class="display-4 fw-extrabold text-dark mb-3 tracking-tight">{{ site_display_name() }}</h1>
    <p class="lead text-secondary mx-auto mb-0" style="max-width: 650px;">{{ site_tagline() }}</p>
  </section>

  {% if plugin_area_main_content %}
    <div class="mb-5">{{ plugin_area_main_content | safe }}</div>
  {% endif %}

  {% if posts %}
  <div class="row g-4">
    {% for post in posts %}
    <div class="col-lg-4 col-md-6">
      <article class="lumina-card h-100 d-flex flex-column overflow-hidden">
        {% if post.image_url or post.hero_image_url %}
        <a href="{% if flat_post_urls %}/{{ post.slug }}{% else %}/blog/{{ post.slug }}{% endif %}" class="d-block overflow-hidden" style="max-height: 220px;">
          <img src="{{ post.image_url or post.hero_image_url }}" alt="{{ post.title }}" class="w-100 h-100 object-fit-cover" style="transition: transform 0.3s ease;">
        </a>
        {% endif %}
        <div class="p-4 d-flex flex-column flex-grow-1">
          <div class="d-flex align-items-center justify-content-between gap-2 mb-3">
            {% if post.category and post.category.lower() not in ['none', 'null', 'uncategorized', ''] %}
              <span class="lumina-badge">{{ post.category }}</span>
            {% else %}
              <span></span>
            {% endif %}
            {% if post.published_at %}
              <span class="text-muted small">📅 {{ post.published_at.strftime("%d.%m.%Y") }}</span>
            {% endif %}
          </div>
          <h2 class="h5 fw-bold mb-2">
            <a href="{% if flat_post_urls %}/{{ post.slug }}{% else %}/blog/{{ post.slug }}{% endif %}" class="text-dark text-decoration-none">
              {{ post.title }}
            </a>
          </h2>
          {% if post.excerpt %}
          <p class="text-secondary small mb-4 flex-grow-1" style="line-height: 1.6;">
            {{ post.excerpt | truncate(130) }}
          </p>
          {% endif %}
          <div class="pt-3 border-top mt-auto d-flex align-items-center justify-content-between">
            <span class="small fw-semibold text-secondary">
              {% if post.author_name %}✍️ {{ post.author_name }}{% endif %}
            </span>
            <a href="{% if flat_post_urls %}/{{ post.slug }}{% else %}/blog/{{ post.slug }}{% endif %}" class="small fw-bold text-primary text-decoration-none">
              {{ t('blog.readMore') if t else 'Citește' }} →
            </a>
          </div>
        </div>
      </article>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="text-center py-5">
    <div class="p-5 lumina-card max-w-lg mx-auto d-inline-block">
      <p class="text-secondary mb-0">📭 {{ t('blog.no_posts') if t else 'Nu există articole publicate momentan.' }}</p>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}