<div class="main-page">
    <div class="middle-content">
        <div class="body-content">
            <div class="title-content"><h1>Adquirir oro</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>
                </div>
                <div class="body-box-content justified">
                    <p>Selecciona un personaje y la cantidad de oro:</p>
                    {% load django_vite %}
                    <!-- Isla React (Vite): enviar oro (personaje + cantidad -> Stripe). -->
                    <div id="gold-app"
                         data-csrf="{{ csrf_token }}"
                         data-url="{% url 'gold-character' %}"></div>
                    {{ character_names|json_script:"gold-characters-data" }}
                    {{ gold_options|json_script:"gold-options-data" }}
                    {% vite_asset 'src/entries/gold_character.tsx' %}
                </div>
            </div>
        </div>
    </div>
</div>
