{% extends "base.html" %}

{% block content %}
<section class="page-hero section-shell page-hero-compact">
  <div class="container">
    <span class="eyebrow">Katalog</span>
    <h1 class="page-title">Entdecken Sie Schmuck, Uhren und Trauringe.</h1>
    <p class="page-copy">Filterbar, fokussiert und bereit für die direkte Kontaktaufnahme – ohne komplizierten Checkout.</p>
  </div>
</section>

<section class="section-shell pt-0">
  <div class="container">
    <div class="glass-panel filter-panel mb-4">
      <form method="get" class="row g-3 align-items-end">
        <div class="col-lg-5">
          <label class="form-label" for="q">Suche</label>
          <input class="form-control" id="q" type="search" name="q" value="{{ query }}" placeholder="z. B. Gravur, Perlen, Automatikuhr">
        </div>
        <div class="col-lg-4">
          <label class="form-label" for="category">Kategorie</label>
          <select class="form-select" id="category" name="category">
            <option value="">Alle Kategorien</option>
            {% for category in categories %}
            <option value="{{ category.slug }}" {% if selected_category == category.slug %}selected{% endif %}>{{ category.name }} ({{ category.product_total }})</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-lg-3 d-flex gap-3">
          <button class="btn btn-brand flex-grow-1" type="submit">Filtern</button>
          <a class="btn btn-ghost flex-grow-1" href="{% url 'catalog' %}">Zurücksetzen</a>
        </div>
      </form>
    </div>

    <div class="row g-4">
      {% for product in products %}
      <div class="col-md-6 col-xl-4">
        <article class="product-card glass-panel h-100">
          <div class="product-visual">
            <span>{{ product.category.name }}</span>
          </div>
          <div class="product-body">
            <p class="product-category">{{ product.category.name }}</p>
            <h2>{{ product.name }}</h2>
            <p>{{ product.short_description }}</p>
            <div class="product-meta">
              <strong class="product-price">{{ product.price_label }}</strong>
              {% if product.material %}<span>{{ product.material }}</span>{% endif %}
            </div>
            <div class="d-flex gap-3 mt-4">
              <a class="btn btn-brand" href="{% url 'product_detail' product.slug %}">Details</a>
              <a class="btn btn-ghost" href="{% url 'contact' %}?product={{ product.slug }}">Anfragen</a>
            </div>
          </div>
        </article>
      </div>
      {% empty %}
      <div class="col-12">
        <div class="empty-state glass-panel">
          <h2>Keine Treffer gefunden</h2>
          <p>Passen Sie die Filter an oder nehmen Sie direkt Kontakt auf, damit wir Ihnen passende Stücke empfehlen können.</p>
          <div class="d-flex flex-wrap justify-content-center gap-3">
            <a class="btn btn-brand" href="{% url 'catalog' %}">Alle Produkte ansehen</a>
            <a class="btn btn-ghost" href="{% url 'contact' %}">Beratung anfragen</a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}