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

{% block head %}
    <link href="{% static 'common/mapbox-gl-draw.css' %}" rel="stylesheet"/>
    <link rel="stylesheet" href="{% static 'assets/assets_index.css' %}">
    <link rel="stylesheet" href="{% static 'assets/info-panel.css' %}">
    <style>
        #assets-search-input:focus { outline: none; box-shadow: none; border-color: #dee2e6; }
        #unified-empty-state { display: none; color: #6c757d; }
        /* ─── Modern Airbnb-style Filter Modal ──────────────────── */
        #filterModal .modal-dialog {
            max-width: 820px;
            margin: 1.5rem auto;
        }
        #filterModal .modal-content {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
            max-height: 88vh;
            overflow: hidden;
            background-color: #ffffff;
        }
        #filterModal .modal-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid #f1f5f9;
            background-color: #ffffff;
        }
        #filterModal .modal-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #0f172a;
            letter-spacing: -0.02em;
        }
        #filterModal .btn-close {
            font-size: 0.85rem;
            padding: 0.5rem;
            opacity: 0.5;
            transition: opacity 0.15s ease;
        }
        #filterModal .btn-close:hover {
            opacity: 1;
        }
        #filterModal .modal-body {
            padding: 1.5rem;
            background-color: #f8fafc;
            flex: 1;
            overflow-y: auto;
        }
        #filterModal .modal-footer {
            padding: 1rem 1.5rem;
            background-color: #ffffff;
            border-top: 1px solid #f1f5f9;
            flex-shrink: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }


        /* Thematic Conditional Filter Cards */
        #conditional-filter-options {
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
            width: 100%;
        }
        .conditional-thematic-group {
            width: 100%;
            box-sizing: border-box;
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 0.95rem 1.05rem;
            margin-bottom: 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            transition: all 0.15s ease;
        }
        .conditional-thematic-group:hover {
            border-color: #cbd5e1;
            background-color: #f1f5f9;
        }
        .conditional-thematic-header {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            padding-bottom: 0.55rem;
            margin-bottom: 0.75rem;
            border-bottom: 1px solid #e2e8f0;
            font-size: 0.9rem;
            font-weight: 700;
            color: #0f172a;
            letter-spacing: -0.01em;
        }
        .conditional-thematic-header i {
            font-size: 1.05rem;
            color: #2563eb;
        }
        .conditional-filter-block {
            margin-bottom: 0.75rem;
        }
        .conditional-filter-block:last-child {
            margin-bottom: 0;
        }
        .conditional-filter-label {
            font-size: 0.76rem;
            font-weight: 600;
            color: #64748b;
            margin-bottom: 0.35rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        /* Uniform Responsive Grid for Filter Options (e.g. usage_type) */
        .filter-options.filter-options-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)) !important;
            gap: 0.5rem !important;
            width: 100% !important;
        }
        .filter-options.filter-options-grid .filter-option {
            display: flex;
            width: 100%;
            min-width: 0;
        }
        .filter-options.filter-options-grid .filter-option label {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            text-align: left;
            padding: 0.45rem 0.85rem;
            box-sizing: border-box;
            min-height: 38px;
            border-radius: 9999px;
            overflow: hidden;
        }
        .filter-options.filter-options-grid .filter-option label .filter-option-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            min-width: 0;
        }
        .filter-options.filter-options-grid .filter-option label i {
            flex-shrink: 0;
            font-size: 0.95rem;
            margin-right: 0.35rem;
        }



        /* Filter Section Cards */
        .filter-section {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 1.15rem;
            margin-bottom: 1rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .filter-section:hover {
            border-color: #cbd5e1;
        }
        .filter-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.85rem;
            gap: 1rem;
        }
        .filter-section-header > label,
        .filter-section-header > .section-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #0f172a;
            margin: 0;
            letter-spacing: -0.01em;
        }
        .filter-section-buttons {
            display: flex;
            gap: 0.35rem;
            margin-left: auto;
        }
        .filter-section-buttons button {
            padding: 0.25rem 0.65rem;
            font-size: 0.75rem;
            font-weight: 500;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            background-color: #ffffff;
            color: #64748b;
            transition: all 0.15s ease;
        }
        .filter-section-buttons button:hover {
            background-color: #f1f5f9;
            color: #0f172a;
            border-color: #cbd5e1;
        }

        /* Thematic Grid (Airbnb-style visual cards) */
        .thematic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
            gap: 0.65rem;
        }
        @media (max-width: 576px) {
            .thematic-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .thematic-tile {
            position: relative;
        }
        .thematic-tile input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }
        .thematic-tile label {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            min-height: 96px;
            padding: 0.85rem 0.5rem;
            background-color: #ffffff;
            border: 1.5px solid #e2e8f0;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none;
        }
        .thematic-tile .thematic-icon {
            font-size: 1.85rem;
            color: #475569;
            margin-bottom: 0.45rem;
            transition: transform 0.18s ease, color 0.18s ease;
            line-height: 1;
        }
        .thematic-tile .thematic-label {
            font-size: 0.78rem;
            font-weight: 600;
            color: #334155;
            line-height: 1.25;
            transition: color 0.18s ease;
        }
        .thematic-tile:hover label {
            background-color: #f8fafc;
            border-color: #94a3b8;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        .thematic-tile:hover .thematic-icon {
            color: #0f172a;
            transform: scale(1.08);
        }
        .thematic-tile input[type="checkbox"]:checked + label {
            background-color: #0f172a !important;
            border-color: #0f172a !important;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22);
            transform: translateY(-1px);
        }
        .thematic-tile input[type="checkbox"]:checked + label .thematic-icon {
            color: #ffffff !important;
            transform: scale(1.05);
        }
        .thematic-tile input[type="checkbox"]:checked + label .thematic-label {
            color: #ffffff !important;
        }

        /* Chips & Tags (Categories, Models, Conditionals, Status) */
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            background-color: transparent !important;
            border: none !important;
            padding: 0 !important;
            min-height: auto !important;
        }
        .filter-option {
            display: inline-flex;
            align-items: center;
        }
        .filter-option input[type="checkbox"],
        .filter-option input[type="radio"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }
        .filter-option label {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.4rem 0.85rem;
            font-size: 0.82rem;
            font-weight: 500;
            color: #334155;
            background-color: #ffffff;
            border: 1.5px solid #e2e8f0;
            border-radius: 9999px;
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: none;
            white-space: nowrap;
        }
        .filter-option label:hover {
            background-color: #f8fafc;
            border-color: #94a3b8;
            color: #0f172a;
        }
        .filter-option input[type="checkbox"]:checked + label,
        .filter-option input[type="radio"]:checked + label {
            background-color: #0f172a !important;
            border-color: #0f172a !important;
            color: #ffffff !important;
            font-weight: 600;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
        }
        .filter-option input:disabled + label {
            opacity: 0.45;
            cursor: not-allowed;
            background-color: #f1f5f9;
            border-color: #e2e8f0;
        }

        /* Segmented Control (Element Type) */
        .segmented-control {
            display: inline-flex;
            background-color: #f1f5f9;
            padding: 4px;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            gap: 3px;
            max-width: 100%;
            overflow-x: auto;
        }
        .segmented-option label {
            border-radius: 7px !important;
            border: none !important;
            background-color: transparent !important;
            color: #64748b !important;
            font-weight: 500 !important;
            padding: 0.45rem 1rem !important;
            font-size: 0.84rem !important;
            box-shadow: none !important;
            white-space: nowrap;
        }
        .segmented-option label:hover {
            color: #0f172a !important;
            background-color: rgba(255, 255, 255, 0.6) !important;
        }
        .segmented-option input[type="radio"]:checked + label {
            background-color: #ffffff !important;
            color: #0f172a !important;
            font-weight: 600 !important;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
        }

        /* Empty state helper inside filter options */
        #category-filter-options > span.text-muted,
        #model-filter-options > span.text-muted,
        #conditional-filter-options > span.text-muted {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            background-color: #f8fafc;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            color: #64748b !important;
            font-size: 0.82rem;
            width: 100%;
        }

        /* Filter trigger badge */
        #filter-badge {
            background-color: #0f172a !important;
            color: #ffffff !important;
            font-size: 0.72rem;
            font-weight: 700;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
            top: 2px !important;
            right: -6px !important;
            left: auto !important;
            transform: none !important;
            min-width: 1.25rem;
            height: 1.25rem;
            padding: 0 4px !important;
            line-height: 1.25rem;
        }
        #filter-badge:not(.d-none) {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
        }
        #map .maplibregl-popup-close-button {
            font-size: 1.35rem;
            line-height: 1;
            padding: 0.2rem 0.45rem;
        }
        .unified-add-panel {
            border: 1px solid #dee2e6;
            border-radius: 0.75rem;
            padding: 1rem;
            background: #f8f9fa;
        }
        .unified-add-panel h6 {
            font-size: 0.95rem;
            margin-bottom: 0.75rem;
        }
        .unified-add-panel .form-select,
        .unified-add-panel .form-control {
            border-radius: 0.65rem;
        }
        #map .maplibregl-ctrl-top-right,
        #map .mapboxgl-ctrl-top-right {
            top: 10px !important;
        }
    
        /* ─── Modern SaaS Table Styling ────────────────────────────────────── */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

        #col-table,
        .bootstrap-table {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        }

        .bootstrap-table.bootstrap5 .fixed-table-container {
            border: 1px solid #e2e8f0 !important;
            border-radius: 10px !important;
            background-color: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
            overflow: hidden !important;
        }

        .bootstrap-table.bootstrap5 .fixed-table-body {
            overflow: auto !important;
        }

        /* Modern subtle scrollbar */
        .bootstrap-table.bootstrap5 .fixed-table-body::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }
        .bootstrap-table.bootstrap5 .fixed-table-body::-webkit-scrollbar-track {
            background: #f8fafc;
        }
        .bootstrap-table.bootstrap5 .fixed-table-body::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        .bootstrap-table.bootstrap5 .fixed-table-body::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        #col-table,
        #col-table .tab-content,
        #col-table .tab-pane {
            overflow: hidden !important;
        }

        /* Headers */
        .bootstrap-table.bootstrap5 .fixed-table-header th,
        .bootstrap-table.bootstrap5 #unified-table th {
            background-color: #f8fafc !important;
            color: #475569 !important;
            font-size: 0.74rem !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.04em !important;
            border-bottom: 1.5px solid #e2e8f0 !important;
            padding: 0.65rem 0.75rem !important;
            vertical-align: middle !important;
            white-space: nowrap !important;
        }

        .bootstrap-table.bootstrap5 .fixed-table-header th .th-inner {
            padding: 0 !important;
            font-size: 0.74rem !important;
            font-weight: 600 !important;
            line-height: 1.4 !important;
        }

        /* Rows & Cells */
        .bootstrap-table.bootstrap5 #unified-table td {
            padding: 0.65rem 0.75rem !important;
            vertical-align: middle !important;
            font-size: 0.83rem !important;
            color: #334155;
            border-bottom: 1px solid #f1f5f9 !important;
        }

        .bootstrap-table.bootstrap5 #unified-table tbody tr {
            transition: background-color 0.12s ease;
        }

        .bootstrap-table.bootstrap5 #unified-table tbody tr:hover {
            background-color: #f8fafc !important;
        }

        .bootstrap-table.bootstrap5 #unified-table tbody tr.selected {
            background-color: #f1f5f9 !important;
        }

        /* Specific cell styles */
        .unified-code-link {
            font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
            font-size: 0.79rem !important;
            font-weight: 600 !important;
            color: #0f172a !important;
            text-decoration: none !important;
            white-space: nowrap !important;
            display: inline-block;
            padding: 2px 6px;
            border-radius: 5px;
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            transition: all 0.15s ease;
        }
        .unified-code-link:hover {
            color: #2563eb !important;
            border-color: #93c5fd;
            background-color: #eff6ff;
        }

        .unified-row-name {
            font-weight: 500;
            color: #0f172a;
            display: block;
            line-height: 1.35;
        }

        .unified-category-cell {
            color: #334155;
            font-size: 0.82rem;
            line-height: 1.35;
        }

        /* Prevent unwanted wraps */
        #unified-table td[data-field="code"],
        #unified-table th[data-field="code"] {
            white-space: nowrap !important;
        }
        #unified-table td[data-field="thematic_name"],
        #unified-table th[data-field="thematic_name"] {
            white-space: nowrap !important;
            color: #475569;
        }
        #unified-table td[data-field="element_type"] {
            white-space: nowrap;
        }

        /* Zoom button */
        .zoom-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border-radius: 6px;
            color: #64748b;
            background-color: transparent;
            border: 1px solid transparent;
            transition: all 0.15s ease;
        }
        .zoom-btn:hover {
            color: #0f172a;
            background-color: #f1f5f9;
            border-color: #cbd5e1;
        }

        /* Selection toolbar styling */
        #unified-select-all,
        #unified-deselect-all {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            color: #475569;
            border-radius: 6px;
            font-size: 0.78rem;
            font-weight: 500;
            padding: 0.28rem 0.65rem;
            transition: all 0.15s ease;
        }
        #unified-select-all:hover,
        #unified-deselect-all:hover {
            background-color: #f1f5f9;
            color: #0f172a;
            border-color: #cbd5e1;
        }
        #unified-selection-status {
            font-size: 0.8rem;
            color: #64748b;
            font-weight: 500;
        }
        #unified-bulk-action-dropdown .dropdown-toggle {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            color: #475569;
            border-radius: 6px;
            font-size: 0.78rem;
            font-weight: 500;
            padding: 0.28rem 0.75rem;
        }
        #unified-bulk-action-dropdown .dropdown-toggle:hover {
            background-color: #f1f5f9;
            color: #0f172a;
            border-color: #cbd5e1;
        }

        /* Pagination bar styling */
        .bootstrap-table.bootstrap5 .fixed-table-pagination {
            padding: 0.65rem 0.25rem 0 0.25rem !important;
            font-size: 0.82rem;
            color: #64748b;
        }
        .bootstrap-table.bootstrap5 .pagination-detail .page-list .btn-group .btn {
            border-radius: 6px;
            border-color: #e2e8f0;
            font-size: 0.8rem;
            padding: 0.25rem 0.6rem;
            background-color: #ffffff;
            color: #334155;
        }
        .bootstrap-table.bootstrap5 .pagination .page-item .page-link {
            border-radius: 6px;
            margin: 0 2px;
            border-color: #e2e8f0;
            color: #334155;
            font-size: 0.8rem;
            padding: 0.25rem 0.55rem;
        }
        .bootstrap-table.bootstrap5 .pagination .page-item.active .page-link {
            background-color: #0f172a;
            border-color: #0f172a;
            color: #ffffff;
        }

    </style>
{% endblock head %}

