<div class="main-page">
    <div class="middle-content">
        <div class="body-content">
            <div class="title-content"><h1>Historial de transacciones</h1></div>
            <div class="box-content">
                <div class="title-box-content">
                    <h2>Información</h2>
                    <a class="back-to-account" href="my-account">Regresar a mi cuenta</a>
                    <a class="back-to-account-responsive" href="my-account">Regresar</a>
                </div>
                <div class="body-box-content">
                    <br>
                    <p>Aquí verás la información de las transacciones realizadas.</p>
                    <br>
                    <p>¿Has tenido algún problema con alguna transacción?</p>
                    <p>Si has tenido un problema con alguna de las transacciones o no has recibido tus productos, puedes contactarnos en nuestro Discord o a través del correo <a href="mailto:contacto@novawow.com">contacto@novawow.com</a>.</p>
                </div>
            </div>

            <div class="box-content">
                <div class="title-box-content">
                    <h2>Historial de transacciones</h2>
                </div>
                <div class="body-box-content">
                    <table class="max-center-table-aligned">
                        <thead>
                            <tr>
								<th>ID de Cuenta</th>
                                <th>Usuario</th>  <!-- Columna para el nombre de la cuenta -->
								<th>Personaje</th>
								<th>IP</th>
								<th>Email</th>
                                <th>Producto</th>
                                <th>Monto</th>
                                <th>Fecha</th>
                                <th>Modo</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if transactions %}
                                {% for transaction in transactions %}
                                    <tr>
										<td>{{ transaction.account_id }}</td>  <!-- ID de la cuenta -->
                                        <td>{{ transaction.username }}</td>  <!-- Nombre de la cuenta -->
										<td>{{ transaction.character_name }}</td>
										<td>{{ transaction.acore_ip }}</td>  <!-- IP de acore_auth -->
										<td>{{ transaction.email }}</td>  <!-- Email -->
                                        <td>{{ transaction.product_name }}</td>
                                        <td>{{ transaction.amount }} €</td>
                                        <td>{{ transaction.timestamp|date:"d-m-Y H:i:s" }}</td>
                                        <td>{{ transaction.mode }}</td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="9"><span>No hay movimientos</span></td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>

            <br>
            <hr>
            <br>
        </div>
    </div>
</div>
