{% extends "base.html" %}
{% block title %}Catálogo — GhostRace{% endblock %}
{% block content %}
<h2 class="section-title">Catálogo</h2>
<div class="grid-productos">
  {% for p in productos %}
  <div class="product-card">
    <a href="{{ url_for('producto_detail', product_id=p.id) }}" class="product-link">
      <div class="product-emoji">{{ p.emoji }}</div>
      <div class="product-nombre">{{ p.nombre }}</div>
      <div class="product-categoria badge badge-{{ p.categoria }}">{{ p.categoria.replace('_', ' ') }}</div>
      {% set m = medias[p.id] %}
      {% if m.media %}
        <div class="product-rating">⭐ {{ m.media }} <span class="muted">({{ m.total }})</span></div>
      {% else %}
        <div class="product-rating muted">Sin valoraciones</div>
      {% endif %}
    </a>
    <div class="product-foot">
      <span class="product-precio">{{ "%.2f"|format(p.precio) }} €</span>
      <button class="btn btn-small" data-role="add-to-cart" data-product-id="{{ p.id }}">Añadir</button>
    </div>
  </div>
  {% endfor %}
</div>
<div id="catalogo-status" class="status-line"></div>
{% endblock %}