{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block head %}
    <!-- Mapbox GL Draw 1.5.0 (local) -->
    <link href="{% static 'common/mapbox-gl-draw.css' %}" rel="stylesheet"/>
    <!-- jQuery UI 1.14.1 (local) -->
    <link rel="stylesheet" href="{% static 'common/jquery-ui.min.css' %}">
    <!-- Interventions Index CSS -->
    <link rel="stylesheet" href="{% static 'interventions/interventions_index.css' %}?v=20261012">
{% endblock head %}

{% block content %}

    <!-- ─── Modale Choix du type d'intervention ────────────────────── -->
    <div class="modal fade" id="interventionTypeModal" tabindex="-1" aria-labelledby="interventionTypeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content shadow-lg border-0 rounded-4">
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title fw-bold" id="interventionTypeModalLabel">{% translate "Choisir le type d’intervention" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body d-flex flex-column gap-2 pt-3">
                    <a href="{% url 'interventions:intervention_add_choose_thematic' %}?type=corrective" class="btn btn-outline-danger w-100 text-start p-3 rounded-3">
                        <div class="fw-bold"><i class="bi bi-gear me-1"></i> {% translate "Intervention corrective" %}</div>
                        <small class="text-muted d-block mt-1">{% translate "Réparer ou corriger un dysfonctionnement (avarie, panne, défaut, ...)" %}</small>
                    </a>

                    {% if can_create_preventive %}
                    <a href="{% url 'interventions:intervention_add_choose_thematic' %}?type=preventive" class="btn btn-outline-warning w-100 text-start p-3 rounded-3">
                        <div class="fw-bold"><i class="bi bi-gear me-1"></i> {% translate "Interventions préventives" %}</div>
                        <small class="text-muted d-block mt-1">{% translate "Anticiper un problème potentiel (entretien cyclique, ...)" %}</small>
                    </a>
                    {% endif %}

                    {% if can_create_ameliorative %}
                    <a href="{% url 'interventions:intervention_add_choose_thematic' %}?type=ameliorative" class="btn btn-outline-success w-100 text-start p-3 rounded-3">
                        <div class="fw-bold"><i class="bi bi-gear me-1"></i> {% translate "Intervention améliorative" %}</div>
                        <small class="text-muted d-block mt-1">{% translate "Optimiser ou améliorer une situation existante (projet, fonctionnel, ...)" %}</small>
                    </a>
                    {% endif %}
                </div>
                <div class="modal-footer border-top-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ─── Modale Filtre des interventions (3 Onglets) ─────────────── -->
    <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="w-100">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <div>
                                <h5 class="modal-title" id="filterModalLabel">{% translate "Filtrer les interventions" %}</h5>
                                <div class="text-muted small" style="font-size: 0.8rem;">{% translate "Affinez les interventions affichées sur la carte et dans le tableau" %}</div>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                        </div>
                        
                        <!-- Onglets du filtre -->
                        <ul class="nav nav-tabs filter-modal-tabs" id="filterModalTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="tab-classification-btn" data-bs-toggle="tab" data-bs-target="#tab-classification" type="button" role="tab" aria-controls="tab-classification" aria-selected="true">
                                    <i class="bi bi-funnel"></i>
                                    <span>{% translate "Classification & Statut" %}</span>
                                    <span class="badge rounded-pill d-none" id="tab-badge-classification">0</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="tab-actors-btn" data-bs-toggle="tab" data-bs-target="#tab-actors" type="button" role="tab" aria-controls="tab-actors" aria-selected="false">
                                    <i class="bi bi-people"></i>
                                    <span>{% translate "Acteurs & Marchés" %}</span>
                                    <span class="badge rounded-pill d-none" id="tab-badge-actors">0</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="tab-dates-btn" data-bs-toggle="tab" data-bs-target="#tab-dates" type="button" role="tab" aria-controls="tab-dates" aria-selected="false">
                                    <i class="bi bi-calendar3"></i>
                                    <span>{% translate "Dates & Lieux" %}</span>
                                    <span class="badge rounded-pill d-none" id="tab-badge-dates">0</span>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="modal-body">
                    <!-- Formulaire de filtre -->
                    <form method="get" id="filter-form" class="mb-0">
                        <div class="tab-content" id="filterModalTabsContent">

                            <!-- ─── Onglet 1 : Classification & Statut ──────────────── -->
                            <div class="tab-pane fade show active" id="tab-classification" role="tabpanel" aria-labelledby="tab-classification-btn">
                                
                                <!-- Thématique -->
                                <div class="filter-section">
                                    <div class="filter-section-header">
                                        <label>{% translate "Thématique" %}</label>
                                        <div class="filter-section-buttons">
                                            <button type="button" class="btn select-all-btn" data-field="thematic">{% translate "Tous" %}</button>
                                            <button type="button" class="btn deselect-all-btn" data-field="thematic">{% translate "Aucun" %}</button>
                                        </div>
                                    </div>
                                    <div class="thematic-grid" data-field="thematic">
                                        {% for key, value, icon in thematic_choices %}
                                        <div class="thematic-tile">
                                            <input type="checkbox" name="thematic" id="thematic_{{ key }}" value="{{ key }}" {% if key in selected_thematics %}checked{% endif %}>
                                            <label for="thematic_{{ key }}">
                                                {% if icon %}<i class="bi {{ icon }} thematic-icon"></i>{% endif %}
                                                <span class="thematic-label">{{ value }}</span>
                                            </label>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- Statut -->
                                <div class="filter-section">
                                    <div class="filter-section-header">
                                        <label>{% translate "Statut" %}</label>
                                        <div class="filter-section-buttons">
                                            <button type="button" class="btn select-all-btn" data-field="status">{% translate "Tous" %}</button>
                                            <button type="button" class="btn deselect-all-btn" data-field="status">{% translate "Aucun" %}</button>
                                        </div>
                                    </div>
                                    <div class="filter-options" data-field="status">
                                        {% for key, value, css_class in status_choices %}
                                        <div class="filter-option">
                                            <input type="checkbox" name="status" id="status_{{ key }}" value="{{ key }}" {% if key in selected_statuses %}checked{% endif %}>
                                            <label for="status_{{ key }}" class="context-badge status-{{ key }} btn-outline-{{ css_class }}">{{ value }}</label>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- Raisons de mise en pause (conditionnel) -->
                                <div class="filter-section {% if not pause_reason_filter_enabled %}d-none{% endif %}" id="pause-reason-filter">
                                    <div class="filter-section-header">
                                        <label>{% translate "Raisons de la mise en pause" %}</label>
                                        <div class="filter-section-buttons">
                                            <button type="button" class="btn select-all-btn" data-field="pause_reason" {% if not pause_reason_filter_enabled %}disabled{% endif %}>{% translate "Tous" %}</button>
                                            <button type="button" class="btn deselect-all-btn" data-field="pause_reason" {% if not pause_reason_filter_enabled %}disabled{% endif %}>{% translate "Aucun" %}</button>
                                        </div>
                                    </div>
                                    <div class="filter-options" data-field="pause_reason">
                                        {% for key, value in pause_reason_choices %}
                                        <div class="filter-option">
                                            <input type="checkbox" name="pause_reason" id="pause_reason_{{ key }}" value="{{ key }}" {% if key in selected_pause_reasons %}checked{% endif %} {% if not pause_reason_filter_enabled %}disabled{% endif %}>
                                            <label for="pause_reason_{{ key }}">{{ value }}</label>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- Catégories d'intervention -->
                                <div class="filter-section">
                                    <div class="filter-section-header">
                                        <label>{% translate "Catégorie" %}</label>
                                        <div class="filter-section-buttons">
                                            <button type="button" class="btn select-all-btn" data-field="category">{% translate "Tous" %}</button>
                                            <button type="button" class="btn deselect-all-btn" data-field="category">{% translate "Aucun" %}</button>
                                        </div>
                                    </div>
                                    <div class="filter-options" data-field="category">
                                        {% for cat_id, cat_name, cat_thematic, cat_parent_id in category_choices %}
                                        {% if cat_parent_id %}{% ifchanged cat_parent_id %}<div class="filter-option-break"></div>{% endifchanged %}{% endif %}
                                        <div class="filter-option{% if cat_parent_id %} subcategory-option{% endif %}" data-thematic="{{ cat_thematic|default:'' }}" data-category-id="{{ cat_id }}" data-parent-id="{{ cat_parent_id|default:'' }}">
                                            <input type="checkbox" name="category" id="category_{{ cat_id }}" value="{{ cat_id }}" {% if cat_id|stringformat:"s" in selected_categories %}checked{% endif %}>
                                            <label for="category_{{ cat_id }}">{% if cat_parent_id %}<i class="bi bi-arrow-return-right me-1 text-muted small"></i>{% endif %}{{ cat_name }}</label>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- Types & Priorité -->
                                <div class="row g-3">
                                    <!-- Type de maintenance -->
                                    <div class="col-md-6">
                                        <div class="filter-section h-100 mb-0">
                                            <div class="filter-section-header">
                                                <label>{% translate "Type de maintenance" %}</label>
                                                <div class="filter-section-buttons">
                                                    <button type="button" class="btn select-all-btn" data-field="maintain_type">{% translate "Tous" %}</button>
                                                    <button type="button" class="btn deselect-all-btn" data-field="maintain_type">{% translate "Aucun" %}</button>
                                                </div>
                                            </div>
                                            <div class="filter-options" data-field="maintain_type">
                                                {% for key, value, css_class in maintain_type_choices %}
                                                <div class="filter-option">
                                                    <input type="checkbox" name="maintain_type" id="maintain_type_{{ key }}" value="{{ key }}" {% if key in selected_maintain_types %}checked{% endif %}>
                                                    <label for="maintain_type_{{ key }}" class="context-badge btn-outline-{{ css_class }}">{{ value }}</label>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Type d'intervention -->
                                    <div class="col-md-6">
                                        <div class="filter-section h-100 mb-0">
                                            <div class="filter-section-header">
                                                <label>{% translate "Type d'intervention" %}</label>
                                                <div class="filter-section-buttons">
                                                    <button type="button" class="btn select-all-btn" data-field="type">{% translate "Tous" %}</button>
                                                    <button type="button" class="btn deselect-all-btn" data-field="type">{% translate "Aucun" %}</button>
                                                </div>
                                            </div>
                                            <div class="filter-options" data-field="type">
                                                {% for key, value in type_choices %}
                                                <div class="filter-option">
                                                    <input type="checkbox" name="type" id="type_{{ key }}" value="{{ key }}" {% if key in selected_types %}checked{% endif %}>
                                                    <label for="type_{{ key }}">{{ value }}</label>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Priorité -->
                                    <div class="col-12">
                                        <div class="filter-section mb-0">
                                            <div class="filter-section-header">
                                                <label>{% translate "Priorité" %}</label>
                                                <div class="filter-section-buttons">
                                                    <button type="button" class="btn select-all-btn" data-field="priority">{% translate "Tous" %}</button>
                                                    <button type="button" class="btn deselect-all-btn" data-field="priority">{% translate "Aucun" %}</button>
                                                </div>
                                            </div>
                                            <div class="filter-options" data-field="priority">
                                                {% for key, value in priority_choices %}
                                                <div class="filter-option">
                                                    <input type="checkbox" name="priority" id="priority_{{ key }}" value="{{ key }}" {% if key in selected_priorities %}checked{% endif %}>
                                                    <label for="priority_{{ key }}" class="context-badge btn-outline-priority-{{ key }}">{{ value }}</label>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Drapeaux d'état rapides -->
                                <div class="filter-section mt-3 mb-0">
                                    <div class="row g-3 align-items-center">
                                        <div class="col-md-4">
                                            <div class="form-check mb-0">
                                                <input class="form-check-input" type="checkbox" name="overdue" id="overdue" value="1" {% if overdue == '1' %}checked{% endif %}>
                                                <label class="form-check-label small fw-medium" for="overdue">
                                                    <i class="bi bi-clock-history text-danger me-1"></i>{% translate "Non traitées (en retard)" %}
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check mb-0">
                                                <input class="form-check-input" type="checkbox" name="followed_only" id="followed_only" value="1" {% if followed_only == '1' %}checked{% endif %}>
                                                <label class="form-check-label small fw-medium" for="followed_only">
                                                    <i class="bi bi-star-fill text-warning me-1"></i>{% translate "Suivies uniquement" %}
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="d-flex align-items-center gap-2">
                                                <label class="form-label small fw-semibold mb-0 text-nowrap" for="is_blocked_due_to_contract">
                                                    <i class="bi bi-slash-circle text-danger me-1"></i>{% translate "Marché bloqué" %} :
                                                </label>
                                                <select name="is_blocked_due_to_contract" id="is_blocked_due_to_contract" class="form-select form-select-sm">
                                                    <option value="" {% if not selected_is_blocked %}selected{% endif %}>{% translate "Tous" %}</option>
                                                    <option value="1" {% if selected_is_blocked == '1' or selected_is_blocked == 'true' %}selected{% endif %}>{% translate "Oui (Bloquées)" %}</option>
                                                    <option value="0" {% if selected_is_blocked == '0' or selected_is_blocked == 'false' %}selected{% endif %}>{% translate "Non (Actives)" %}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <!-- ─── Onglet 2 : Acteurs & Marchés ────────────────────── -->
                            <div class="tab-pane fade" id="tab-actors" role="tabpanel" aria-labelledby="tab-actors-btn">
                                
                                {% if show_provider_filters %}
                                <!-- Prestataires & Contrats -->
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <div class="filter-section h-100 mb-0">
                                            <div class="filter-section-header">
                                                <label>{% translate "Prestataire" %}</label>
                                                <div class="filter-section-buttons">
                                                    <button type="button" class="btn select-all-btn" data-field="provider">{% translate "Tous" %}</button>
                                                    <button type="button" class="btn deselect-all-btn" data-field="provider">{% translate "Aucun" %}</button>
                                                </div>
                                            </div>
                                            <div class="filter-options" data-field="provider">
                                                {% for pid, pname, pt_thematics in provider_choices %}
                                                <div class="filter-option" data-thematic-codes="{{ pt_thematics|join:',' }}">
                                                    <input type="checkbox" name="provider" id="provider_{{ pid }}" value="{{ pid }}" {% if pid|stringformat:"s" in selected_providers %}checked{% endif %}>
                                                    <label for="provider_{{ pid }}">{{ pname }}</label>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="filter-section h-100 mb-0">
                                            <div class="filter-section-header">
                                                <label>{% translate "Contrat" %}</label>
                                                <div class="filter-section-buttons">
                                                    <button type="button" class="btn select-all-btn" data-field="contract">{% translate "Tous" %}</button>
                                                    <button type="button" class="btn deselect-all-btn" data-field="contract">{% translate "Aucun" %}</button>
                                                </div>
                                            </div>
                                            <div class="filter-options" data-field="contract">
                                                {% for cid, cnumber, cprovider, cthematics, cuses_mgr, cmanagers_json in contract_choices %}
                                                <div class="filter-option" data-provider="{{ cprovider }}" data-thematic-codes="{{ cthematics|join:',' }}" data-uses-manager="{{ cuses_mgr|yesno:"true,false" }}" data-managers="{{ cmanagers_json }}">
                                                    <input type="checkbox" name="contract" id="contract_{{ cid }}" value="{{ cid }}" {% if cid|stringformat:"s" in selected_contracts %}checked{% endif %}>
                                                    <label for="contract_{{ cid }}">{{ cnumber }}</label>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}

                                <!-- Équipes & Membres assignés -->
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <div class="filter-section h-100 mb-0">
                                            <div class="filter-section-header">
                                                <label>{% translate "Équipe assignée" %}</label>
                                                <div class="filter-section-buttons">
                                                    <button type="button" class="btn select-all-btn" data-field="assigned_team">{% translate "Tous" %}</button>
                                                    <button type="button" class="btn deselect-all-btn" data-field="assigned_team">{% translate "Aucun" %}</button>
                                                </div>
                                            </div>
                                            <div class="filter-options" data-field="assigned_team">
                                                {% for tid, tlabel, tcompany, tthematics in team_choices %}
                                                <div class="filter-option" data-company="{{ tcompany }}" data-thematic-codes="{{ tthematics|join:',' }}">
                                                    <input type="checkbox" name="assigned_team" id="assigned_team_{{ tid }}" value="{{ tid }}" {% if tid|stringformat:"s" in selected_teams %}checked{% endif %}>
                                                    <label for="assigned_team_{{ tid }}">{{ tlabel }}</label>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="filter-section h-100 mb-0">
                                            <div class="filter-section-header">
                                                <label>{% translate "Membre assigné" %}</label>
                                                <div class="filter-section-buttons">
                                                    <button type="button" class="btn select-all-btn" data-field="assigned_member">{% translate "Tous" %}</button>
                                                    <button type="button" class="btn deselect-all-btn" data-field="assigned_member">{% translate "Aucun" %}</button>
                                                </div>
                                            </div>
                                            <div class="filter-options" data-field="assigned_member">
                                                {% for mid, mlabel, mteam, mcompany, mthematics in member_choices %}
                                                <div class="filter-option" data-team="{{ mteam }}" data-company="{{ mcompany }}" data-thematic-codes="{{ mthematics|join:',' }}">
                                                    <input type="checkbox" name="assigned_member" id="assigned_member_{{ mid }}" value="{{ mid }}" {% if mid|stringformat:"s" in selected_members %}checked{% endif %}>
                                                    <label for="assigned_member_{{ mid }}">{{ mlabel }}</label>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Rôle et Personne assignée -->
                                <div class="filter-section mb-3">
                                    <div class="filter-section-header">
                                        <label class="d-flex align-items-center">
                                            <i class="bi bi-person-badge me-2 text-primary"></i>{% translate "Rôle et personne assignée" %}
                                        </label>
                                        <div class="filter-section-buttons">
                                            <button type="button" class="btn select-all-btn" id="clear-role-person-filter">
                                                <i class="bi bi-x-circle me-1"></i>{% translate "Effacer" %}
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row g-2 align-items-center mt-1">
                                        <div class="col-md-4">
                                            <label for="filter-person-role" class="form-label small text-muted mb-1">{% translate "Rôle" %}</label>
                                            <select class="form-select form-select-sm" id="filter-person-role">
                                                <option value="">{% translate "-- Sélectionner un rôle… --" %}</option>
                                                <option value="manager" {% if selected_role == "manager" %}selected{% endif %}>{% translate "Gestionnaire" %}</option>
                                                <option value="controller" {% if selected_role == "controller" %}selected{% endif %}>{% translate "Contrôleur" %}</option>
                                                <option value="inspector" {% if selected_role == "inspector" %}selected{% endif %}>{% translate "Inspecteur" %}</option>
                                            </select>
                                        </div>
                                        <div class="col-md-8">
                                            <label for="filter-person-select" class="form-label small text-muted mb-1">{% translate "Personne" %}</label>
                                            <select class="form-select form-select-sm" id="filter-person-select" {% if not selected_role %}disabled{% endif %}>
                                                <option value="">{% translate "-- Choisir une personne… --" %}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <input type="hidden" name="intervention_manager" id="hidden-filter-intervention-manager" value="{% if selected_role == 'manager' %}{{ selected_person_id }}{% endif %}">
                                    <input type="hidden" name="assigned_controller" id="hidden-filter-assigned-controller" value="{% if selected_role == 'controller' %}{{ selected_person_id }}{% endif %}">
                                    <input type="hidden" name="inspector" id="hidden-filter-inspector" value="{% if selected_role == 'inspector' %}{{ selected_person_id }}{% endif %}">
                                </div>

                                <!-- Bon de préparation (stock) -->
                                <div class="filter-section mb-0">
                                    <div class="filter-section-header">
                                        <label>{% translate "Bon de préparation (stock)" %}</label>
                                        <div class="filter-section-buttons">
                                            <button type="button" class="btn select-all-btn" data-field="preparation_state">{% translate "Tous" %}</button>
                                            <button type="button" class="btn deselect-all-btn" data-field="preparation_state">{% translate "Aucun" %}</button>
                                        </div>
                                    </div>
                                    <div class="filter-options" data-field="preparation_state">
                                        <div class="filter-option">
                                            <input type="checkbox" name="preparation_state" id="preparation_state_processed" value="processed" {% if "processed" in selected_preparation_states %}checked{% endif %}>
                                            <label for="preparation_state_processed" class="context-badge btn-outline-success">
                                                <i class="bi bi-check-circle me-1"></i>{% translate "Prêt" %}
                                            </label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="checkbox" name="preparation_state" id="preparation_state_not_processed" value="not_processed" {% if "not_processed" in selected_preparation_states %}checked{% endif %}>
                                            <label for="preparation_state_not_processed" class="context-badge btn-outline-danger">
                                                <i class="bi bi-hourglass me-1"></i>{% translate "En attente" %}
                                            </label>
                                        </div>
                                        <div class="filter-option">
                                            <input type="checkbox" name="preparation_state" id="preparation_state_none" value="none" {% if "none" in selected_preparation_states %}checked{% endif %}>
                                            <label for="preparation_state_none" class="context-badge btn-outline-secondary">
                                                <i class="bi bi-question-circle me-1"></i>{% translate "Aucun bon" %}
                                            </label>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <!-- ─── Onglet 3 : Dates & Lieux ────────────────────────── -->
                            <div class="tab-pane fade" id="tab-dates" role="tabpanel" aria-labelledby="tab-dates-btn">
                                
                                <!-- Localisations -->
                                <div class="filter-section mb-3">
                                    <div class="filter-section-header">
                                        <label class="d-flex align-items-center">
                                            <i class="bi bi-geo-alt-fill me-2 text-danger"></i>{% translate "Localisations" %}
                                            <span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 small ms-2 d-none" id="selected-locations-badge"></span>
                                        </label>
                                        <div class="filter-section-buttons">
                                            <button id="clear-locations" type="button" class="btn select-all-btn d-none">
                                                <i class="bi bi-x-circle me-1"></i>{% translate "Effacer localisations" %}
                                            </button>
                                        </div>
                                    </div>
                                    <div id="location-autocomplete-container" class="position-relative mb-2">
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text bg-light text-muted"><i class="bi bi-search"></i></span>
                                            <input id="location-autocomplete" type="text" class="form-control"
                                                    placeholder="{% translate 'Chercher une rue, un carrefour, un équipement (min. 2 caractères)…' %}">
                                        </div>
                                    </div>
                                    <div id="selected-locations-chips" class="mt-2" style="max-height: 140px; overflow-y: auto;"></div>
                                </div>

                                <!-- Filtres par Date & Timeline -->
                                <div class="row g-3">
                                    <div class="col-lg-6">
                                        <div class="filter-section h-100 mb-0 d-flex flex-column justify-content-between">
                                            <div>
                                                <div class="filter-section-header">
                                                    <label class="d-flex align-items-center">
                                                        <i class="bi bi-calendar3 me-2 text-primary"></i>{% translate "Filtres par date" %}
                                                    </label>
                                                    <div class="filter-section-buttons">
                                                        <button type="button" class="btn select-all-btn date-preset-btn" data-preset="clear">
                                                            <i class="bi bi-x-circle me-1"></i>{% translate "Effacer dates" %}
                                                        </button>
                                                    </div>
                                                </div>

                                                <!-- Date de début -->
                                                <div class="date-filter-group mb-3 p-2 rounded bg-light bg-opacity-50 border">
                                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                                        <label class="form-label mb-0 fw-semibold text-success small">
                                                            <i class="bi bi-play-circle-fill me-1"></i>{% translate "Date de début" %}
                                                        </label>
                                                        <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25" style="font-size: 0.7rem;">
                                                            {% translate "Démarrage / Planification" %}
                                                        </span>
                                                    </div>
                                                    <div class="row g-2 align-items-center">
                                                        <div class="col-5">
                                                            <div class="input-group input-group-sm">
                                                                <span class="input-group-text py-0 px-2 text-muted small">{% translate "Du" %}</span>
                                                                <input type="date" name="begin_date_min" id="begin_date_min" class="form-control form-control-sm" value="{{ begin_date_min }}">
                                                            </div>
                                                        </div>
                                                        <div class="col-2 text-center text-muted">
                                                            <i class="bi bi-arrow-right"></i>
                                                        </div>
                                                        <div class="col-5">
                                                            <div class="input-group input-group-sm">
                                                                <span class="input-group-text py-0 px-2 text-muted small">{% translate "Au" %}</span>
                                                                <input type="date" name="begin_date_max" id="begin_date_max" class="form-control form-control-sm" value="{{ begin_date_max }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Date de fin -->
                                                <div class="date-filter-group mb-3 p-2 rounded bg-light bg-opacity-50 border">
                                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                                        <label class="form-label mb-0 fw-semibold text-primary small">
                                                            <i class="bi bi-check-circle-fill me-1"></i>{% translate "Date de fin" %}
                                                        </label>
                                                        <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25" style="font-size: 0.7rem;">
                                                            {% translate "Fin travaux (statut Terminé)" %}
                                                        </span>
                                                    </div>
                                                    <div class="row g-2 align-items-center">
                                                        <div class="col-5">
                                                            <div class="input-group input-group-sm">
                                                                <span class="input-group-text py-0 px-2 text-muted small">{% translate "Du" %}</span>
                                                                <input type="date" name="end_date_min" id="end_date_min" class="form-control form-control-sm" value="{{ end_date_min }}">
                                                            </div>
                                                        </div>
                                                        <div class="col-2 text-center text-muted">
                                                            <i class="bi bi-arrow-right"></i>
                                                        </div>
                                                        <div class="col-5">
                                                            <div class="input-group input-group-sm">
                                                                <span class="input-group-text py-0 px-2 text-muted small">{% translate "Au" %}</span>
                                                                <input type="date" name="end_date_max" id="end_date_max" class="form-control form-control-sm" value="{{ end_date_max }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Raccourcis rapides -->
                                            <div class="d-flex flex-wrap align-items-center gap-1 mt-2">
                                                <span class="text-muted small me-1" style="font-size: 0.75rem;"><i class="bi bi-lightning-charge me-1"></i>{% translate "Périodes rapides (fin)" %} :</span>
                                                <button type="button" class="btn btn-xs select-all-btn date-preset-btn py-0 px-2" style="font-size: 0.72rem;" data-preset="today">{% translate "Aujourd'hui" %}</button>
                                                <button type="button" class="btn btn-xs select-all-btn date-preset-btn py-0 px-2" style="font-size: 0.72rem;" data-preset="this_month">{% translate "Ce mois" %}</button>
                                                <button type="button" class="btn btn-xs select-all-btn date-preset-btn py-0 px-2" style="font-size: 0.72rem;" data-preset="last_month">{% translate "Mois dernier" %}</button>
                                                <button type="button" class="btn btn-xs select-all-btn date-preset-btn py-0 px-2" style="font-size: 0.72rem;" data-preset="this_year">{% translate "Cette année" %}</button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Visualisation Timeline Interactive -->
                                    <div class="col-lg-6">
                                        <div class="date-timeline-card h-100 p-3 rounded-3 shadow-sm d-flex flex-column justify-content-between">
                                            <div>
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <div class="fw-semibold text-dark small d-flex align-items-center">
                                                        <i class="bi bi-clock-history text-primary me-2"></i>{% translate "Ligne du temps & Intervalles" %}
                                                    </div>
                                                    <span class="badge bg-white text-secondary border small" id="timeline-range-badge">{% translate "Aperçu interactif" %}</span>
                                                </div>

                                                <!-- Timeline Visual Track -->
                                                <div class="timeline-visual-container position-relative my-2 p-3 bg-white rounded border shadow-sm">
                                                    <div class="timeline-axis position-relative mb-3">
                                                        <div class="timeline-axis-line"></div>
                                                        <div class="d-flex justify-content-between text-muted text-uppercase" style="font-size: 0.68rem; margin-top: 3px;">
                                                            <span id="timeline-axis-min">{% translate "Passé" %}</span>
                                                            <span class="badge bg-light text-secondary border px-1" id="timeline-today-marker"><i class="bi bi-calendar-event me-1"></i>{% translate "Aujourd'hui" %}</span>
                                                            <span id="timeline-axis-max">{% translate "Futur" %}</span>
                                                        </div>
                                                    </div>

                                                    <!-- Start Interval Track (Green) -->
                                                    <div class="mb-3">
                                                        <div class="d-flex justify-content-between align-items-center mb-1" style="font-size: 0.75rem;">
                                                            <span class="text-success fw-semibold">
                                                                <i class="bi bi-play-circle-fill me-1"></i>{% translate "Intervalle Date de début" %}
                                                            </span>
                                                            <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25" id="timeline-begin-text">
                                                                {% translate "Toutes dates" %}
                                                            </span>
                                                        </div>
                                                        <div class="timeline-bar-wrapper">
                                                            <div class="timeline-track-bg"></div>
                                                            <div class="timeline-bar timeline-bar-begin is-all" id="timeline-bar-begin"></div>
                                                        </div>
                                                    </div>

                                                    <!-- End Interval Track (Blue) -->
                                                    <div>
                                                        <div class="d-flex justify-content-between align-items-center mb-1" style="font-size: 0.75rem;">
                                                            <span class="text-primary fw-semibold">
                                                                <i class="bi bi-check-circle-fill me-1"></i>{% translate "Intervalle Date de fin (Terminé)" %}
                                                            </span>
                                                            <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25" id="timeline-end-text">
                                                                {% translate "Toutes dates" %}
                                                            </span>
                                                        </div>
                                                        <div class="timeline-bar-wrapper">
                                                            <div class="timeline-track-bg"></div>
                                                            <div class="timeline-bar timeline-bar-end is-all" id="timeline-bar-end"></div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Natural Language Summary Box -->
                                                <div class="timeline-summary-box p-2 rounded border bg-white small mb-2" id="timeline-summary-box">
                                                    <div class="d-flex align-items-start gap-2">
                                                        <i class="bi bi-info-circle text-primary mt-1 flex-shrink-0" id="timeline-summary-icon"></i>
                                                        <div id="timeline-summary-text" class="text-muted" style="font-size: 0.8rem; line-height: 1.35;">
                                                            {% translate "Aucune restriction de date : toutes les interventions sont incluses." %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Pedagogy diagram -->
                                            <div class="p-2 rounded bg-white bg-opacity-75 border border-dashed mt-2" style="font-size: 0.72rem;">
                                                <div class="text-muted fw-semibold mb-1">
                                                    <i class="bi bi-lightbulb text-warning me-1"></i>{% translate "Comment fonctionnent ces deux intervalles ?" %}
                                                </div>
                                                <div class="text-muted" style="line-height: 1.3;">
                                                    <div class="d-flex align-items-center gap-1 mb-1">
                                                        <span class="badge bg-success p-1 rounded-circle"></span>
                                                        <span><strong>{% translate "Date de début" %} [Min → Max]</strong> : {% translate "sélectionne les interventions dont le démarrage a lieu dans cette période." %}</span>
                                                    </div>
                                                    <div class="d-flex align-items-center gap-1">
                                                        <span class="badge bg-primary p-1 rounded-circle"></span>
                                                        <span><strong>{% translate "Date de fin" %} [Min → Max]</strong> : {% translate "sélectionne les interventions achevées (statut Terminé) dans cette période." %}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                        {% if to_be_planned_soon %}
                        <input type="hidden" name="to_be_planned_soon" value="{{ to_be_planned_soon }}">
                        {% endif %}
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" id="reset-filters" class="btn btn-link text-muted p-0 text-decoration-none d-flex align-items-center gap-1" style="font-size: 0.85rem; font-weight: 500;">
                        <i class="bi bi-arrow-counterclockwise"></i> {% translate "Réinitialiser" %}
                    </button>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary px-3 py-2" data-bs-dismiss="modal" style="border-radius: 8px; font-weight: 500;">{% translate "Annuler" %}</button>
                        <button type="button" id="apply-filters" class="btn btn-sm btn-dark px-4 py-2" style="background-color: #0f172a; border-color: #0f172a; border-radius: 8px; font-weight: 600;">
                            <i class="bi bi-check2 me-1"></i>{% translate "Filtrer" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ─── Modale pour enregistrer un filtre favori ───────────────── -->
    <div class="modal fade" id="saveFavoriteModal" tabindex="-1" aria-labelledby="saveFavoriteModalLabel" aria-hidden="true" style="z-index: 1070;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content shadow-lg border-0 rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title" id="saveFavoriteModalLabel">
                        <i class="bi bi-bookmark-star text-warning me-2"></i>{% translate "Enregistrer comme favori" %}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body">
                    <form id="save-favorite-form" onsubmit="return false;">
                        <input type="hidden" id="save-favorite-id" value="">
                        <div class="mb-3">
                            <label for="save-favorite-name" class="form-label fw-semibold">{% translate "Nom du filtre favori" %}</label>
                            <input type="text" class="form-control" id="save-favorite-name" placeholder="{% translate 'Ex. Mes urgences voirie' %}" required maxlength="100">
                            <div class="form-text">{% translate "Donnez un nom clair pour retrouver facilement cette sélection de filtres." %}</div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label small fw-semibold text-muted mb-1">{% translate "Critères enregistrés :" %}</label>
                            <div id="save-favorite-summary" class="small text-muted p-2 rounded bg-light border" style="max-height: 120px; overflow-y: auto;">
                                <!-- Résumé généré dynamiquement -->
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="button" class="btn btn-primary" id="btn-confirm-save-favorite">
                        <i class="bi bi-check-lg me-1"></i>{% translate "Enregistrer" %}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- ─── Disposition Principale ──────────────────────────────────── -->
    <div class="position-relative interventions-layout">
        <!-- Boutons de disposition (Tableau seul / Partagé / Carte seule) -->
        <div class="position-absolute top-0 end-0 mt-2" style="z-index: 10;">
            <div class="btn-group" role="group" aria-label="{% translate 'Sélection de la vue' %}">
                <button id="layout-btn-table" class="btn btn-light" type="button" title="{% translate 'Vue tableau uniquement' %}">
                    <i class="bi bi-table"></i>
                </button>
                <button id="layout-btn-both" class="btn btn-light text-primary" type="button" title="{% translate 'Vue partagée' %}">
                    <i class="bi bi-layout-split"></i>
                </button>
                <button id="layout-btn-map" class="btn btn-light" type="button" title="{% translate 'Vue carte uniquement' %}">
                    <i class="bi bi-globe-europe-africa"></i>
                </button>
            </div>
        </div>

        <!-- Widget de recherche — centré au-dessus de la vue -->
        <div id="interventions-search-widget"
             style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none;">
            <div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;">
                <div style="position:relative; display:flex; width:360px; max-width:100%; min-width:60px;">
                    <input type="text" id="interventions-search-input" class="form-control form-control-sm"
                           style="width:100%; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
                           placeholder="{% translate 'Titre, code, lieu, contrat…' %}">
                    <button type="button" id="interventions-search-clear"
                            style="position:absolute; right:4px; top:50%; transform:translateY(-50%);
                                   background:none; border:none; padding:0 2px; line-height:1;
                                   color:#adb5bd; cursor:pointer; visibility:hidden;"
                            title="{% translate 'Effacer la recherche' %}">
                        <i class="bi bi-x-lg" style="font-size:0.7rem;"></i>
                    </button>
                </div>
                <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6; flex-shrink:0;">
                    <div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}">
                        <input type="radio" class="btn-check" name="search-mode" id="search-mode-and" value="and" checked>
                        <label class="btn btn-outline-secondary py-0 px-2" for="search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">{% translate "AND" %}</label>
                        <input type="radio" class="btn-check" name="search-mode" id="search-mode-or" value="or">
                        <label class="btn btn-outline-secondary py-0 px-2" for="search-mode-or" title="{% translate 'Au moins un mot doit correspondre' %}">{% translate "OR" %}</label>
                    </div>
                </span>
                <button class="btn btn-sm px-3" type="button" id="interventions-search-btn"
                        style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057; flex-shrink:0;"
                        title="{% translate 'Rechercher' %}">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </div>

        <!-- Rangée Tableau (Gauche) / Carte (Droite) -->
        <div class="row mt-2" style="height: calc(100vh - 120px);">
            
            <!-- Colonne Gauche : Tableau des interventions -->
            <div class="col-md-6" id="col-left" style="max-height: calc(100vh - 120px); display: flex; flex-direction: column;">
                
                <!-- Entête d'onglet et bouton d'ajout -->
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                    <ul class="nav nav-tabs interventions-tabs" id="tablesTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="interventions-table-tab" data-bs-toggle="tab" data-bs-target="#interventions-table-content" type="button" role="tab" aria-controls="interventions-table-content" aria-selected="true">
                                <i class="bi bi-tools me-1"></i>
                                {% translate "Interventions" %}
                                <span class="tab-counter-badge" id="interventions-counter-badge">0</span>
                            </button>
                        </li>
                    </ul>
                    <div>
                        <button class="btn btn-new-intervention" type="button" data-bs-toggle="modal" data-bs-target="#interventionTypeModal" title="{% translate 'Nouvelle intervention' %}">
                            <i class="bi bi-plus-lg me-1"></i>
                            <span>{% translate "Nouvelle intervention" %}</span>
                        </button>
                    </div>
                </div>

                <!-- Puces des filtres actifs -->
                <div class="active-filters-bar d-none" id="active-filters-bar">
                    <!-- Injecté dynamiquement par JS -->
                </div>

                <!-- Barre d'outils du tableau -->
                <div class="interventions-toolbar d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <!-- Bouton Filtre avec badge -->
                        <button type="button" class="btn btn-light position-relative filter-trigger-btn" data-bs-toggle="modal" data-bs-target="#filterModal">
                            <i class="bi bi-funnel"></i> {% translate "Filtre" %}
                            <span id="filter-badge" class="position-absolute badge rounded-pill bg-primary d-none">
                                <span id="filter-count">0</span>
                            </span>
                        </button>

                        <!-- Dropdown Favoris -->
                        <div class="dropdown d-inline-block" id="favorite-filters-dropdown-container">
                            <button class="btn btn-light dropdown-toggle d-flex align-items-center gap-1" type="button" id="favoriteFiltersDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="{% translate 'Filtres favoris' %}">
                                <i class="bi bi-bookmark-star text-warning"></i>
                                <span id="active-favorite-label" class="d-none d-md-inline text-truncate" style="max-width: 140px;">{% translate "Favoris" %}</span>
                            </button>
                            <ul class="dropdown-menu shadow-sm" id="favorite-filters-menu" aria-labelledby="favoriteFiltersDropdown" style="min-width: 280px; max-height: 400px; overflow-y: auto;">
                                <li class="dropdown-header small text-uppercase fw-bold text-muted d-flex justify-content-between align-items-center py-1">
                                    <span>{% translate "Mes filtres favoris" %}</span>
                                    <span class="badge bg-secondary" id="favorite-filters-count">0</span>
                                </li>
                                <div id="favorite-filters-items"></div>
                                <li><hr class="dropdown-divider my-1"></li>
                                <li>
                                    <button type="button" class="dropdown-item d-flex align-items-center gap-2 text-primary py-2" id="btn-open-save-favorite-modal">
                                        <i class="bi bi-plus-circle"></i>
                                        <span>{% translate "Enregistrer le filtre actuel..." %}</span>
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <!-- Dropdown Sélecteur de Colonnes -->
                        <div class="dropdown d-inline-block">
                            <button type="button" class="btn btn-light dropdown-toggle" id="columns-dropdown-btn" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="{% translate 'Choisir les colonnes à afficher' %}">
                                <i class="bi bi-layout-three-columns me-1"></i>{% translate "Colonnes" %}
                            </button>
                            <div class="dropdown-menu shadow-sm py-2 px-3 columns-dropdown-menu" aria-labelledby="columns-dropdown-btn">
                                <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
                                    <span class="fw-semibold text-dark small">{% translate "Colonnes" %}</span>
                                    <div class="d-flex gap-1">
                                        <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none text-primary small" id="cols-select-all">{% translate "Toutes" %}</button>
                                        <span class="text-muted small">·</span>
                                        <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none text-muted small" id="cols-reset-default">{% translate "Défaut" %}</button>
                                    </div>
                                </div>
                                <div id="columns-list-container" class="columns-checkbox-list">
                                    <!-- Injecté dynamiquement par JavaScript -->
                                </div>
                            </div>
                        </div>

                        <!-- Dropdown Actions de masse -->
                        <div class="dropdown" id="bulk-action-dropdown">
                            <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="bi bi-lightning-charge me-1"></i>{% translate "Action" %}
                            </button>
                            <ul class="dropdown-menu shadow-sm">
                                <li>
                                    <a class="dropdown-item" href="#" data-action="status-change">
                                        <i class="bi bi-fast-forward-circle me-2"></i>{% translate "Modifier le statut" %}
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#" data-action="associate-order">
                                        <i class="bi bi-link-45deg me-2"></i>{% translate "Associer à une commande" %}
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#" data-action="export" data-bs-toggle="modal" data-bs-target="#exportModal">
                                        <i class="bi bi-download me-2"></i>{% translate "Exporter" %}
                                    </a>
                                </li>
                                {% if is_admin %}
                                <li>
                                    <a class="dropdown-item" href="#" data-action="export-sheets-zip">
                                        <i class="bi bi-file-earmark-zip me-2"></i>{% translate "Exporter les fiches (ZIP)" %}
                                    </a>
                                </li>
                                {% endif %}
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <a class="dropdown-item" href="#" data-action="execution-report" data-bs-toggle="modal" data-bs-target="#executionReportModal">
                                        <i class="bi bi-file-earmark-text me-2"></i>{% translate "Rapport d'exécution (PDF)" %}
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Outils de sélection et sélecteur de page -->
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="d-flex gap-1 align-items-center">
                            <button type="button" class="btn btn-xs btn-outline-secondary py-1 px-2" style="font-size: 0.76rem;" id="select-all">{% translate "Tout sélectionner" %}</button>
                            <button type="button" class="btn btn-xs btn-outline-secondary py-1 px-2" style="font-size: 0.76rem;" id="deselect-all">{% translate "Tout désélectionner" %}</button>
                            <span id="selection-status" class="text-muted small ms-1" style="font-size: 0.78rem;">0 intervention sélectionnée</span>
                        </div>

                        <span id="filter-limit-alert" class="alert alert-info py-1 px-2 mb-0 d-none small">
                            <i class="bi bi-info-circle me-1"></i>
                            {% translate "Contenu limité à 5 000 éléments." %}
                        </span>

                        <div class="page-size-selector d-flex align-items-center gap-1">
                            <label for="page-size-select" class="small text-muted mb-0 d-none d-sm-inline">{% translate "Afficher par" %}</label>
                            <select id="page-size-select" class="form-select form-select-sm page-size-select">
                                <option value="25">25</option>
                                <option value="50" selected>50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Spinner de chargement -->
                <div id="interventions-spinner" class="table-spinner py-5 text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{% translate "Chargement..." %}</span>
                    </div>
                </div>

                <!-- Carte du Tableau Custom (remplace bootstrap-table) -->
                <div id="interventions-table-container" class="d-none flex-grow-1 d-flex flex-column" style="min-height: 0;">
                    <div class="interventions-table-card flex-grow-1 d-flex flex-column" style="min-height: 0;">
                        <div class="table-responsive flex-grow-1" id="interventions-table-scrollable">
                            <table id="interventions-table" class="interventions-table">
                                <thead>
                                    <tr>
                                        <th class="col-actions" style="width: 52px; text-align: center;"></th>
                                        <th class="sortable col-code" data-field="code">
                                            <div class="sort-header">
                                                <span>{% translate "Code" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-status" data-field="status">
                                            <div class="sort-header">
                                                <span>{% translate "Statut" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-title" data-field="title">
                                            <div class="sort-header">
                                                <span>{% translate "Titre" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-location_code" data-field="location_code">
                                            <div class="sort-header">
                                                <span>{% translate "Localisation" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-begin_time" data-field="begin_time">
                                            <div class="sort-header">
                                                <span>{% translate "Début" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-maintain_type" data-field="maintain_type">
                                            <div class="sort-header">
                                                <span>{% translate "Maintenance" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-prep_state" data-field="prep_state">
                                            <div class="sort-header">
                                                <span>{% translate "Stock" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-contract_number" data-field="contract_number">
                                            <div class="sort-header">
                                                <span>{% translate "Contrat" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-assigned_provider" data-field="assigned_provider">
                                            <div class="sort-header">
                                                <span>{% translate "Prestataire" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-team" data-field="team">
                                            <div class="sort-header">
                                                <span>{% translate "Équipe" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-member" data-field="member">
                                            <div class="sort-header">
                                                <span>{% translate "Membre" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-origin_type" data-field="origin_type">
                                            <div class="sort-header">
                                                <span>{% translate "Origine" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                        <th class="sortable col-source_category" data-field="source_category">
                                            <div class="sort-header">
                                                <span>{% translate "Source" %}</span>
                                                <i class="bi bi-arrow-down-up sort-icon"></i>
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="interventions-table-tbody">
                                    <!-- Rempli dynamiquement par JavaScript -->
                                </tbody>
                            </table>
                        </div>

                        <!-- Barre de Pagination Personnalisée -->
                        <div class="interventions-pagination-bar" id="interventions-pagination-bar">
                            <div class="pagination-info" id="interventions-pagination-info">
                                <!-- Texte de pagination injecté par JS -->
                            </div>
                            <nav aria-label="{% translate 'Pagination interventions' %}">
                                <ul class="pagination pagination-sm mb-0" id="interventions-pagination-list">
                                    <!-- Éléments de pagination injectés par JS -->
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Colonne Droite : Carte MapLibre -->
            <div class="col-md-6" id="col-right">
                <div id="map" class="interventions-map">
                    <button id="filterzone" class="btn btn-light btn-sm interventions-map-filter" type="button">
                        <i class="bi bi-bounding-box me-1"></i>{% translate "Filtrer sur cette zone" %}
                    </button>
                </div>
            </div>

        </div>
    </div>

    <!-- ─── Modale pour le changement de statut ─────────────────────── -->
    <div class="modal fade" id="statusChangeModal" tabindex="-1" aria-labelledby="statusChangeModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content shadow-lg border-0 rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title" id="statusChangeModalLabel">{% translate "Changer le statut des interventions" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body">
                    <div id="status-change-selection-info" class="alert alert-info d-none mb-3" role="alert">
                        <i class="bi bi-info-circle me-1"></i>
                        {% translate "Aucune intervention sélectionnée : le changement de statut s'appliquera à toutes les interventions filtrées." %}
                    </div>
                    <div class="mb-3">
                        <label for="new-status" class="form-label">{% translate "Nouveau statut" %}</label>
                        <select class="form-select" id="new-status">
                            <option value="">{% translate "-- Choisir un statut --" %}</option>
                            {% if is_admin %}
                                {% for key, value, css_class in status_choices %}
                                    <option value="{{ key }}">{{ value }}</option>
                                {% endfor %}
                            {% else %}
                                <option value="to_be_approved">{% translate "À approuver" %}</option>
                                <option value="to_be_planned">{% translate "À planifier" %}</option>
                                <option value="to_be_processed">{% translate "À traiter" %}</option>
                                <option value="validated">{% translate "Validé" %}</option>
                                <option value="canceled">{% translate "Annulé" %}</option>
                            {% endif %}
                        </select>
                    </div>
                    <div id="cancellation-reason-group" class="mb-3 d-none">
                        <label for="bulk-cancellation-type" class="form-label">{% translate "Type d'annulation" %} <span class="text-danger">*</span></label>
                        <select class="form-select mb-2" id="bulk-cancellation-type">
                            <option value="" selected disabled>{% translate "Choisissez un type" %}</option>
                            <option value="duplicate">{% translate "Doublon" %}</option>
                            <option value="to_redirect">{% translate "A rediriger" %}</option>
                            <option value="not_our_assets">{% translate "Pas sous notre gestion" %}</option>
                            <option value="non_relevant">{% translate "Non-relevant" %}</option>
                            <option value="other">{% translate "Autre" %}</option>
                        </select>
                        <label for="bulk-cancellation-reason" class="form-label">{% translate "Commentaire" %} <span class="text-danger d-none" id="bulkCancellationReasonRequired">*</span></label>
                        <textarea class="form-control" id="bulk-cancellation-reason" rows="3" maxlength="1000" placeholder="{% translate 'Commentaire libre...' %}"></textarea>
                        <small class="form-text text-muted">{% translate "Obligatoire pour le motif \"Autre\". Sinon, le motif choisi sera enregistré comme note." %}</small>
                    </div>
                    <div id="status-error-message" class="alert alert-danger d-none" role="alert"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="button" class="btn btn-primary" id="confirm-status-change">{% translate "Confirmer" %}</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- ─── Modale pour associer à une commande ─────────────────────── -->
    <div class="modal fade" id="associateOrderModal" tabindex="-1" aria-labelledby="associateOrderModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content shadow-lg border-0 rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title" id="associateOrderModalLabel">{% translate "Associer les interventions à une commande" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body">
                    <div id="associate-order-selection-info" class="alert alert-info d-none mb-3" role="alert">
                        <i class="bi bi-info-circle me-1"></i>
                        {% translate "Aucune intervention sélectionnée : l'association s'appliquera à toutes les interventions filtrées." %}
                    </div>
                    <div class="mb-3">
                        <label for="order-search" class="form-label">{% translate "Commande" %}</label>
                        <input type="text" id="order-search" class="form-control" placeholder="{% translate 'Rechercher une commande...' %}">
                        <input type="hidden" id="order-id" value="">
                        <div class="form-text">{% translate "Seules les commandes au statut 'En préparation' ou 'Envoyé' et auxquelles vous avez accès sont proposées." %}</div>
                    </div>
                    <div id="associate-order-error" class="alert alert-danger d-none" role="alert"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="button" class="btn btn-primary" id="confirm-associate-order">{% translate "Associer" %}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ─── Modal Export ───────────────────────────────────────────── -->
    <div class="modal fade" id="exportModal" tabindex="-1" aria-labelledby="exportModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content shadow-lg border-0 rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title" id="exportModalLabel">{% translate "Exporter les interventions sélectionnées" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body">
                    <div id="export-selection-info" class="alert alert-info d-none mb-3" role="alert">
                        <i class="bi bi-info-circle me-1"></i>
                        {% translate "Aucune intervention sélectionnée : l'export inclura toutes les interventions filtrées." %}
                    </div>
                    <p class="small text-muted">{% translate "Choisissez le format de fichier à générer." %}</p>
                    <div class="d-flex gap-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="export-format" id="export-format-csv" value="csv" checked>
                            <label class="form-check-label" for="export-format-csv">CSV</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="export-format" id="export-format-xlsx" value="xlsx">
                            <label class="form-check-label" for="export-format-xlsx">Excel (XLSX)</label>
                        </div>
                    </div>
                    <div id="export-error" class="alert alert-danger d-none mt-3" role="alert"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="button" class="btn btn-primary" id="confirm-export-btn">{% translate "Exporter" %}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ─── Modal Rapport d'exécution ──────────────────────────────── -->
    <div class="modal fade" id="executionReportModal" tabindex="-1" aria-labelledby="executionReportModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content shadow-lg border-0 rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title" id="executionReportModalLabel"><i class="bi bi-file-earmark-text me-2"></i>{% translate "Rapport d'exécution" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body">
                    <div id="execution-report-selection-info" class="alert alert-info d-none mb-3" role="alert">
                        <i class="bi bi-info-circle me-1"></i>
                        {% translate "Aucune intervention sélectionnée : toutes les interventions filtrées seront incluses dans le rapport." %}
                    </div>
                    <div id="execution-report-too-many" class="alert alert-warning d-none mb-3" role="alert">
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        {% translate "Vous avez sélectionné plus de 50 interventions. Veuillez réduire votre sélection avant de générer le rapport." %}
                    </div>
                    <div class="mb-3">
                        <label for="execution-report-title" class="form-label fw-semibold">{% translate "Titre du rapport" %}</label>
                        <input type="text" class="form-control" id="execution-report-title"
                               placeholder="{% translate 'Ex : Rapport mensuel – Voirie avril 2026' %}" maxlength="120">
                        <div class="form-text">{% translate "Optionnel. Apparaîtra en tête avant le sommaire." %}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">{% translate "Période (changement de statut)" %}</label>
                        <div class="input-group">
                            <span class="input-group-text">{% translate "Du" %}</span>
                            <input type="date" class="form-control" id="execution-report-date-from">
                            <span class="input-group-text">{% translate "Au" %}</span>
                            <input type="date" class="form-control" id="execution-report-date-to">
                        </div>
                        <div class="form-text">{% translate "Optionnel. Filtre sur la date de changement de statut de l'intervention." %}</div>
                    </div>
                    <p class="small text-muted mb-0">{% translate "Le rapport reprendra les interventions correspondant aux filtres actifs." %}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="button" class="btn btn-primary" id="confirm-execution-report-btn">
                        <i class="bi bi-file-earmark-pdf me-1"></i>{% translate "Télécharger le PDF" %}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Overlay de progression pour la génération du rapport d'exécution -->
    <div id="execution-report-progress-overlay"
         class="position-fixed top-0 start-0 w-100 h-100"
         style="display:none; background:rgba(0,0,0,.55); z-index:9050; align-items:center; justify-content:center;">
        <div class="card shadow-lg border-0 rounded-3" style="max-width:440px; width:90%;">
            <div class="card-body text-center p-4 p-md-5">
                <i class="bi bi-file-earmark-pdf text-primary mb-3" style="font-size:2.75rem;"></i>
                <h6 class="fw-semibold mb-1">{% translate "Génération du rapport en cours…" %}</h6>
                <p id="execution-report-progress-label" class="text-muted small mb-3">&nbsp;</p>
                <div class="progress rounded-pill mb-1" style="height:12px;">
                    <div id="execution-report-progress-bar"
                         class="progress-bar bg-primary"
                         role="progressbar"
                         style="width:0%; transition:width .4s ease;"
                         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <p id="execution-report-progress-pct" class="text-muted small mb-0">0&nbsp;%</p>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1100">
        <div id="app-toast" class="toast align-items-center text-white bg-success border-0 shadow-lg rounded-3" role="alert" aria-live="polite" aria-atomic="true">
            <div class="d-flex">
                <div id="app-toast-body" class="toast-body"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="{% translate 'Fermer' %}"></button>
            </div>
        </div>
    </div>

{% endblock content %}

{% block script %}
    <!-- Mapbox GL Draw 1.5.0 (local) -->
    <script src="{% static 'common/mapbox-gl-draw.js' %}"></script>
    <!-- Turf.js (local) -->
    <script src="{% static 'common/turf.min.js' %}"></script>
    <!-- jQuery UI 1.14.1 (local) -->
    <script src="{% static 'common/jquery-ui.min.js' %}"></script>

    <script>
        const interventionsgeojsonUrl = "{% url 'interventions:interventions_geojson' %}";
        const interventionsurl = "{% url 'interventions:interventions_index' %}";
        const locationsAutocompleteUrl = "{% url 'assets:locations_autocomplete' %}";
        const availableOrdersUrl = "{% url 'interventions:available_orders' %}";
        const bulkAssociateOrderUrl = "{% url 'interventions:bulk_associate_order' %}";
        const exportInterventionsUrl = "{% url 'interventions:export_interventions' %}";
        const exportSheetsZipUrl = "{% url 'interventions:export_intervention_sheets_zip' %}";
        const executionReportUrl = "{% url 'interventions:bulk_execution_report_pdf' %}";
        const executionReportStartUrl = "{% url 'interventions:start_bulk_execution_report' %}";
        const executionReportPollBaseUrl = "{% url 'interventions:poll_bulk_execution_report' token='__TOKEN__' %}";
        const executionReportDownloadBaseUrl = "{% url 'interventions:download_bulk_execution_report' token='__TOKEN__' %}";
        const saveLayoutUrl = "{% url 'common:save_intervention_list_layout' %}";
        const savePreferencesUrl = "{% url 'common:save_intervention_list_preferences' %}";
        const saveFavoriteUrl = "{% url 'common:save_favorite_filter' module='interventions' %}";
        const deleteFavoriteUrl = "{% url 'common:delete_favorite_filter' module='interventions' %}";
        let userFavoriteFilters = {{ favorite_filters_json|default:"[]"|safe }};

        var selected_interventions_set = new Set(JSON.parse('{{ selected_interventions_ids|default:"[]"|escapejs }}'));
        const PRESELECTED_LOCATIONS = JSON.parse('{{ preselected_locations|default:"[]"|escapejs }}');
        const INITIAL_LAYOUT = '{{ intervention_list_layout|default:"both" }}';
        const SAVED_SORT = {{ saved_sort|default:"{}"|safe }};
        const SAVED_COLUMNS = {{ saved_columns|default:"null"|safe }};
        const subcatNoneLabel = "{% translate '(aucune sous-catégorie)' %}";
        const SELECTED_ROLE = '{{ selected_role|default:""|escapejs }}';
        const SELECTED_PERSON_ID = '{{ selected_person_id|default:""|escapejs }}';
    </script>

    {{ role_persons_data|json_script:"role-persons-data" }}

    <script src="{% url 'javascript-catalog' %}"></script>
    <script src="{% static 'common/base_script.js' %}"></script>
    <script src="{% static 'common/base_map.js' %}"></script>
    <script src="{% static 'interventions/status_colors.js' %}"></script>
    <script src="{% static 'interventions/interventions_index.js' %}?v=20261012"></script>
{% endblock script %}