<div class="main-page">
    <div class="middle-content">
        <div class="body-content">
            <div class="title-content"><h1>Recuperar ítems</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>
                </div>
                <div class="body-box-content justified">
                    <p>La herramienta <span>Recuperar ítems</span> te permite recuperar ítems que hayan sido borrados.</p>
                    <p>Sólo disponible para ítems de calidad: <span class="q3">Raro</span> | <span class="q4">Épico</span> | <span class="q5">Legendaria</span> | <span class="q6">Artefacto</span> | <span class="q6">Reliquia</span>.</p>
                    
                    <fieldset>
                        <legend>NOTA</legend>
                        <p>Ítems que no cumplan las condiciones no son recuperables.</p>
                        <p>Se pueden consultar ítems borrados en un mismo personaje cada 8 horas.</p>
                    </fieldset>

                    {% load django_vite %}
                    <!-- Isla React (Vite): recuperar ítems borrados (2 pasos vía AJAX:
                         buscar ítems del personaje -> recuperar el elegido). -->
                    <div id="restore-items-app"
                         data-csrf="{{ csrf_token }}"
                         data-url="{% url 'restore-items' %}"></div>
                    {{ character_names|json_script:"restore-items-data" }}
                    {% vite_asset 'src/entries/restore_items.tsx' %}
                </div>
            </div>
        </div>
    </div>
</div>
