<div class="main-page">
    <div class="middle-content">
        <div class="body-content">
            <div class="title-content"><h1>Historial de seguridad</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 justified">
                    <br>
                    <p>Aquí verás la actividad de la cuenta y los últimos 20 intentos de conexión de tu cuenta a la página web.</p>
                    <p>Si observas alguna actividad sospechosa puedes cambiar la contraseña o contactar con el equipo de {{ NOMBRE_SERVIDOR }}.</p>
                </div>
            </div>

            <div class="box-content">
                <div class="title-box-content"><h2>Historial de conexiones</h2></div>
                <div class="body-box-content centered">
                    {% load django_vite %}
                    <!-- Isla React (Vite): tabla de intentos de conexión (últimos 20). -->
                    <div id="history-table-app"
                         data-columns='[{"key":"username","label":"Usuario"},{"key":"status","label":"Estado"},{"key":"ip_address","label":"IP"},{"key":"timestamp","label":"Fecha"}]'
                         data-empty-text="No hay actividad"></div>
                    {{ login_attempts_data|json_script:"history-table-data" }}
                    {% vite_asset 'src/entries/history_table.tsx' %}
                </div>
            </div>
        </div>
    </div>
</div>
