<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>

                    <!-- Selección de personaje -->
                    <form method="GET" action="{% url 'restore-items' %}">
                        <label for="character_name">Selecciona un personaje:</label>
                        <select name="character_name" id="character_name" required>
                            <option value="" disabled selected>Selecciona un personaje</option>
                            {% for character in characters %}
                                <option value="{{ character }}" {% if character == selected_character %}selected{% endif %}>{{ character }}</option>
                            {% endfor %}
                        </select>
                        <button type="submit">Buscar Ítems Eliminados</button>
                    </form>

                    {% if deleted_items %}
                        <form method="POST" action="{% url 'restore-items' %}">
                            {% csrf_token %}
                            <input type="hidden" name="character_name" value="{{ selected_character }}">
                            <label for="recover_id">Selecciona un ítem para restaurar:</label>
                            <select name="recover_id" id="recover_id" required>
                                {% for item in deleted_items %}
                                    <option value="{{ item.recover_id }}">
                                        Item: {{ item.item_name }} ({{ item.item_id }}):{{ item.count }}
                                    </option>
                                {% endfor %}
                            </select>
                            <button type="submit">Recuperar Ítem</button>
                        </form>
                    {% elif selected_character %}
                        <p>No hay ítems eliminados disponibles para restaurar.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
