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

{% block extrahead %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<style>
    .drag-drop-badge {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: 10px;
        box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
        vertical-align: middle;
    }
    .drag-drop-badge .icon {
        font-size: 14px;
    }
    .visual-reorder-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white !important;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .visual-reorder-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
    }
</style>
{% endblock %}

{% block content_title %}
{{ block.super }}
<span class="drag-drop-badge">
    <span class="icon">&#9776;</span>
    Glisser pour reordonner
</span>
{% endblock %}

{% block object-tools-items %}
<li>
    <a href="visual-reorder/" class="visual-reorder-btn">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="7" height="7"></rect>
            <rect x="14" y="3" width="7" height="7"></rect>
            <rect x="14" y="14" width="7" height="7"></rect>
            <rect x="3" y="14" width="7" height="7"></rect>
        </svg>
        Reordonnement visuel
    </a>
</li>
{{ block.super }}
{% if show_resequence_button %}
<li>
    <a href="{{ resequence_url }}" class="btn btn-outline-primary">
        &#8645; Reinitialiser l'ordre
    </a>
</li>
{% endif %}
{% endblock %}

{% block result_list %}
{% if order_stats and order_stats.has_issues %}
<div style="background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; padding: 12px 15px; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between;">
    <div>
        <strong style="color: #856404;">&#9888; Problemes d'ordre detectes:</strong>
        <span style="color: #856404; margin-left: 10px;">
            {% if order_stats.duplicates %}
                {{ order_stats.duplicates }} doublon(s)
            {% endif %}
            {% if order_stats.duplicates and order_stats.gaps %} | {% endif %}
            {% if order_stats.gaps %}
                {{ order_stats.gaps }} saut(s)
            {% endif %}
        </span>
    </div>
    <a href="{{ resequence_url }}" class="btn btn-warning" style="color: #212529; text-decoration: none;">
        Corriger maintenant
    </a>
</div>
{% endif %}
{{ block.super }}
<script src="{% static 'admin/core/js/carousel_sortable.js' %}"></script>
{% endblock %}