{% extends "base.html" %}
{% block title %}Resumen del checkout #{{ checkout.id }} — GhostCart{% endblock %}
{% block content %}
<h1>Resumen del checkout #{{ checkout.id }}</h1>

<div class="info-row"><span class="k">Perteneciente a</span><span class="v">{{ checkout.owner_username }}</span></div>
<div class="info-row"><span class="k">Fecha</span><span class="v">{{ checkout.creado_en }}</span></div>
<div class="info-row"><span class="k">Estado</span>
  <span class="v">
    <span class="badge {{ 'badge-premium' if checkout.estado == 'completado' else 'badge-free' }}">{{ checkout.estado }}</span>
  </span>
</div>

<h2 class="section-title">Artículos</h2>
{% for i in items %}
<div class="info-row">
  <span class="k">{{ i.nombre }} × {{ i.cantidad }}</span>
  <span class="v">{{ "%.2f"|format(i.precio * i.cantidad) }} €</span>
</div>
{% endfor %}
<div class="info-row"><span class="k"><strong>Total</strong></span><span class="v"><strong>{{ "%.2f"|format(total) }} €</strong></span></div>

{% if checkout.estado == 'pendiente' %}
<p style="margin-top:24px;">
  <button class="btn" id="btn-confirm-checkout" data-id="{{ checkout.id }}">Confirmar y pagar</button>
</p>
<div class="status-line" id="confirm-checkout-status"></div>
{% endif %}

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