{% extends "base.html" %}

{% block title %}{{ page_title }} · {{ project_name }}{% endblock %}

{% block content %}
<main class="page-shell">
  <section class="container">
    <div class="page-hero compact">
      <span class="eyebrow">Catálogo</span>
      <h1>{% if selected_category %}{{ selected_category.name }}{% else %}Productos y servicios tecnológicos{% endif %}</h1>
      <p>Filtra por categoría, revisa detalles y avanza con contacto o confirmación de pago.</p>
    </div>

    <div class="filter-bar mb-4">
      <a class="filter-chip {% if not selected_category %}active{% endif %}" href="{% url 'catalog' %}">Todo</a>
      {% for category in categories %}
      <a class="filter-chip {% if selected_category == category %}active{% endif %}" href="{% url 'catalog' %}?categoria={{ category.slug }}">{{ category.name }}</a>
      {% endfor %}
    </div>

    <div class="row g-4">
      {% for product in products %}
        {% include "core/partials/product_card.html" with product=product %}
      {% empty %}
      <div class="col-12">
        <div class="empty-state">No hay productos en esta categoría todavía. Entra al admin para activar nuevos servicios.</div>
      </div>
      {% endfor %}
    </div>
  </section>
</main>
{% endblock %}