{% extends "pages/base.html" %}
{% load i18n %}
{% block title %}{% trans "Manuals" %}{% endblock %}
{% block content %}
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
    <h1 class="mb-0">{% trans "User Manuals" %}</h1>
    <p class="text-muted mb-0">{% trans "Explore official guides, wiring diagrams, and deployment runbooks." %}</p>
  </div>
  {% if manuals %}
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
      {% for manual in manuals %}
        <div class="col">
          <article class="card h-100 border-0 shadow-sm">
            <div class="card-body d-flex flex-column">
              <h2 class="h5">
                <a class="stretched-link text-decoration-none" href="{% url 'pages:manual-detail' manual.slug %}">
                  {{ manual.title }}
                </a>
              </h2>
              <p class="text-muted mb-3">{{ manual.description }}</p>
              <dl class="row row-cols-auto g-2 small text-uppercase text-muted mb-0">
                <dt class="col fw-semibold">{% trans "Languages" %}</dt>
                <dd class="col mb-0">{{ manual.languages|default:_("Not specified") }}</dd>
              </dl>
              <div class="mt-auto pt-3 d-flex flex-wrap gap-2">
                <a class="btn btn-sm btn-outline-secondary" href="{% url 'pages:manual-detail' manual.slug %}">
                  {% trans "View manual" %}
                </a>
                <a class="btn btn-sm btn-primary" href="{% url 'pages:manual-pdf' manual.slug %}" download>
                  {% trans "Download PDF" %}
                </a>
              </div>
            </div>
          </article>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <p class="text-muted fst-italic">{% trans "No manuals are available yet." %}</p>
  {% endif %}
{% endblock %}