<div class="main-page">
    <div class="middle-content">
        <div class="body-content">
            <div class="title-content">
                <h1>Historial de sanciones</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í podrás ver todas las sanciones que ha tenido la cuenta.</p>
                    <p>Si tienes una sanción vigente, verás que su estado indica <span class="red-info2">Activo</span>.</p>
                    <p>Para evitar que tu cuenta sea sancionada, recuerda respetar las normas de nuestro servidor.</p>
                    <br>
                </div>
            </div>

<!-- Historial de baneos -->
<div class="box-content">
    <div class="title-box-content">
        <h2>Historial de baneos</h2>
    </div>
    <div class="body-box-content info-box-light">
        {% load django_vite %}
        <!-- Isla React (Vite): tabla de baneos (cuenta + personajes). -->
        <div id="history-table-app"
             data-columns='[{"key":"fecha_baneo","label":"Fecha de Baneo"},{"key":"fecha_desbaneo","label":"Fecha de Desbaneo"},{"key":"motivo","label":"Motivo"},{"key":"estado","label":"Estado"},{"key":"origen","label":"Cuenta / Personaje"}]'
             data-empty-text="No hay baneos en la cuenta ni en los personajes."></div>
        {{ ban_rows|json_script:"history-table-data" }}
        {% vite_asset 'src/entries/history_table.tsx' %}
    </div>
</div>