{% extends "base.html" %}
{% block title %}{{ product.nombre }} — GhostRace{% endblock %}
{% block content %}
<a href="{{ url_for('catalogo') }}" class="muted-link">&larr; Volver al catálogo</a>

<div class="product-detail-head">
  <div class="product-emoji-lg">{{ product.emoji }}</div>
  <div>
    <h1>{{ product.nombre }}</h1>
    <div class="product-categoria badge badge-{{ product.categoria }}">{{ product.categoria.replace('_', ' ') }}</div>
    <div class="product-precio-lg">{{ "%.2f"|format(product.precio) }} €</div>
    <button class="btn" data-role="add-to-cart" data-product-id="{{ product.id }}">Añadir al carrito</button>
  </div>
</div>

<h2 class="section-title">Reseñas ({{ total_votos }}{% if media %} · media ⭐ {{ media }}{% endif %})</h2>

{% if not ya_he_votado %}
<div class="rate-box">
  <p>¿Qué te parece este producto?</p>
  <form id="rate-form" data-product-id="{{ product.id }}">
    <div class="stars">
      {% for n in range(1,6) %}
      <label><input type="radio" name="valoracion" value="{{ n }}" {% if n==5 %}checked{% endif %}>{{ n }}★</label>
      {% endfor %}
    </div>
    <button type="submit" class="btn btn-small">Enviar valoración</button>
  </form>
  <div id="rate-status" class="status-line"></div>
</div>
{% else %}
<div class="status-line ok" style="display:block">Ya has valorado este producto.</div>
{% endif %}

<div class="comments-list">
  {% for r in reviews_seed %}
  <div class="comment-box">
    <span class="username">{{ r.autor }}</span> ⭐ {{ r.valoracion }}
    <div class="meta">{{ r.comentario }}</div>
  </div>
  {% endfor %}
  {% for r in reviews_live %}
  <div class="comment-box">
    <span class="username">Tú</span> ⭐ {{ r.valoracion }}
    <div class="meta">{{ r.creado_en }}</div>
  </div>
  {% endfor %}
</div>
{% endblock %}