<div class="main-page">
    <div class="middle-content">
        <div class="body-content">
            <div class="title-content">
                <h1>Revivir personaje</h1>
            </div>
            <div class="box-content">
                <div class="title-box-content">
                    <h2>Información</h2>
                    <a class="back-to-account" href="{% url 'my-account' %}">Regresar a mi cuenta</a>
                    <a class="back-to-account-responsive" href="{% url 'my-account' %}">Regresar</a>
                </div>
                <div class="body-box-content justified">
                    <br>
                    {% if characters %}
                        <p>Escoge el personaje que quieres revivir:</p>
                        <br>
                        {% load django_vite %}
                        <!-- Isla React (Vite): acción de personaje (SOAP, sin pago). -->
                        <div id="character-purchase-app"
                             data-csrf="{{ csrf_token }}"
                             data-url="{% url 'revive-character' %}"
                             data-label="Revivir"
                             data-button-class="revive-button"></div>
                        {{ characters|json_script:"character-purchase-data" }}
                        {% vite_asset 'src/entries/character_purchase.tsx' %}
                    {% else %}
                        <p>No tienes personajes para revivir.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