{% block content %}

{# ─── Modal de filtre ──────────────────────────────────────────────────────── #}
<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>
                    <h5 class="modal-title" id="filterModalLabel">{% translate "Filtrer les assets" %}</h5>
                    <div class="text-muted small" style="font-size: 0.8rem;">{% translate "Sélectionnez les thématiques et critères à afficher 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>
            <div class="modal-body">

                {# Type d'élément #}
                <div class="filter-section">
                    <div class="filter-section-header">
                        <label>{% translate "Type d'élément" %}</label>
                    </div>
                    <div class="filter-options d-flex gap-3 flex-wrap">
                        <div class="filter-option">
                            <input type="checkbox" name="filter-element-type" id="type-cb-assets" value="assets"
                                   {% if preventive_element_type != 'locations' %}checked{% endif %}
                                   {% if preventive_element_type == 'locations' %}disabled{% endif %}>
                            <label for="type-cb-assets"><i class="bi bi-layers me-1 text-primary"></i>{% translate "Assets" %}</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" name="filter-element-type" id="type-cb-locations" value="locations"
                                   {% if preventive_element_type != 'assets' %}checked{% endif %}
                                   {% if preventive_element_type == 'assets' %}disabled{% endif %}>
                            <label for="type-cb-locations"><i class="bi bi-geo-alt me-1 text-info"></i>{% translate "Localisations" %}</label>
                        </div>
                        <div class="filter-option">
                            <input type="checkbox" name="filter-element-type" id="type-cb-management-zones" value="management_zones"
                                   {% if not preventive_element_type %}checked{% endif %}
                                   {% if preventive_element_type %}disabled{% endif %}>
                            <label for="type-cb-management-zones"><i class="bi bi-diagram-3 me-1 text-success"></i>{% translate "Zones de gestion" %}</label>
                        </div>
                    </div>
                </div>

                {# Thématiques #}
                <div class="filter-section">
                    <div class="filter-section-header">
                        <div>
                            <label>{% translate "Thématique" %}</label>
                        </div>
                        <div class="filter-section-buttons">
                            <button type="button" id="thematic-select-all">{% translate "Toutes" %}</button>
                            <button type="button" id="thematic-deselect-all">{% translate "Aucune" %}</button>
                        </div>
                    </div>
                    <div class="thematic-grid">
                        {% for thematic in accessible_thematics %}
                        <div class="thematic-tile">
                            <input type="checkbox" class="thematic-checkbox"
                                   id="thematic-cb-{{ thematic.code }}"
                                   value="{{ thematic.code }}"
                                   {% if thematic.code in selected_thematics %}checked{% endif %}>
                            <label for="thematic-cb-{{ thematic.code }}">
                                {% if thematic.icon %}<i class="bi {{ thematic.icon }} thematic-icon"></i>{% endif %}
                                <span class="thematic-label">{{ thematic.name }}</span>
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                {# Catégories d'assets #}
                <div class="filter-section">
                    <div class="filter-section-header">
                        <label>{% translate "Catégorie d'assets" %}</label>
                        <div class="filter-section-buttons">
                            <button type="button" id="category-select-all">{% translate "Toutes" %}</button>
                            <button type="button" id="category-deselect-all">{% translate "Aucune" %}</button>
                        </div>
                    </div>
                    <div id="category-filter-options" class="filter-options">
                        <span class="text-muted small">{% translate "Sélectionnez d'abord une ou plusieurs thématiques." %}</span>
                    </div>
                </div>

                {# Modèles #}
                <div class="filter-section" id="model-filter-section">
                    <div class="filter-section-header">
                        <label>{% translate "Modèle" %}</label>
                        <div class="filter-section-buttons">
                            <button type="button" id="model-select-all">{% translate "Tous" %}</button>
                            <button type="button" id="model-deselect-all">{% translate "Aucun" %}</button>
                            <button type="button" class="d-none" id="model-filter-toggle"></button>
                        </div>
                    </div>
                    <div id="model-filter-options" class="filter-options">
                        <span class="text-muted small">{% translate "Sélectionnez d'abord une ou plusieurs catégories." %}</span>
                    </div>
                </div>

                {# Filtres conditionnels selon les thématiques #}
                <div class="filter-section">
                    <div class="filter-section-header">
                        <label>{% translate "Filtres thématiques" %}</label>
                    </div>
                    <div id="conditional-filter-options" class="filter-options">
                        <span class="text-muted small">{% translate "Sélectionnez d'abord une ou plusieurs thématiques." %}</span>
                    </div>
                </div>

                {# Options de géométrie #}
                <div class="filter-section">
                    <div class="filter-section-header">
                        <label>{% translate "Options de géométrie" %}</label>
                    </div>
                    <div class="filter-options">
                        <div class="filter-option">
                            <input type="checkbox" name="include-no-geom" id="include-no-geom" checked>
                            <label for="include-no-geom">
                                <i class="bi bi-geo-alt me-1"></i>{% translate "Inclure les assets sans géométrie" %}
                            </label>
                        </div>
                    </div>
                </div>

                {# Statut & Statut de validation #}
                <div class="row g-3 mb-1">
                    <div class="col-md-6">
                        <div class="filter-section h-100 mb-0">
                            <div class="filter-section-header">
                                <label>{% translate "Statut" %}</label>
                            </div>
                            <div class="filter-options">
                                {% for status_value, status_label in asset_status_choices %}
                                <div class="filter-option">
                                    <input type="checkbox" name="filter-status" id="filter-status-{{ status_value }}" value="{{ status_value }}">
                                    <label for="filter-status-{{ status_value }}">{{ status_label }}</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 "Validation" %}</label>
                            </div>
                            <div class="filter-options">
                                {% for validation_status_value, validation_status_label in asset_validation_status_choices %}
                                <div class="filter-option">
                                    <input type="checkbox" name="filter-validation-status" id="filter-validation-status-{{ validation_status_value }}" value="{{ validation_status_value }}">
                                    <label for="filter-validation-status-{{ validation_status_value }}">{{ validation_status_label }}</label>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>

            </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 "Tout effacer" %}
                </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 "Fermer" %}</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 "Appliquer les filtres" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


{# ─── Add chooser modal ────────────────────────────────────────────────────── #}
<div class="modal fade" id="unifiedAddChooserModal" tabindex="-1" aria-labelledby="unifiedAddChooserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="unifiedAddChooserModalLabel">{% translate "Créer un élément" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <div id="unified-add-chooser-alert" class="alert alert-info small mb-3">
                    {% translate "Choisissez d'abord le type d'élément, puis la thématique autorisée." %}
                </div>
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="unified-add-panel h-100">
                            <h6 class="d-flex align-items-center gap-2"><i class="bi bi-layers"></i>{% translate "Asset" %}</h6>
                            <label for="unified-add-asset-thematic" class="form-label small text-muted mb-1">{% translate "Thématique" %}</label>
                            <select id="unified-add-asset-thematic" class="form-select mb-3"></select>
                            <button type="button" id="unified-add-asset-open" class="btn btn-primary w-100">
                                <i class="bi bi-plus-circle me-1"></i>{% translate "Créer un asset" %}
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="unified-add-panel h-100">
                            <h6 class="d-flex align-items-center gap-2"><i class="bi bi-geo-alt"></i>{% translate "Localisation" %}</h6>
                            <label for="unified-add-location-thematic" class="form-label small text-muted mb-1">{% translate "Thématique" %}</label>
                            <select id="unified-add-location-thematic" class="form-select mb-3"></select>
                            <button type="button" id="unified-add-location-open" class="btn btn-outline-primary w-100">
                                <i class="bi bi-plus-circle me-1"></i>{% translate "Créer une localisation" %}
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="unified-add-panel h-100">
                            <h6 class="d-flex align-items-center gap-2"><i class="bi bi-diagram-3 text-success"></i>{% translate "Zone de gestion" %}</h6>
                            <label for="unified-add-management-zone-thematic" class="form-label small text-muted mb-1">{% translate "Thématique" %}</label>
                            <select id="unified-add-management-zone-thematic" class="form-select mb-3"></select>
                            <button type="button" id="unified-add-management-zone-open" class="btn btn-outline-success w-100">
                                <i class="bi bi-plus-circle me-1"></i>{% translate "Créer une zone" %}
                            </button>
                        </div>
                    </div>
                </div>
                <div id="unified-add-chooser-empty" class="text-muted small mt-3 d-none">
                    {% translate "Aucune thématique éditable n'est disponible pour la création." %}
                </div>
            </div>
        </div>
    </div>
</div>

{# ─── Asset create modal ──────────────────────────────────────────────────── #}
<div class="modal fade" id="unifiedAddAssetModal" tabindex="-1" aria-labelledby="unifiedAddAssetModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <form id="unifiedAddAssetForm" class="modal-content">
            {% csrf_token %}
            <input type="hidden" name="thematic_code" id="unified-add-asset-thematic-code">
            <div class="modal-header">
                <h5 class="modal-title" id="unifiedAddAssetModalLabel">{% translate "Créer un asset" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <div id="unifiedAddAssetAlert" class="alert d-none" role="alert"></div>
                <div class="mb-3">
                    <label for="unifiedAddAssetCategory" class="form-label">{% translate "Catégorie" %} <span class="text-danger">*</span></label>
                    <select class="form-select" id="unifiedAddAssetCategory" name="category_id" required>
                        <option value="">{% translate "Sélectionner une catégorie..." %}</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="unifiedAddAssetModel" class="form-label">{% translate "Modèle" %} <span class="text-danger">*</span></label>
                    <select class="form-select" id="unifiedAddAssetModel" name="model_id" required disabled>
                        <option value="">{% translate "Sélectionner d'abord une catégorie..." %}</option>
                    </select>
                </div>
                <div class="mb-3 d-none" id="unifiedAddAssetLocationGroup">
                    <label for="unifiedAddAssetLocation" class="form-label">{% translate "Localisation" %} <span class="text-danger">*</span></label>
                    <select class="form-select" id="unifiedAddAssetLocation" name="location_id" disabled>
                        <option value="">{% translate "Chargement..." %}</option>
                    </select>
                    <div class="form-text text-muted" id="unifiedAddAssetLocationHelp"></div>
                </div>
                <div class="mb-3" id="unifiedAddAssetCodeGroup">
                    <label for="unifiedAddAssetCode" class="form-label">{% translate "Code" %} <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="unifiedAddAssetCode" name="code" maxlength="50" required>
                    <div class="form-text text-muted d-none" id="unifiedAddAssetCodeHelp"></div>
                </div>
                <div class="mb-3">
                    <label for="unifiedAddAssetNameFr" class="form-label">{% translate "Nom" %} (FR)</label>
                    <input type="text" class="form-control" id="unifiedAddAssetNameFr" name="name_fr" maxlength="200">
                </div>
                <div class="mb-3">
                    <label for="unifiedAddAssetNameNl" class="form-label">{% translate "Nom" %} (NL)</label>
                    <input type="text" class="form-control" id="unifiedAddAssetNameNl" name="name_nl" maxlength="200">
                </div>
                <div class="alert alert-info small mb-0">
                    <i class="bi bi-info-circle me-1"></i>{% translate "L'asset sera créé avec le statut 'À approuver'." %}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                <button type="submit" class="btn btn-primary" id="unifiedAddAssetSubmit">
                    <i class="bi bi-plus-circle me-1"></i>{% translate "Créer l'asset" %}
                </button>
            </div>
        </form>
    </div>
</div>

{# ─── Location create modal ───────────────────────────────────────────────── #}
<div class="modal fade" id="unifiedAddLocationModal" tabindex="-1" aria-labelledby="unifiedAddLocationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <form id="unifiedAddLocationForm" class="modal-content">
            {% csrf_token %}
            <input type="hidden" name="thematic_code" id="unified-add-location-thematic-code">
            <input type="hidden" id="unified-add-location-type" name="location_type">
            <div class="modal-header">
                <h5 class="modal-title" id="unifiedAddLocationModalLabel">{% translate "Créer une localisation" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <div id="unifiedAddLocationAlert" class="alert d-none" role="alert"></div>
                <div id="unifiedAddLocationMeta" class="small text-muted mb-3"></div>
                <div id="unifiedAddLocationFields">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                <button type="submit" class="btn btn-success" id="unifiedAddLocationSubmit">
                    <i class="bi bi-plus-circle me-1"></i>{% translate "Créer la localisation" %}
                </button>
            </div>
        </form>
    </div>
</div>

{# ─── Intervention mode banner ───────────────────────────────────────────── #}
{% if preventive_draft_id %}
<div class="alert alert-info d-flex justify-content-between align-items-center py-2 mb-2">
    <span>
        {% translate "Mode sélection intervention préventive" %}
        {% if locked_thematic_code %} — <strong>{{ locked_thematic_code }}</strong>{% endif %}
    </span>
    {% if link_assets_url %}
    <button type="submit" class="btn btn-success btn-sm" id="validate-selection-btn" form="preventive-select-form">
        {% translate "Valider la sélection" %}
    </button>
    {% endif %}
</div>
{% endif %}

<div class="position-relative">
    {# Layout selection buttons + Répertoires - aligned to the right #}
    <div class="position-absolute top-0 end-0 mt-2 d-flex align-items-center gap-2" style="z-index: 10;">
        {# Dropdown Tableaux spécifiques (générique selon les thématiques accessibles) #}
        {% if specific_tables %}
        <div class="dropdown">
            <button class="btn btn-light btn-sm dropdown-toggle rounded-pill px-3 border shadow-sm d-inline-flex align-items-center" 
                    type="button" id="specificTablesDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                {% translate "Répertoires" %}
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-1" aria-labelledby="specificTablesDropdown" style="min-width: 270px;">
                <li><h6 class="dropdown-header text-uppercase small text-muted">{% translate "Répertoires spécifiques" %}</h6></li>
                {% for table in specific_tables %}
                <li>
                    <a class="dropdown-item d-flex align-items-center gap-3 py-2" href="{{ table.url }}">
                        <i class="bi {{ table.icon }} text-primary fs-5"></i>
                        <div>
                            <div class="fw-bold small text-dark">{{ table.title }}</div>
                            {% if table.description %}
                            <div class="text-muted" style="font-size: 0.75rem;">{{ table.description }}</div>
                            {% endif %}
                        </div>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

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

    {# Search widget - perfectly centered horizontally #}
    <div id="assets-search-widget"
         style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; max-width:calc(100% - 360px);">
        <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="assets-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 'Code, nom, type…' %}">
                <button type="button" id="assets-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' %}">
                    <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">
                    <input type="radio" class="btn-check" name="assets-search-mode" id="assets-search-mode-and" value="and" checked>
                    <label class="btn btn-outline-secondary py-0 px-2" for="assets-search-mode-and"
                           data-bs-toggle="tooltip" data-bs-placement="top"
                           title="{% translate 'Tous les mots recherchés doivent être présents' %}">{% translate "ET" %}</label>
                    <input type="radio" class="btn-check" name="assets-search-mode" id="assets-search-mode-or" value="or">
                    <label class="btn btn-outline-secondary py-0 px-2" for="assets-search-mode-or"
                           data-bs-toggle="tooltip" data-bs-placement="top"
                           title="{% translate 'Au moins un des mots recherchés doit être présent' %}">{% translate "OU" %}</label>
                </div>
            </span>
            <button class="btn btn-sm px-3" type="button" id="assets-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>

    <div class="row mt-2" style="height: calc(100vh - 130px);">

        {# ─── Table column ───────────────────────────────────────────────── #}
        <div id="col-table" class="col-md-6 d-flex flex-column" style="max-height: calc(100vh - 130px);">

            {# Tab nav with + and filter buttons #}
            <ul class="nav nav-tabs flex-shrink-0" id="tablesTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" type="button">
                        <i class="bi bi-layers me-1"></i>{% translate "Assets" %}
                    </button>
                </li>
                <div class="my-1 ms-2">
                    <button class="btn btn-light" type="button" id="btn-add-asset"
                            title="{% translate 'Ajouter un asset' %}">
                        <i class="bi bi-plus-circle"></i>
                    </button>
                </div>
                <div class="my-1 ms-1">
                    <button class="btn btn-light position-relative" type="button"
                            data-bs-toggle="modal" data-bs-target="#filterModal"
                            title="{% translate 'Filtres' %}">
                        <i class="bi bi-funnel"></i> {% translate "Filtres" %}
                        <span id="filter-badge" class="position-absolute badge rounded-pill bg-primary d-none">
                            <span id="filter-count">0</span>
                        </span>
                    </button>
                </div>
            </ul>

            {# Tab content #}
            <div class="tab-content d-flex flex-column" style="flex: 1; min-height: 0;">
                <div class="tab-pane fade show active d-flex flex-column" style="flex: 1; min-height: 0; padding-top: 0.5rem;">

                    {# Selection toolbar #}
                    <div class="d-flex gap-2 flex-wrap align-items-center mb-1">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="unified-select-all">{% translate "Tout sélectionner" %}</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="unified-deselect-all">{% translate "Tout désélectionner" %}</button>
                        {% if preventive_draft_id %}
                        <button type="submit" class="btn btn-success btn-sm" form="preventive-select-form">{% translate "Valider la sélection" %}</button>
                        {% endif %}
                        <div id="unified-selection-status" class="text-muted small mb-0">0 {% translate "sélectionné(s)" %}</div>
                        {% if not preventive_draft_id %}
                        <div class="dropdown ms-auto" id="unified-bulk-action-dropdown">
                            <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                {% translate "Action" %}
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="#" id="unified-action-export"
                                       data-bs-toggle="modal" data-bs-target="#unifiedExportModal">
                                        <i class="bi bi-download me-2"></i>{% translate "Exporter" %}
                                    </a>
                                </li>
                                {% if has_bulk_edit_status_permission %}
                                <li>
                                    <a class="dropdown-item" href="#" id="unified-action-bulk-status"
                                       data-bs-toggle="modal" data-bs-target="#bulkStatusModal">
                                        <i class="bi bi-pencil-square me-2"></i>{% translate "Modifier le statut en masse" %}
                                    </a>
                                </li>
                                {% endif %}
                                {% if has_bulk_edit_validation_status_permission %}
                                <li>
                                    <a class="dropdown-item" href="#" id="unified-action-bulk-validation-status"
                                       data-bs-toggle="modal" data-bs-target="#bulkValidationStatusModal">
                                        <i class="bi bi-shield-check me-2"></i>{% translate "Modifier le statut de validation en masse" %}
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </div>
                        {% endif %}
                    </div>

                    {# Table area: spinner overlay + empty state + table #}
                    <div style="position: relative;">

                        {# Spinner overlay — shown on top of existing table content during loading #}
                        <div id="unified-spinner" style="display:none; position:absolute; inset:0; z-index:10; background:rgba(255,255,255,0.75); justify-content:center; align-items:flex-start; padding-top:2rem;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">{% translate "Loading..." %}</span>
                            </div>
                        </div>

                        {# Empty state #}
                        <div id="unified-empty-state" class="text-center py-5">
                            <i class="bi bi-layers fs-1 text-muted"></i>
                            <p class="mt-2">{% translate "Sélectionnez une ou plusieurs thématiques dans les filtres, saisissez une recherche ou zoomez sur la carte." %}</p>
                        </div>

                        {# Table #}
                        <table id="unified-table"
                               class="table table-hover table-sm"
                               data-pagination="true"
                               data-page-size="100"
                               data-click-to-select="true"
                               data-show-columns="true"
                               data-search="false">
                        </table>

                    </div>

                </div>
            </div>
        </div>

        {# ─── Map column ──────────────────────────────────────────────────── #}
        <div id="col-map" class="col-md-6" style="position: relative; margin-top: 50px;">
            <div id="info-panel">
                <div class="panel-header">
                    <button id="info-panel-back" class="btn btn-sm btn-outline-secondary me-2" style="display:none;">
                        <i class="bi bi-arrow-left"></i>
                    </button>
                    <h5 id="info-panel-title" class="mb-0 flex-grow-1"></h5>
                    <span class="panel-close" id="info-panel-close">&times;</span>
                </div>
                <div id="info-panel-content" class="panel-content"></div>
            </div>

            <div id="map" style="position: relative; height: calc(100vh - 200px);">
                <div id="assets-hint" class="small fst-italic position-absolute start-50 translate-middle-x bg-white px-3 py-1 rounded-pill shadow-sm border" style="top: 10px; z-index: 5; visibility: hidden; color: #0d6efd; white-space: nowrap; pointer-events: none;">
                    <i class="bi bi-info-circle me-1"></i>{% translate "Choisissez une catégorie ou zoomez sur la carte pour voir les assets." %}
                </div>
                <div id="totalsOverlay" class="totals-overlay">
                    <div class="totals-toolbar">
                        <strong>{% translate "Totaux des assets" %}</strong>
                        <button id="totalsClose" type="button" class="btn btn-sm btn-outline-secondary">
                            {% translate "Fermer" %}
                        </button>
                    </div>
                    <div id="totalsContent" class="totals-content"></div>
                </div>
            </div>
            <div>
                <button id="totals_button" class="btn btn-light mt-2 mb-1" type="button">{% translate "Totaux" %}</button>
            </div>
        </div>
    </div>
</div>

{% if not preventive_draft_id %}
<div class="modal fade" id="unifiedExportModal" tabindex="-1" aria-labelledby="unifiedExportModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="unifiedExportModalLabel">{% translate "Exporter les assets sélectionnés" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small">{% translate "Choisissez le format d'export :" %}</p>
                <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="unified-export-format" id="unified-export-format-csv" value="csv" checked>
                    <label class="form-check-label" for="unified-export-format-csv">CSV</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="unified-export-format" id="unified-export-format-xlsx" value="xlsx">
                    <label class="form-check-label" for="unified-export-format-xlsx">Excel (XLSX)</label>
                </div>
                <div id="unified-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="unified-confirm-export-btn">{% translate "Exporter" %}</button>
            </div>
        </div>
    </div>
</div>
{% endif %}

{# ─── Modal bulk status ──────────────────────────────────────────────────── #}
{% if has_bulk_edit_status_permission %}
<div class="modal fade" id="bulkStatusModal" tabindex="-1" aria-labelledby="bulkStatusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkStatusModalLabel">{% translate "Modifier le statut en masse" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="bulk-status-select" class="form-label">{% translate "Nouveau statut" %}</label>
                    <select class="form-select" id="bulk-status-select">
                        <option value="">-</option>
                        {% for value, label in asset_status_choices %}
                        <option value="{{ value }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div id="bulk-status-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="bulk-status-confirm-btn">{% translate "Enregistrer" %}</button>
            </div>
        </div>
    </div>
</div>
{% endif %}

{# ─── Modal bulk validation status ──────────────────────────────────────── #}
{% if has_bulk_edit_validation_status_permission %}
<div class="modal fade" id="bulkValidationStatusModal" tabindex="-1" aria-labelledby="bulkValidationStatusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkValidationStatusModalLabel">{% translate "Modifier le statut de validation en masse" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="bulk-validation-status-select" class="form-label">{% translate "Nouveau statut de validation" %}</label>
                    <select class="form-select" id="bulk-validation-status-select">
                        <option value="">-</option>
                        {% for value, label in asset_validation_status_choices %}
                        <option value="{{ value }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div id="bulk-validation-status-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="bulk-validation-status-confirm-btn">{% translate "Enregistrer" %}</button>
            </div>
        </div>
    </div>
</div>
{% endif %}

{# Hidden preventive form #}
{% if preventive_draft_id %}
<form id="preventive-select-form" method="post" action="{{ link_assets_url }}" style="display:none;">
    {% csrf_token %}
    <input type="hidden" name="preventive_draft_id" value="{{ preventive_draft_id }}">
    <input type="hidden" id="preventive-selected-ids" name="selected_ids" value="">
    <input type="hidden" id="preventive-selected-locations-ids" name="preventive_locations_ids" value="">
    <input type="hidden" id="preventive-selected-assets" name="assets" value="[]">
    <input type="hidden" name="preventive_element_type" value="{{ preventive_element_type|default:'locations' }}">
</form>
{% endif %}

{% endblock content %}

{% block script %}
    <script src="{% static 'common/mapbox-gl-draw.js' %}"></script>
    <script src="{% static 'common/layer-switcher-control.js' %}"></script>
    <script>
        window.TERRITORY_MASK_URL = "{% url 'common:get_territory_mask_geojson' %}";
        const preventive_draft_id = "{{ preventive_draft_id|default:'' }}";
        var selected_locations_set = new Set({{ selected_locations_ids|safe }});
        const initial_selected_assets = {{ selected_assets_json|safe }};
        var selected_assets_set = new Set();
        const preventive_element_type = "{{ preventive_element_type|default:'' }}";
        const INITIAL_ASSET_LAYOUT = '{{ request.user.config.assets_list_layout|default:"both" }}';

        const THEMATIC_CONFIG = {{ thematic_config_json|safe }};
        const CONDITIONAL_FILTER_CONFIG = {{ conditional_filter_config_json|safe }};
        const THEMATIC_CATEGORIES = {{ thematic_categories_json|safe }};
        const ADD_MODAL_CONFIG = {{ add_modal_config_json|safe }};
        const SELECTED_THEMATICS = {{ selected_thematics|safe }};
        const HAS_URL_THEMATICS = {% if has_url_thematics %}true{% else %}false{% endif %};
        const SELECTED_CATEGORIES = {{ selected_categories_json|safe }};
        const PREVENTIVE_DRAFT_ID = "{{ preventive_draft_id|default:'' }}";
        const LOCKED_THEMATIC_CODE = "{{ locked_thematic_code|default:'' }}";
        const PREVENTIVE_ELEMENT_TYPE = "{{ preventive_element_type|default:'' }}";
        const SELECTED_ASSETS = {{ selected_assets_json|safe }};
        const SELECTED_LOCATION_IDS = {{ selected_locations_ids|safe }};
        const LINK_ASSETS_URL = "{{ link_assets_url|default:'' }}";
        const AUTOCOMPLETE_STREET_URL = "{% url 'common:autocomplete_street' %}";
        const ASSET_MODELS_BY_CATEGORY_URL_TEMPLATE = "{% url 'assets:get_asset_models' 'THEMATIC_CODE' 0 %}";
        const ASSETS_INDEX_PREFS = {{ assets_index_prefs_json|safe }};
        const DEFAULT_THEMATIC_CODE = "{{ default_thematic_code|default:'' }}";
        const SAVE_ASSETS_PREFS_URL = "{% url 'common:save_assets_index_preferences' %}";
        const exportAssetsUrl = "{% url 'assets:export_assets' %}";
        const bulkEditAssetsUrl = "{% url 'assets:bulk_edit_assets' %}";
        // Static icon URLs for unified_map_layers.js (cannot use the static tag in plain JS)
        const UNIFIED_ICON_URLS = {
            trafficlights:                  "{% static 'assets/traffic_light_icon.svg' %}",
            trafficlightradar:              "{% static 'assets/radar_preventif_icon.svg' %}?v=20260710",
            trafficlightradarpole:          "{% static 'assets/simple_pole_icon.svg' %}",
            trafficlightelectricalcabinet:  "{% static 'assets/electrical-panel.png' %}",
            publiclighting:                 "{% static 'assets/public_lamp_post_icon.svg' %}?v=20260521c",
            publiclightingelectricalcabinet: "{% static 'assets/electrical-panel.png' %}",
            nature:                        "{% static 'assets/nature_tree_icon.svg' %}?v=20260521a",
            structures:                    "{% static 'assets/structures_bridge_tunnel_icon.svg' %}?v=20260522b",
            roaddrain:                     "{% static 'assets/roaddrain_grille_icon.svg' %}?v=20260521a",
            speedbump:                     "{% static 'assets/road_speedbump_icon.svg' %}?v=20260920",
            roadfurniture:                 "{% static 'assets/road_speedbump_icon.svg' %}?v=20260920",
            cleanglasscontainer:           "{% static 'assets/clean_glass_container_icon.svg' %}?v=20260920",
            roadconcreteblockset:          "{% static 'assets/road_concrete_block_icon.svg' %}?v=20260608a",
            naturebench:                    "{% static 'assets/nature_bench_icon.svg' %}",
            artworkfountain:                "{% static 'assets/artwork_fountain_icon.svg' %}?v=20260521a",
            artworkmonument:                "{% static 'assets/artwork_statue_icon.svg' %}?v=20260521a",
            // publiclighting (poteaux, luminaires) uses a dedicated lamp-post SVG
        };
    </script>
    {% include "assets/includes/panel_rendering_functions.html" %}
    <script src="{% static 'common/base_script.js' %}"></script>
    <script src="{% static 'common/base_map.js' %}"></script>
    <script src="{% static 'assets/sign_panels_shared.js' %}?v=20260703c"></script>
    <script src="{% static 'assets/asset_symbology.js' %}?v=20260920_grid_options"></script>
    <script src="{% static 'assets/unified_map_layers.js' %}?v=20260920_grid_options"></script>
    <script src="{% static 'assets/unified_index.js' %}?v=20260920_grid_options"></script>
{% endblock script %}