<div class="main-page">
            <div class="middle-content">
                <div class="body-content">
                <div class="title-content"><h1>Renombrar personaje</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>La herramienta <span>Renombrar personaje</span> te permite Renombrar un personaje el nombre se cambiara en el proximo inicio de session.</p>
                            <p>Usa esta opción cuando quieras cambiar el nombre del personaje.</p>
                            <br>
                            <fieldset>
                            <legend>NOTA</legend>
                                <div class="separate2">
                                    <p>Se requiere que el personaje esté desconectado.</p>
                                    <p>Se puede repetir la acción en un mismo las veces que quieras.</p>
                                </div>
                            </fieldset>
                            {% load django_vite %}
                            <!-- Isla React (Vite): servicio de pago de personaje (genérico).
                                 POST -> session_id de Stripe -> Checkout. -->
                            <div id="character-purchase-app"
                                 data-csrf="{{ csrf_token }}"
                                 data-url="{% url 'rename-character' %}"
                                 data-price="{{ price }}"
                                 data-label="Renombrar"
                                 data-button-class="rename-button"></div>
                            {{ characters|json_script:"character-purchase-data" }}
                            {% vite_asset 'src/entries/character_purchase.tsx' %}
                        </div>
                    </div>
                </div>
            </div>
        </div>