{% extends "admin/change_list.html" %}
{% load i18n format_number %}

{% block object-tools-items %}
{{ block.super }}
<li>
    <div class="dropdown" style="display: inline-block; position: relative;">
        <button type="button" class="button" onclick="toggleDropdown()" style="background-color: #dc3545; border-color: #dc3545;">
            🗑️ Supprimer anciens logs ▼
        </button>
        <div id="deleteDropdown" class="dropdown-content" style="display: none; position: absolute; right: 0; background-color: #fff; min-width: 280px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1000; border-radius: 4px; margin-top: 5px;">
            <div style="padding: 10px; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; border-radius: 4px 4px 0 0;">
                <strong>Supprimer les logs plus anciens que :</strong>
                <br><small style="color: #6c757d;">Total: {{ total_logs }} log(s)</small>
            </div>
            {% for period_key, period_name in delete_periods %}
            <a href="{% url 'admin:common_requestlog_delete_old' period_key %}" 
               onclick="return confirm('Êtes-vous sûr de vouloir supprimer {{ log_counts|get_item:period_key }} log(s) de plus de {{ period_name }} ?');"
               style="display: block; padding: 10px 15px; text-decoration: none; color: #333; border-bottom: 1px solid #eee;">
                <span style="display: flex; justify-content: space-between; align-items: center;">
                    <span>Plus de {{ period_name }}</span>
                    <span style="background-color: {% if log_counts|get_item:period_key > 0 %}#dc3545{% else %}#6c757d{% endif %}; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px;">
                        {{ log_counts|get_item:period_key }}
                    </span>
                </span>
            </a>
            {% endfor %}
            <a href="{% url 'admin:common_requestlog_delete_old' 'all' %}"
               onclick="return confirm('⚠️ ATTENTION: Êtes-vous absolument sûr de vouloir supprimer TOUS les {{ total_logs }} logs ? Cette action est irréversible !');"
               style="display: block; padding: 10px 15px; text-decoration: none; color: #dc3545; font-weight: bold; background-color: #fff3cd; border-radius: 0 0 4px 4px;">
                ⚠️ Supprimer TOUS les logs ({{ total_logs }})
            </a>
        </div>
    </div>
</li>
{% endblock %}

{% block extrahead %}
{{ block.super }}
<script>
function toggleDropdown() {
    var dropdown = document.getElementById("deleteDropdown");
    dropdown.style.display = dropdown.style.display === "none" ? "block" : "none";
}

// Fermer le dropdown si on clique ailleurs
window.onclick = function(event) {
    if (!event.target.matches('.button')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.style.display === "block") {
                openDropdown.style.display = "none";
            }
        }
    }
}
</script>
<style>
.dropdown-content a:hover {
    background-color: #f1f1f1 !important;
}
</style>
{% endblock %}