<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">
        <table class="max-center-table" style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr>
                    <th style="text-align: left; padding: 10px; border: 1px solid #ddd;">Fecha de Baneo</th>
                    <th style="text-align: left; padding: 10px; border: 1px solid #ddd;">Fecha de Desbaneo</th>
                    <th style="text-align: left; padding: 10px; border: 1px solid #ddd;">Motivo</th>
                    <th style="text-align: left; padding: 10px; border: 1px solid #ddd;">Estado</th>
                    <th style="text-align: left; padding: 10px; border: 1px solid #ddd;">
                        {% if account_bans and character_bans %}
                            Cuenta / Personaje
                        {% elif account_bans %}
                            Cuenta
                        {% elif character_bans %}
                            Personaje
                        {% else %}
                            Fuente
                        {% endif %}
                    </th>
                </tr>
            </thead>
            <tbody>
                {% if account_bans %}
                    {% for ban in account_bans %}
                        <tr>
                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.0|default:"No disponible" }}</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.1|default:"No disponible" }}</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.2 }}</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">
                                {% if ban.3 == 1 %}
                                   <span class="red-info2">Activo<span>
                                {% else %}
                                   <span class="green-info2">Inactivo</span>
                                {% endif %}
                            </td>
                            <td style="padding: 10px; border: 1px solid #ddd;">Cuenta: {{ ban.4 }}</td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="5" style="text-align: center; padding: 10px; border: 1px solid #ddd;">No hay baneos en la cuenta.</td>
                    </tr>
                {% endif %}

                {% if character_bans %}
                    {% for ban in character_bans %}
                        <tr>
                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.0|default:"No disponible" }}</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.1|default:"No disponible" }}</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.2 }}</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">
                                {% if ban.3 == 1 %}
                                    Activo
                                {% else %}
                                   <span class="green-info2">Inactivo</span>
                                {% endif %}
                            </td>
                            <td style="padding: 10px; border: 1px solid #ddd;">Personaje: {{ ban.4 }}</td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="5" style="text-align: center; padding: 10px; border: 1px solid #ddd;">No hay baneos en los personajes.</td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>