{% extends "base.html" %}
{% block content %}
<section class="container py-4 py-lg-5">
  <div class="row justify-content-center">
    <div class="col-lg-10 col-xl-9">
      <header class="mb-4">
        <h1 class="h2 fw-semibold mb-2">{{ site_display_name() }}</h1>
        <p class="text-secondary mb-0">{{ site_tagline() }}</p>
      </header>

      {% if categories %}
      <div class="d-flex flex-wrap gap-2 mb-4">
        <a class="btn btn-sm {% if not current_category %}btn-primary{% else %}btn-outline-primary{% endif %}" href="/">{{ t_safe(translations, 'home.categories.all') }}</a>
        {% for category in categories %}
          <a class="btn btn-sm {% if category.slug == current_category %}btn-primary{% else %}btn-outline-primary{% endif %}"
             href="/?category={{ category.slug|urlencode }}">
            {{ category.name }}
          </a>
        {% endfor %}
      </div>
      {% endif %}

      {% if posts %}
      <div class="vstack gap-4">
        {% for post in posts %}
          <article class="card border shadow-sm 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-4 col-lg-4">
                <a href="{{ post_public_path(post.slug) }}" class="d-block h-100">
                  <img src="{{ thumb_url }}" alt="{{ post.title }}" class="img-fluid {% if loop.index is even %}rounded-end{% else %}rounded-start{% endif %} object-fit-cover w-100" style="aspect-ratio: 1200 / 630; min-height: 140px; max-height: 190px;" loading="lazy" decoding="async" />
                </a>
              </div>
              {% endif %}
              <div class="{% if thumb_url %}col-md-8 col-lg-8{% else %}col-12{% endif %}">
                <div class="card-body p-3 p-md-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.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="h5 mb-2">
                    <a class="text-decoration-none text-body fw-semibold" href="{{ post_public_path(post.slug) }}">{{ post.title }}</a>
                  </h2>
                  {% if post.excerpt %}
                    <p class="text-secondary mb-0 small">{{ post.excerpt }}</p>
                  {% endif %}
                </div>
              </div>
            </div>
          </article>
        {% endfor %}
      </div>
      {% else %}
      <div class="text-center py-5">
        <h3 class="h5 mb-2">{{ t_safe(translations, 'blog.empty.title') }}</h3>
        <p class="text-secondary mb-3">{{ t_safe(translations, 'blog.empty.description') }}</p>
        <a href="/admin" class="btn btn-primary">{{ t_safe(translations, 'blog.empty.cta') }}</a>
      </div>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}