{% load django_vite %}
<div class="main-page">
            <div class="middle-content">
                <div class="body-content">
                <div class="title-content"><h1>Mi cuenta</h1></div>
                    <div class="box-content">
                        <div class="title-box-content"><h2>Información</h2></div>
                        <div class="body-box-content">
						<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/my_account_response.js"></script>
                            <div id="account-dashboard-app"></div>
                            {% vite_asset 'src/entries/my_account.tsx' %}
                        </div>
                    </div>

<style>
.title-box-content {
    margin-bottom: 20px; /* Separación entre el título y la cuadrícula */
    text-align: center;  /* Alineación centrada del título */
}
</style>

					
                    <div class="box-content">
                        <div class="title-box-content"><h2>Utilidades y Herramientas</h2></div>
                        <div class="body-box-content-account">
                            <div id="account-settings">OPCIONES DE CUENTA <i class="fas fa-arrow-down fa-arrow-down-account rotate2"></i></div>
                            <div id="account-settings-panel" style="display: none;">
                                <table class="max-center-table fixed-layout-table">
                                    <tbody><tr>
                                        <td>
                                            <a href="change-password">
                                                <div class="tool-button">
                                                    <div class="acc-icon password-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Cambiar contraseña</span>
                                                        <br>
                                                        <span class="second-brown shadow">Gestiona una nueva contraseña</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="change-email">
                                                <div class="tool-button">
                                                    <div class="acc-icon email-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Cambiar correo</span>
                                                        <br>
                                                        <span class="second-brown shadow">Gestiona un correo activo</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="promo-code">
                                                <div class="tool-button">
                                                    <div class="acc-icon promo-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Código de promoción</span>
                                                        <br>
                                                        <span class="second-brown shadow">Canjea códigos por PD o PV</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="security-token">
                                                <div class="tool-button">
                                                    <div class="acc-icon token-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Token de seguridad</span>
                                                        <br>
                                                        <span class="second-brown shadow">Seguridad extra para tu cuenta</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="recruit-a-friend">
                                                <div class="tool-button">
                                                    <div class="acc-icon recruit-a-friend-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Recluta a un amigo</span>
                                                        <br>
                                                        <span class="second-brown shadow">Trae amigos y recibe grandes premios</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="rename-guild">
                                                <div class="tool-button">
                                                    <div class="acc-icon rename-guild-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Renombrar hermandad</span>
                                                        <br>
                                                        <span class="second-brown shadow">Cambia el nombre de tu hermandad</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="vote-points">
                                                <div class="tool-button">
                                                    <div class="acc-icon vote-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Votar por nosotros</span>
                                                        <br>
                                                        <span class="second-brown shadow">Suma tu voto en páginas top</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="d-points">
                                                <div class="tool-button">
                                                    <div class="acc-icon dnt-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Adquirir PD</span>
                                                        <br>
                                                        <span class="second-brown shadow">Obtiene PD y accede a recompensas</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody></table>
                                <br>
                            </div>
							{% for character in characters %}
							<div id="character-settings">OPCIONES DE PERSONAJE <i class="fas fa-arrow-down fa-arrow-down-character rotate2"></i>
							
							
							</div>
							<div id="character-settings-panel" style="display: none;">
                                <table class="max-center-table fixed-layout-table">
                                    <tbody><tr>
                                        <td>
                                            <a href="unstuck-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon unstuck-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Desbloquear personaje</span>
                                                        <br>
                                                        <span class="second-brown shadow">Para personajes atascados</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="revive-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon revive-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Revivir personaje</span>
                                                        <br>
                                                        <span class="second-brown shadow">¿Nadie más te quiere revivir?</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="rename-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon rename-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Renombrar personaje</span>
                                                        <br>
                                                        <span class="second-brown shadow">Adquiere un nombre diferente</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="customize-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon customize-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Personalizar personaje</span>
                                                        <br>
                                                        <span class="second-brown shadow">Un cambio de look para renovarse</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="change-race-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon change-race-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Cambiar de raza</span>
                                                        <br>
                                                        <span class="second-brown shadow">Elije una nueva raza acorde a tu clase</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="change-faction-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon change-faction-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Cambiar de facción</span>
                                                        <br>
                                                        <span class="second-brown shadow">Vive nuevas aventuras en la facción opuesta</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="level-up-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon level-up-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Subir a nivel 80</span>
                                                        <br>
                                                        <span class="second-brown shadow">Para los que no quieren levear</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="gold-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon gold-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Adquirir oro</span>
                                                        <br>
                                                        <span class="second-brown shadow">Consigue más oro para tu personaje</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="quest-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon quest-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Rastreador de misiones</span>
                                                        <br>
                                                        <span class="second-brown shadow">Ayuda con cadenas de misiones importantes</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="transfer-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon tranfer-char-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Transferir personaje</span>
                                                        <br>
                                                        <span class="second-brown shadow">Mueve tus personajes a otra cuenta</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="restore-character">
                                                <div class="tool-button">
                                                    <div class="acc-icon restore-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Recuperar personaje</span>
                                                        <br>
                                                        <span class="second-brown shadow">Restaura un personaje borrado</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                         <td>
                                            <a href="restore-items">
                                                <div class="tool-button">
                                                    <div class="acc-icon prox-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Recuperar ítems</span>
                                                        <br>
                                                        <span class="second-brown shadow">Restaura objetos borrados</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="battlepay">
                                                <div class="tool-button">
                                                    <div class="acc-icon store-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Tienda del cliente</span>
                                                        <br>
                                                        <span class="second-brown shadow">Paga tus compras Battlepay pendientes</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="store-novawow">
                                                <div class="tool-button">
                                                    <div class="acc-icon store-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Tienda</span>
                                                        <br>
                                                        <span class="second-brown shadow">Adquiere objetos de todo tipo</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="send-gift">
                                                <div class="tool-button">
                                                    <div class="acc-icon promo-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Enviar regalo</span>
                                                        <br>
                                                        <span class="second-brown shadow">Envía regalos a tus amigos</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody></table>
                                <br>
								{% endfor %}
                            </div>
							
						
                            <div id="account-history">HISTORIALES <i class="fas fa-arrow-down fa-arrow-down-history rotate2"></i></div>
                            <div id="account-history-panel">
                                <table class="max-center-table fixed-layout-table">
                                    <tbody><tr>
                                        <td>
                                            <a href="points-history">
                                                <div class="tool-button">
                                                    <div class="acc-icon pointsh-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Historial de PD y PV</span>
                                                        <br>
                                                        <span class="second-brown shadow">Revisa en qué has usado tus PD y PV</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                         <td>
                                            <a href="trans-history">
                                                <div class="tool-button">
                                                    <div class="acc-icon dnth-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Historial de transacciones</span>
                                                        <br>
                                                        <span class="second-brown shadow">Revisa los trámites que has realizado</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="ban-history">
                                                <div class="tool-button">
                                                    <div class="acc-icon banh-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Historial de sanciones</span>
                                                        <br>
                                                        <span class="second-brown shadow">Revisa las sanciones de tu cuenta</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                         <td>
                                            <a href="security-history">
                                                <div class="tool-button">
                                                    <div class="acc-icon securityh-icon"></div>
                                                    <div class="tool-button-div">
                                                        <span class="first-brown shadow">Historial de seguridad</span>
                                                        <br>
                                                        <span class="second-brown shadow">Revisa la seguridad de tu cuenta</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody></table>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>