<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 actividad</h2></div>
                <div class="body-box-content centered">
                    <table class="max-center-table-aligned2">
                        <tbody>
                            {% if login_attempts %}
                                {% for attempt in login_attempts %}
                                    <tr>
                                        <td>{{ attempt.username }}</td>  <!-- Agregado: Mostrar el nombre de usuario -->
                                        <td>{{ attempt.timestamp|date:"d-m-Y H:i:s" }}</td>
                                        <td>{{ attempt.status }}</td>
                                        <td>{{ attempt.ip_address }}</td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="4" class="centered"><span>No hay actividad</span></td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="box-content">
                <div class="title-box-content"><h2>Historial de conexiones</h2></div>
                <div class="body-box-content centered">
                    <table class="max-center-table-aligned">
                        <thead>
                            <tr>
                                <th>Usuario</th>
                                <th>Estado</th>
                                <th>IP</th>
                                <th>Fecha</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for attempt in login_attempts %}
                                <tr>
                                    <td>{{ attempt.username }}</td>
                                    <td>{{ attempt.status }}</td>
                                    <td>{{ attempt.ip_address }}</td>
                                    <td>{{ attempt.timestamp|date:"d-m-Y H:i:s" }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
