<!DOCTYPE html>

    {% include 'partials/head.html' %}
	{% include 'partials/header.html' %}
	{% include 'partials/video.html' %}

<div class="main-page">
    <div class="middle-content">
        <div class="body-content">
            <div class="title-content">
                <h1>Tienda del cliente (Battlepay)</h1>
            </div>
            <div class="box-content">
                <div class="body-box-content centered">
                    <p>Compras pendientes de pago de la cuenta <strong>{{ username }}</strong>.</p>
                    <br>

                    {% if orders %}
                    <table class="middle-center-table">
                        <thead>
                            <tr>
                                <th>Producto</th>
                                <th>Precio</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in orders %}
                            <tr>
                                <td>{{ order.product_name }}</td>
                                <td>{{ order.price_eur }} €</td>
                                <td>
                                    <form action="{% url 'battlepay_pay' %}" method="POST" accept-charset="utf-8">
                                        {% csrf_token %}
                                        <input type="hidden" name="reference" value="{{ order.reference }}">
                                        <button type="submit" class="login-button">Pagar con SumUp</button>
                                    </form>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p>No tienes compras pendientes.</p>
                    <br>
                    <p>Para comprar, pulsa <strong>Comprar</strong> en la tienda del cliente dentro del juego;
                       la compra aparecerá aquí para completar el pago.</p>
                    {% endif %}

                    <hr>
                    <p><a href="my-account">Volver a mi cuenta</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

	{% include 'partials/social.html' %}
	{% include 'partials/footer.html' %}
	{% include 'partials/final.html' %}
