<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">
                    {% load django_vite %}
                    <!-- Isla React (Vite): tabla del historial de transacciones. -->
                    <div id="history-table-app"
                         data-columns='[{"key":"account_id","label":"ID de Cuenta"},{"key":"username","label":"Usuario"},{"key":"character_name","label":"Personaje"},{"key":"acore_ip","label":"IP"},{"key":"email","label":"Email"},{"key":"product_name","label":"Producto"},{"key":"amount","label":"Monto"},{"key":"timestamp","label":"Fecha"},{"key":"mode","label":"Modo"}]'
                         data-empty-text="No hay movimientos"></div>
                    {{ transactions_data|json_script:"history-table-data" }}
                    {% vite_asset 'src/entries/history_table.tsx' %}
                </div>
            </div>

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