{% extends "base.html" %}
{% block title %}Catálogo — GhostCart{% endblock %}
{% block content %}
<h1>Catálogo</h1>
<p style="color:var(--text-dim); margin-top:6px;">Conectado como <strong>{{ user.username }}</strong></p>

<div class="grid" style="margin-top:24px;">
  {% for p in products %}
  <div class="card" data-id="{{ p.id }}">
    <div class="poster">{{ p.emoji }}</div>
    <div class="card-body">
      <h3>{{ p.nombre }}</h3>
      <div class="genre">{{ "%.2f"|format(p.precio) }} € · stock {{ p.stock }}</div>
      <div class="field" style="margin-top:10px;">
        <input type="number" class="qty-input" min="1" value="1" data-role="qty">
      </div>
      <button class="btn play-btn" data-role="add-to-cart">🛒 Añadir al carrito</button>
      <div class="status-line" data-role="status"></div>
    </div>
  </div>
  {% endfor %}
</div>

<h2 class="section-title">Tu carrito</h2>
<div class="auth-card" style="max-width:520px; margin:0;">
  <div id="cart-items"><p style="color:var(--text-dim);">Cargando carrito…</p></div>
  <div class="info-row"><span class="k">Total</span><span class="v" id="cart-total">0.00 €</span></div>
  <button class="btn" id="btn-checkout" style="width:100%; margin-top:10px;">Finalizar compra</button>
  <button class="btn btn-outline" id="btn-clear-cart" style="width:100%; margin-top:10px;">Vaciar carrito</button>
  <div class="status-line" id="checkout-status"></div>
</div>

<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}