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

<section class="aurora-hero">
  <div class="container py-5 py-lg-6">
    <div class="row align-items-end g-4">
      <div class="col-lg-9">
        <p class="eyebrow mb-3">{{ site_display_name() }}</p>
        <h1 class="display-2 fw-bold mb-3">{{ site_tagline() }}</h1>
      </div>
      <div class="col-lg-3 text-lg-end">
        <span class="hero-note">Journal · Stories · Ideas</span>
      </div>
    </div>

    {% if plugin_area_main_content %}
      <div class="mt-4">
        {{ plugin_area_main_content | safe }}
      </div>
    {% endif %}
  </div>
</section>

<main class="container py-5 py-lg-6">
  {% if posts %}
    {% for post in posts %}
      {% if loop.first %}
        <article class="featured-post mb-5">
          <div class="row g-0 align-items-stretch">
            <div class="col-lg-7">
              {% if post.hero_image_url or post.image_url %}
                <a href="/{{ post.slug }}" class="featured-media-link" aria-label="{{ post.title|e }}">
                  <img src="{{ (post.hero_image_url or post.image_url)|e }}" alt="{{ post.title|e }}" class="featured-media">
                </a>
              {% else %}
                <div class="featured-placeholder">{{ site_display_name() }}</div>
              {% endif %}
            </div>
            <div class="col-lg-5">
              <div class="featured-copy h-100">
                {% if post.category %}<span class="badge mb-3">{{ post.category }}</span>{% endif %}
                <p class="featured-label">{{ t('blog.author') if t else 'Article' }}</p>
                <h2 class="display-5 fw-bold mb-3"><a href="/{{ post.slug }}" class="stretched-link text-decoration-none text-reset">{{ post.title }}</a></h2>
                {% if post.excerpt %}<p class="lead text-secondary">{{ post.excerpt }}</p>{% endif %}
                <div class="post-byline mt-4">
                  {% if post.author_name %}<span>{{ post.author_name }}</span>{% endif %}
                  {% if post.published_at %}<span>{{ post.published_at.strftime('%d.%m.%Y') }}</span>{% endif %}
                </div>
              </div>
            </div>
          </div>
        </article>
      {% else %}
        {% if loop.index0 == 1 %}<div class="row g-4">{% endif %}
        <div class="col-md-6 col-xl-4">
          <article class="post-card h-100">
            {% if post.image_url or post.hero_image_url %}
              <a href="/{{ post.slug }}" class="card-media-link" aria-label="{{ post.title|e }}">
                <img src="{{ (post.image_url or post.hero_image_url)|e }}" alt="{{ post.title|e }}" class="card-image">
              </a>
            {% endif %}
            <div class="p-4 d-flex flex-column h-100">
              {% if post.category %}<span class="badge align-self-start mb-3">{{ post.category }}</span>{% endif %}
              <h2 class="h4 fw-bold mb-3"><a href="/{{ post.slug }}" class="stretched-link text-decoration-none text-reset">{{ post.title }}</a></h2>
              {% if post.excerpt %}<p class="text-secondary mb-4">{{ post.excerpt }}</p>{% endif %}
              <div class="post-byline mt-auto">
                {% if post.author_name %}<span>{{ post.author_name }}</span>{% endif %}
                {% if post.published_at %}<span>{{ post.published_at.strftime('%d.%m.%Y') }}</span>{% endif %}
              </div>
            </div>
          </article>
        </div>
        {% if loop.last %}</div>{% endif %}
      {% endif %}
    {% endfor %}
  {% else %}
    <div class="empty-state text-center py-5">
      <p class="eyebrow">{{ site_display_name() }}</p>
      <h2 class="display-6 fw-bold">{{ site_tagline() }}</h2>
    </div>
  {% endif %}
</main>

{% endblock %}