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

{% block head %}
<link rel="stylesheet" href="{% static 'sign/sign.css' %}">
<style>
    /* Override map height for sign view */
    #sign-map {
        height: calc(100vh - 70px);
        width: 100%;
    }
    
    /* Zoom message styling */
    .zoom-message {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        border-radius: 4px;
        padding: 12px 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        width: auto;
        max-width: 90%;
        margin: 0;
        margin-bottom: 0;
    }
    /* Premium Modern Accordion */
    .accordion-item {
        border: 1px solid rgba(47, 62, 139, 0.08) !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
        box-shadow: 0 2px 6px rgba(47, 62, 139, 0.03) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden;
    }
    
    .accordion-item:hover {
        border-color: rgba(13, 110, 253, 0.2) !important;
        box-shadow: 0 4px 12px rgba(47, 62, 139, 0.06) !important;
    }
    
    .accordion-header {
        transition: background-color 0.2s ease;
        border-radius: 8px 8px 0 0;
    }
    
    .accordion-header:hover {
        background-color: #f8f9fa !important;
    }
    
    .accordion-header:hover .accordion-button {
        background-color: transparent !important;
        color: #0d6efd !important;
    }
    
    .accordion-header.is-open,
    .accordion-header:has(.accordion-button:not(.collapsed)) {
        background-color: rgba(13, 110, 253, 0.05) !important;
        border-bottom: 1px solid rgba(13, 110, 253, 0.1) !important;
    }
    
    .accordion-header.is-open .accordion-button,
    .accordion-header:has(.accordion-button:not(.collapsed)) .accordion-button {
        background-color: transparent !important;
    }

    .accordion-header .accordion-button {
        background-color: transparent !important;
    }
    
    .accordion-button {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #495057 !important;
        background-color: #ffffff !important;
        border: none !important;
        transition: all 0.25s ease !important;
    }
    
    .accordion-button:hover {
        background-color: #f8f9fa !important;
        color: #0d6efd !important;
    }
    
    .accordion-button:not(.collapsed) {
        background-color: rgba(13, 110, 253, 0.05) !important;
        color: #0d6efd !important;
        border-bottom: 1px solid rgba(13, 110, 253, 0.1) !important;
    }
    
    .accordion-button::after {
        background-size: 1rem !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .group-select-all {
        cursor: pointer;
        width: 1.15rem;
        height: 1.15rem;
        transition: all 0.15s ease-in-out;
    }

    .group-select-all:hover {
        transform: scale(1.1);
    }

    .group-select-all:indeterminate {
        background-color: #0d6efd;
        border-color: #0d6efd;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    }
    
    .accordion-body {
        background-color: #fbfbfc !important;
        border-top: none !important;
        padding: 12px !important;
    }
    
    /* Premium Panel Item styling */
    .panel-item, .panel-item-create {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border: 1px solid #e9ecef !important;
        border-radius: 6px !important;
        background-color: #ffffff !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .panel-item:hover, .panel-item-create:hover {
        transform: translateY(-3px) scale(1.05) !important;
        border-color: #0d6efd !important;
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15) !important;
    }
    
    .panel-item.selected, .panel-item-create.selected {
        border: 2.5px solid #0d6efd !important;
        background-color: rgba(13, 110, 253, 0.05) !important;
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.1) !important;
    }

    .panel-img-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 2px !important;
    }

    .panel-text-fallback {
        width: 100%;
        height: 100%;
        max-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
        border: 1px dashed #d0d5dd;
        border-radius: 4px;
        padding: 2px 3px;
        box-sizing: border-box;
        overflow: hidden;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .panel-fallback-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        max-height: 40px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        overflow-wrap: anywhere;
        text-align: center;
        font-weight: 600;
        color: #495057;
        letter-spacing: -0.2px;
    }

    .panel-item.selected .panel-text-fallback,
    .panel-item-create.selected .panel-text-fallback,
    .panel-item.bg-primary .panel-text-fallback,
    .panel-item-create.bg-primary .panel-text-fallback {
        background-color: rgba(13, 110, 253, 0.12) !important;
        border-color: rgba(13, 110, 253, 0.35) !important;
    }

    .panel-item.selected .panel-fallback-text,
    .panel-item-create.selected .panel-fallback-text {
        color: #0d6efd !important;
    }

    .panel-item.bg-primary .panel-fallback-text,
    .panel-item-create.bg-primary .panel-fallback-text {
        color: #ffffff !important;
    }
</style>
{% endblock head %}

{% block main %}
<!-- Main container - No sidebar for sign view -->
<div id="sign-main" class="d-flex">
    {% block content %}
<div class="sign-container">
    <!-- Left Panel (1/3) -->
    <div class="sign-panel">
        <div class="panel-header">
            <ul class="nav nav-tabs" id="panelTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link {% if active_panel == 'tasks' %}active{% endif %}" 
                            id="tasks-tab" data-bs-toggle="tab" data-bs-target="#tasks-panel" 
                            type="button" role="tab" aria-controls="tasks-panel" 
                            aria-selected="{% if active_panel == 'tasks' %}true{% else %}false{% endif %}">
                        <i class="bi bi-list-task me-1"></i>{% translate "Tâches" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link {% if active_panel == 'filters' %}active{% endif %}" 
                            id="filters-tab" data-bs-toggle="tab" data-bs-target="#filters-panel" 
                            type="button" role="tab" aria-controls="filters-panel" 
                            aria-selected="{% if active_panel == 'filters' %}true{% else %}false{% endif %}">
                        <i class="bi bi-funnel me-1"></i>{% translate "Filtres" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link {% if active_panel == 'regulations' %}active{% endif %}" 
                            id="regulations-tab" data-bs-toggle="tab" data-bs-target="#regulations-panel" 
                            type="button" role="tab" aria-controls="regulations-panel" 
                            aria-selected="{% if active_panel == 'regulations' %}true{% else %}false{% endif %}">
                        <i class="bi bi-file-earmark-text me-1"></i>{% translate "Règlements" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="detail-tab" data-bs-toggle="tab" data-bs-target="#detail-panel" 
                            type="button" role="tab" aria-controls="detail-panel" aria-selected="false">
                        <i class="bi bi-pencil me-1"></i>{% translate "Détail" %}
                    </button>
                </li>
                <li class="nav-item ms-auto" role="presentation">
                    <a href="{% url 'sign:ai_demo' %}" class="nav-link text-primary fw-semibold" title="{% translate 'Banc de test IA - Reconnaissance & OCR' %}">
                        <i class="bi bi-camera-fill text-warning me-1"></i>{% translate "Banc IA" %}
                    </a>
                </li>
            </ul>
        </div>
        
        <div class="tab-content panel-content" id="panelTabContent">
            <!-- Tasks Panel -->
            <div class="tab-pane fade {% if active_panel == 'tasks' %}show active{% endif %}" 
                 id="tasks-panel" role="tabpanel" aria-labelledby="tasks-tab">
                <div class="p-3">
                    <h5>{% translate "Tâches à réaliser" %}</h5>
                    <div id="tasks-list" class="tasks-list">
                        <!-- Tasks will be loaded dynamically -->
                        <div class="text-muted text-center py-4">
                            <i class="bi bi-check-circle" style="font-size: 2rem;"></i>
                            <p class="mt-2">{% translate "Aucune tâche en attente" %}</p>
                            <small>{% translate "Utilisez les filtres pour explorer la signalisation" %}</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Filters Panel -->
            <div class="tab-pane fade {% if active_panel == 'filters' %}show active{% endif %}" 
                 id="filters-panel" role="tabpanel" aria-labelledby="filters-tab">
                <div class="p-3">
                    <h5>{% translate "Filtres de recherche" %}</h5>
                    <form id="sign-filter-form" method="get">
                        <div class="mb-3">
                            <label for="municipality" class="form-label d-flex justify-content-between align-items-center">
                                <span>{% translate "Commune" %}</span>
                                <button type="button" id="clear-muni-selection" class="btn btn-link btn-sm p-0 text-decoration-none text-muted" style="font-size: 0.75rem;">
                                    {% translate "Effacer" %}
                                </button>
                            </label>
                            <select name="municipality" id="municipality" class="d-none" multiple>
                                {% for key, value in municipality_choices %}
                                    <option value="{{ key }}" {% if key|stringformat:"s" in selected_municipalities %}selected{% endif %}>
                                        {{ value }}
                                    </option>
                                {% endfor %}
                            </select>

                            <!-- Premium Interactive Map Widget -->
                            <div id="muni-map-card" class="card shadow-sm border border-light-subtle rounded overflow-hidden">
                                <div class="card-header bg-light py-1 px-2 d-flex justify-content-between align-items-center" style="font-size: 0.75rem;">
                                    <span class="text-muted fw-semibold">
                                        <i class="bi bi-map me-1"></i>{% translate "Sélection interactive" %}
                                    </span>
                                    <small class="text-primary hover-opacity" id="muni-zoom-fit" style="cursor: pointer;" title="{% translate 'Recentrer' %}">
                                        <i class="bi bi-arrows-angle-contract"></i>
                                    </small>
                                </div>
                                <div class="card-body p-0" style="height: 280px; position: relative;">
                                    <div id="municipality-filter-map" style="height: 100%; width: 100%;"></div>
                                    <div id="muni-map-loader" class="position-absolute top-0 start-0 d-flex align-items-center justify-content-center bg-white bg-opacity-75 w-100 h-100 transition-opacity" style="z-index: 10;">
                                        <div class="spinner-border spinner-border-sm text-primary" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">{% translate "Type de panneau" %}</label>
                            
                            <!-- Hidden select for form submission -->
                            <select name="panel_type" id="panel_type" class="d-none" multiple>
                                {% for key, value in panel_type_choices %}
                                    <option value="{{ key }}" {% if key|stringformat:"s" in selected_panel_types %}selected{% endif %}>
                                        {{ value }}
                                    </option>
                                {% endfor %}
                            </select>

                            <!-- Accordion for panel categories -->
                            <div class="accordion mb-3 shadow-sm border rounded" id="panel-type-accordion" style="max-height: 500px; overflow-y: auto;">
                                {% for group_key, group_label in panel_types_groups %}
                                    <div class="accordion-item border-0 border-bottom" data-group-key="{{ group_key }}">
                                        <div class="accordion-header d-flex align-items-center bg-white" id="heading-{{ group_key }}">
                                            <div class="ps-2 pe-1 py-1 d-flex align-items-center" title="{% translate 'Sélectionner / désélectionner tout le groupe' %}">
                                                <input class="form-check-input group-select-all m-0" 
                                                       type="checkbox" 
                                                       id="check-group-{{ group_key }}" 
                                                       data-group="{{ group_key }}"
                                                       aria-label="{% translate 'Sélectionner tous les' %} {{ group_label }}">
                                            </div>
                                            <button class="accordion-button collapsed py-2 ps-2 pe-3 fw-bold text-dark shadow-none flex-grow-1" 
                                                    type="button" 
                                                    data-bs-toggle="collapse" 
                                                    data-bs-target="#collapse-{{ group_key }}" 
                                                    aria-expanded="false" 
                                                    aria-controls="collapse-{{ group_key }}"
                                                    data-group="{{ group_key }}">
                                                <span class="group-title me-auto">{{ group_label }}</span>
                                                <span class="badge rounded-pill bg-light text-muted border group-count-badge me-2" id="badge-{{ group_key }}" style="font-size: 0.72rem; font-weight: 500;">0</span>
                                            </button>
                                        </div>
                                        <div id="collapse-{{ group_key }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ group_key }}" data-bs-parent="#panel-type-accordion">
                                            <div class="accordion-body p-2 bg-light border-top">
                                                <!-- Category Action Toolbar -->
                                                <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
                                                    <span class="small text-muted group-status-text" id="status-{{ group_key }}" style="font-size: 0.75rem;">
                                                        0 sélectionné(s)
                                                    </span>
                                                    <div class="btn-group btn-group-sm">
                                                        <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2 select-all-btn" data-group="{{ group_key }}" style="font-size: 0.72rem;">
                                                            <i class="bi bi-check-all me-1"></i>{% translate "Tout cocher" %}
                                                        </button>
                                                        <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2 deselect-all-btn" data-group="{{ group_key }}" style="font-size: 0.72rem;">
                                                            <i class="bi bi-x me-1"></i>{% translate "Tout décocher" %}
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-wrap gap-2 justify-content-start">
                                                    {% for group, panels in panel_types_grouped.items %}
                                                        {% if group == group_key %}
                                                            {% for panel in panels %}
                                                                <div class="panel-item text-center p-1 border rounded bg-white shadow-sm hover-grow" 
                                                                     data-id="{{ panel.id }}" 
                                                                     data-code="{{ panel.code }}"
                                                                     data-group="{{ group_key }}"
                                                                     data-image-url="{{ panel.image_url|default:'' }}"
                                                                     style="cursor: pointer; width: 68px; overflow: hidden; box-sizing: border-box; transition: transform 0.15s ease;"
                                                                     title="{{ panel.code }} - {{ panel.name }}">
                                                                     <div class="panel-img-placeholder mb-1" style="height: 48px; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box;">
                                                                        <!-- Content will be injected by JS -->
                                                                     </div>
                                                                     <div class="small text-truncate fw-bold text-muted" style="font-size: 0.65rem; width: 100%; max-width: 100%; overflow: hidden;">{{ panel.code }}</div>
                                                                </div>
                                                            {% endfor %}
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>

                            <!-- Selected panels list -->
                            <div id="selected-panels-list" class="border rounded p-2 bg-light" style="max-height: 180px; overflow-y: auto;">
                                <div class="text-muted small fst-italic empty-message text-center">{% translate "Aucun type sélectionné" %}</div>
                                <!-- Selected items will be added here via JS -->
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="organization" class="form-label">{% translate "Organisation" %}</label>
                            <select name="organization" id="organization" class="form-select" multiple>
                                {% for key, value in organization_choices %}
                                    <option value="{{ key }}" {% if key|stringformat:"s" in selected_organizations %}selected{% endif %}>
                                        {{ value }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="installation_year" class="form-label">{% translate "Année d'installation" %}</label>
                            <input type="number" class="form-control" id="installation_year" name="installation_year" 
                                   placeholder="{% translate 'Ex: 2020' %}" min="1900" max="2100"
                                   value="{{ selected_year|default:'' }}">
                        </div>
                        
                        <div class="d-flex gap-2">
                            <button type="button" id="apply-filters" class="btn btn-primary">
                                <i class="bi bi-funnel me-1"></i>{% translate "Appliquer" %}
                            </button>
                            <button type="button" id="reset-filters" class="btn btn-secondary">
                                <i class="bi bi-x-circle me-1"></i>{% translate "Réinitialiser" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Regulations Panel -->
            <div class="tab-pane fade {% if active_panel == 'regulations' %}show active{% endif %}" 
                 id="regulations-panel" role="tabpanel" aria-labelledby="regulations-tab">
                <div id="regulations-list-view" class="p-3">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">{% translate "Règlements complémentaires de police" %}</h5>
                        <button type="button" id="create-regulation-inline" class="btn btn-sm btn-success" 
                                title="{% translate 'Créer un nouveau règlement' %}">
                            <i class="bi bi-plus-circle me-1"></i>{% translate "Ajouter" %}
                        </button>
                    </div>

                    <template id="regulation-organization-options">
                        <option value="">--- {% translate "Sélectionner une organisation" %} ---</option>
                        {% for key, value in organization_choices %}
                            <option value="{{ key }}">{{ value }}</option>
                        {% endfor %}
                    </template>
                    <div class="mb-3">
                        <label for="regulations-search" class="form-label">{% translate "Rechercher" %}</label>
                        <input type="search" id="regulations-search" class="form-control" placeholder="{% translate 'Titre, référence ou description' %}">
                        <small id="regulations-limit" class="text-muted d-none">{% translate "Affichage limité à 500 éléments" %}</small>
                    </div>
                    <div id="regulations-table-container">
                        <table id="regulations-table" class="table table-striped table-hover"
                               data-toggle="table"
                               data-pagination="true"
                               data-page-size="50"
                               data-search="false">
                            <thead>
                                <tr>
                                    <th data-field="code">{% translate "Référence" %}</th>
                                    <th data-field="title">{% translate "Titre" %}</th>
                                    <th data-field="status">{% translate "Statut" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Regulations will be loaded here -->
                                <tr>
                                    <td colspan="3" class="text-center text-muted">
                                        {% translate "Aucun règlement à afficher" %}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="regulations-detail-view" class="p-3" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0" id="detail-title">{% translate "Détails du règlement" %}</h5>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-outline-primary" id="edit-regulation-detail" 
                                    title="{% translate 'Modifier ce règlement' %}" style="display: none;">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="close-regulation-detail">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                    </div>
                    <div id="regulation-detail-content">
                        <!-- Detail content will be loaded dynamically -->
                    </div>
                </div>
            </div>
            
            <!-- Detail Panel (shown when clicking on map) -->
            <div class="tab-pane fade" id="detail-panel" role="tabpanel" aria-labelledby="detail-tab">
                <div class="p-3">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">{% translate "Détails" %}</h5>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="close-detail">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                    <div id="detail-content">
                        <!-- Detail content will be loaded dynamically -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Map Panel (2/3) -->
    <div class="sign-map-container" style="position: relative;">
        <div id="sign-map"></div>
        
        <!-- Add Asset Buttons -->
        {% if perms.sign.add_signpole or perms.sign.add_signpanel or user_config.esign_can_edit %}
        <div class="position-absolute top-0 start-0 m-3" style="z-index: 1000; margin-top: 60px !important;">
            <div class="btn-group-vertical bg-white shadow-sm rounded" role="group">
                {% if perms.sign.add_signpole or user_config.esign_can_edit %}
                <button type="button" class="btn btn-light border-bottom" id="btn-add-pole" title="{% translate 'Ajouter un poteau' %}" data-bs-toggle="tooltip" data-bs-placement="right">
                    <i class="bi bi-plus-circle"></i>
                </button>
                {% endif %}
                {% if perms.sign.add_signpanel or user_config.esign_can_edit %}
                <button type="button" class="btn btn-light" id="btn-add-panel" title="{% translate 'Ajouter un panneau' %}" data-bs-toggle="tooltip" data-bs-placement="right">
                    <i class="bi bi-signpost-2"></i>
                </button>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Zoom message -->
        <div id="zoom-message" class="zoom-message alert alert-info" style="display: none;">
            <i class="bi bi-info-circle me-2"></i>
            {% translate "Veuillez zoomer sur la carte pour visualiser les panneaux de signalisation" %}
        </div>
        
    </div>
</div>
    {% endblock content %}
</div>
{% endblock main %}

{% block script %}
<script src="{% url 'javascript-catalog' %}"></script>
<script>
    // Fallbacks in case JS i18n catalog isn't available
    window.gettext = window.gettext || function (msgid) { return msgid; };
    window.ngettext = window.ngettext || function (singular, plural, count) { return count === 1 ? singular : plural; };
    window.pgettext = window.pgettext || function (_context, msgid) { return msgid; };
</script>
<script>
    const signStreetsGeojsonUrl = "{% url 'sign:sign_streets_geojson' %}";
    const municipalitiesGeojsonUrl = "{% url 'sign:municipalities_geojson' %}";
    const signAssetsGeojsonUrl = "{% url 'sign:sign_assets_geojson' %}";
    const signPolesOverviewUrl = "{% url 'sign:sign_poles_overview_geojson' %}";
    let selectedMunicipalities = {{ selected_municipalities|safe|default:"[]" }};
    let selectedPanelTypes = {{ selected_panel_types|safe|default:"[]" }};
    let selectedOrganizations = {{ selected_organizations|safe|default:"[]" }};
    let selectedYear = "{{ selected_year|default:'' }}";
    
    // User permissions
    const userPerms = {
        add_signpole: {% if perms.sign.add_signpole or user_config.esign_can_edit %}true{% else %}false{% endif %},
        add_signpanel: {% if perms.sign.add_signpanel or user_config.esign_can_edit %}true{% else %}false{% endif %},
        change_signpanel: {% if perms.sign.change_signpanel or user_config.esign_can_edit %}true{% else %}false{% endif %},
        change_signpole: {% if perms.sign.change_signpole or user_config.esign_can_edit %}true{% else %}false{% endif %},
    };
</script>
<script>
    // API URLs
    const regulationsSearchUrl = "{% url 'sign:regulations_search' %}";
    const regulationCreateUrl = "{% url 'sign:regulation_create' %}";
    const regulationGenerateDocxBaseUrl = "{% url 'sign:regulation_generate_docx' regulation_id=0 %}".replace('/0/', '/{id}/');
    const regulationEditBaseUrl = "{% url 'sign:regulation_edit' regulation_id=0 %}".replace('/0/', '/{id}/');
</script>

{% comment %} Include panel rendering functions (shared with assets view) {% endcomment %}
{% include "assets/includes/panel_rendering_functions.html" %}

<script src="{% static 'common/base_map.js' %}"></script>
<script src="{% static 'assets/sign_panels_shared.js' %}"></script>
<script src="{% static 'sign/sign.js' %}"></script>

<script>
// Hook into sign map load event to handle panel text sprites
signMap.on('load', function() {
    // Set panel text sprite map reference
    panelTextSpriteMap = signMap;
    
    // Handle style image missing event for panel text sprites
    signMap.on('styleimagemissing', (e) => {
        const missingId = e.id;
        if (!missingId) {
            return;
        }

        // Handle panel text sprites (must come before road-sign check)
        if (missingId.startsWith('panel-text-f34a-') || missingId.startsWith('panel-text-type') || 
            missingId.startsWith('panel-text-fxx-') || missingId.startsWith('panel-text-f33c-') || 
            missingId.startsWith('panel-text-xc-') || missingId.startsWith('panel-text-typexivf-') || 
            missingId.startsWith('panel-text-icr-') || missingId.startsWith('panel-text-zone-')) {
            const hasDefinition = ensurePanelTextDefinitionFromMap(signMap, missingId);
            if (!hasDefinition) {
                console.warn('Aucune définition trouvée pour', missingId);
                return;
            }
            ensurePanelTextSprite(signMap, missingId);
            return;
        }
        
        // Road sign images are handled by sign.js's own listener.
        // Do not handle here to avoid duplicate addImage/updateImage calls.
    });
});

// Hook into asset data loading to enqueue panel text sprites
const originalLoadSignData = loadSignData;
loadSignData = async function() {
    const result = await originalLoadSignData();
    
    // Enqueue panel text sprites after assets are loaded
    try {
        const source = signMap.getSource('sign-assets');
        if (source && source._data && source._data.features) {
            enqueuePanelTextSprites(source._data.features);
        }
    } catch (err) {
        console.warn('Error enqueueing panel text sprites:', err);
    }
    
    return result;
};

// Also hook into loadAssetsForCurrentView
const originalLoadAssetsForCurrentView = loadAssetsForCurrentView;
loadAssetsForCurrentView = async function() {
    const result = await originalLoadAssetsForCurrentView();
    
    // Enqueue panel text sprites after assets are loaded
    try {
        const source = signMap.getSource('sign-assets');
        if (source && source._data && source._data.features) {
            enqueuePanelTextSprites(source._data.features);
        }
    } catch (err) {
        console.warn('Error enqueueing panel text sprites:', err);
    }
    
    return result;
};

    // Regulations table (lazy + server search limited to 500)
    const regulationsTable = document.getElementById('regulations-table');
    const regulationsTbody = regulationsTable ? regulationsTable.querySelector('tbody') : null;
    const regulationsSearchInput = document.getElementById('regulations-search');
    const regulationsLimitNote = document.getElementById('regulations-limit');

    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
        return null;
    }

    function getCSRFToken() {
        const input = document.querySelector('[name=csrfmiddlewaretoken]');
        if (input && input.value) return input.value;
        return getCookie('csrftoken');
    }

    function renderRegulations(rows) {
        if (!regulationsTbody) return;
        if (!rows || rows.length === 0) {
            regulationsTbody.innerHTML = `
                <tr>
                    <td colspan="3" class="text-center text-muted">${gettext('Aucun règlement à afficher')}</td>
                </tr>`;
            return;
        }

        regulationsTbody.innerHTML = rows.map(r => {
            const code = r.code || '—';
            const title = r.title || '—';
            const status = r.status || '—';
            const statusClass = r.status_class ? `bg-${r.status_class}` : 'bg-secondary';
            const editUrl = regulationEditBaseUrl.replace('{id}', r.id);
            return `
                <tr class="regulation-row" data-regulation-id="${r.id}">
                    <td><a href="${editUrl}" class="text-decoration-none regulation-link">${code}</a></td>
                    <td>${title}</td>
                    <td><span class="badge ${statusClass}">${status}</span></td>
                </tr>`;
        }).join('');
    }

    async function fetchRegulations(query = '') {
        if (!regulationsTbody) return;
        try {
            const params = new URLSearchParams();
            if (query) {
                params.set('q', query);
            }
            const resp = await fetch(`${regulationsSearchUrl}?${params.toString()}`, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });
            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
            const data = await resp.json();
            renderRegulations(data.results || []);
            if (regulationsLimitNote) {
                if (data.limited) {
                    regulationsLimitNote.classList.remove('d-none');
                } else {
                    regulationsLimitNote.classList.add('d-none');
                }
            }
        } catch (err) {
            console.error('Failed to load regulations', err);
            regulationsTbody.innerHTML = `
                <tr>
                    <td colspan="3" class="text-danger text-center">${gettext('Erreur de chargement')}</td>
                </tr>`;
        }
    }

    function debounce(fn, delay = 300) {
        let t;
        return (...args) => {
            clearTimeout(t);
            t = setTimeout(() => fn(...args), delay);
        };
    }

    if (regulationsSearchInput && regulationsTbody) {
        const debouncedSearch = debounce((value) => fetchRegulations(value.trim()), 350);
        regulationsSearchInput.addEventListener('input', (e) => {
            debouncedSearch(e.target.value || '');
        });
        // Initial load (last 500)
        fetchRegulations();
    }

    // Event delegation to handle clicking regulation code links
    if (regulationsTable) {
        regulationsTable.addEventListener('click', (e) => {
            const link = e.target.closest('.regulation-link');
            if (link) {
                e.preventDefault();
                const row = link.closest('tr');
                const regulationId = row ? row.dataset.regulationId : null;
                if (regulationId) {
                    loadRegulationDetail(regulationId);
                }
            }
        });
    }

    // Regulation detail management
    const regulationsListView = document.getElementById('regulations-list-view');
    const regulationsDetailView = document.getElementById('regulations-detail-view');
    const closeRegulationDetailBtn = document.getElementById('close-regulation-detail');
    const regulationDetailContent = document.getElementById('regulation-detail-content');
    const createRegulationInlineBtn = document.getElementById('create-regulation-inline');

    window.regulationCreateMode = window.regulationCreateMode || false;
    window.currentCreatingRegulation = window.currentCreatingRegulation || null;

    if (closeRegulationDetailBtn) {
        closeRegulationDetailBtn.addEventListener('click', closeRegulationDetail);
    }

    if (createRegulationInlineBtn) {
        createRegulationInlineBtn.addEventListener('click', (e) => {
            e.preventDefault();
            openRegulationCreate();
        });
    }

    function closeRegulationDetail() {
        if (regulationsListView) regulationsListView.style.display = 'block';
        if (regulationsDetailView) regulationsDetailView.style.display = 'none';
        if (window.regulationCreateMode && window.associatedPanelIds instanceof Set) {
            resetSignAssetsAssociationFlagsForPanelIds(Array.from(window.associatedPanelIds));
        }
        window.regulationEditMode = null;
        window.currentEditingRegulation = null;
        window.regulationCreateMode = false;
        window.currentCreatingRegulation = null;
        // Clear regulations source from map
        clearRegulationPanels();
    }

    function openRegulationCreate() {
        // Reset any current edit/detail state
        window.regulationEditMode = null;
        window.currentEditingRegulation = null;
        window.regulationCreateMode = true;
        window.currentCreatingRegulation = {
            id: null,
            title: '',
            reference: '',
            description: '',
            organization_id: '',
            status: gettext('En préparation'),
            status_class: 'warning',
            panels_count: 0,
            panels: { type: 'FeatureCollection', features: [] }
        };
        window.associatedPanelIds = new Set();
        window.associatedPanelsById = new Map();
        window.currentRegulationId = null;

        if (regulationsListView) regulationsListView.style.display = 'none';
        if (regulationsDetailView) regulationsDetailView.style.display = 'block';

        const detailTitle = document.getElementById('detail-title');
        if (detailTitle) detailTitle.textContent = gettext('Créer un règlement');

        renderRegulationCreateForm();

        // Show an orange overlay for selected panels (local state)
        ensureCreateSelectionOverlay();
        enableCreateRegulationPanelSelection();
    }

    function getOrganizationOptionsHtml() {
        const tpl = document.getElementById('regulation-organization-options');
        return tpl ? tpl.innerHTML : '';
    }

    function renderRegulationCreateForm() {
        if (!regulationDetailContent) return;

        regulationDetailContent.innerHTML = `
            <form id="regulation-create-form">
                <div class="mb-3">
                    <label for="create-title" class="form-label">${gettext('Titre')}</label>
                    <input type="text" class="form-control" id="create-title" value="" required>
                </div>
                <div class="mb-3">
                    <label for="create-reference" class="form-label">${gettext('Référence')}</label>
                    <input type="text" class="form-control" id="create-reference" value="" required>
                </div>
                <div class="mb-3">
                    <label for="create-organization" class="form-label">${gettext('Organisation')} *</label>
                    <select class="form-select" id="create-organization" required>${getOrganizationOptionsHtml()}</select>
                </div>
                <div class="mb-3">
                    <label for="create-description" class="form-label">${gettext('Description')}</label>
                    <textarea class="form-control" id="create-description" rows="4"></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">${gettext('Panneaux associés')}</label>
                    <p><small class="text-muted">${gettext('Cliquez sur la carte pour ajouter/retirer des panneaux')}</small></p>
                    <div id="edit-panels-list" class="list-group" style="max-height: 200px; overflow-y: auto;"></div>
                    <small><span id="panels-count" class="badge bg-primary">0</span> ${gettext('panneau(x) associé(s)')}</small>
                </div>
                <div class="d-flex gap-2">
                    <button type="button" id="create-regulation" class="btn btn-success btn-sm" disabled>
                        <i class="bi bi-plus-circle me-1"></i>${gettext('Créer')}
                    </button>
                    <button type="button" id="cancel-create" class="btn btn-secondary btn-sm">
                        ${gettext('Annuler')}
                    </button>
                </div>
            </form>
        `;

        const titleInput = document.getElementById('create-title');
        const refInput = document.getElementById('create-reference');
        const orgSelect = document.getElementById('create-organization');
        const descInput = document.getElementById('create-description');
        const createBtn = document.getElementById('create-regulation');
        const cancelBtn = document.getElementById('cancel-create');

        const syncDraft = () => {
            const draft = window.currentCreatingRegulation;
            if (!draft) return;
            draft.title = (titleInput?.value || '').trim();
            draft.reference = (refInput?.value || '').trim();
            draft.organization_id = (orgSelect?.value || '').trim();
            draft.description = (descInput?.value || '').trim();
            updateCreateModeButtons();
        };

        titleInput?.addEventListener('input', syncDraft);
        refInput?.addEventListener('input', syncDraft);
        orgSelect?.addEventListener('change', syncDraft);
        descInput?.addEventListener('input', syncDraft);

        createBtn?.addEventListener('click', createRegulationFromCreateMode);
        cancelBtn?.addEventListener('click', cancelCreateMode);

        // Initial list
        updateCreateModeUIFromState();
        updateCreateModeButtons();
    }

    function cancelCreateMode() {
        if (window.associatedPanelIds instanceof Set) {
            resetSignAssetsAssociationFlagsForPanelIds(Array.from(window.associatedPanelIds));
        }
        window.regulationCreateMode = false;
        window.currentCreatingRegulation = null;
        window.regulationEditMode = null;
        window.currentEditingRegulation = null;
        window.associatedPanelIds = new Set();
        window.associatedPanelsById = new Map();
        clearRegulationPanels();
        if (regulationsListView) regulationsListView.style.display = 'block';
        if (regulationsDetailView) regulationsDetailView.style.display = 'none';
        fetchRegulations();
    }

    function updateCreateModeButtons() {
        if (!window.regulationCreateMode) return;
        const draft = window.currentCreatingRegulation;
        const createBtn = document.getElementById('create-regulation');
        if (!draft || !createBtn) return;
        const hasRequired = !!draft.title && !!draft.reference && !!draft.organization_id;
        createBtn.disabled = !hasRequired;
    }

    function updateCreateModeUIFromState() {
        if (!window.regulationCreateMode) return;
        const draft = window.currentCreatingRegulation;
        if (!draft) return;
        draft.panels = getCurrentAssociatedPanelsFeatureCollection();
        draft.panels_count = (window.associatedPanelIds instanceof Set) ? window.associatedPanelIds.size : (draft.panels.features || []).length;
        updateEditPanelsList(draft);
        updateCreateModeButtons();
        refreshRegulationOverlayFromState('create');
    }

    function ensureRegulationStateFromReg(reg) {
        window.associatedPanelIds = new Set((reg.panels && reg.panels.features ? reg.panels.features : []).map(f => Number(f.id)));
        window.associatedPanelsById = new Map(
            (reg.panels && reg.panels.features ? reg.panels.features : []).map(f => [Number(f.id), f])
        );
        window.currentRegulationId = reg.id;
        if (window.currentEditingRegulation && window.currentEditingRegulation.id === reg.id) {
            window.currentEditingRegulation.panels = reg.panels;
            window.currentEditingRegulation.panels_count = reg.panels_count;
        }
    }

    function getCurrentAssociatedPanelsFeatureCollection() {
        const map = window.associatedPanelsById instanceof Map ? window.associatedPanelsById : new Map();
        return {
            type: 'FeatureCollection',
            features: Array.from(map.values())
        };
    }

    function refreshRegulationOverlayFromState(regulationId) {
        if (!currentRegulationSource) return;
        const expectedSource = (regulationId === 'create') ? 'regulation-panels-create' : `regulation-panels-${regulationId}`;
        if (currentRegulationSource !== expectedSource) return;
        try {
            const src = signMap.getSource(currentRegulationSource);
            if (src) {
                src.setData(getCurrentAssociatedPanelsFeatureCollection());
            }
        } catch (err) {
            console.warn('Error refreshing regulation overlay:', err);
        }
    }

    function setSignAssetsAssociatedFlag(panelId, isAssociated) {
        try {
            const source = signMap.getSource('sign-assets');
            if (!source || !source._data || !source._data.features) return;
            let changed = false;
            for (const f of source._data.features) {
                if (Number(f.id) === Number(panelId)) {
                    if (f.properties) {
                        f.properties.is_associated = !!isAssociated;
                        changed = true;
                    }
                    break;
                }
            }
            if (changed) {
                source.setData(source._data);
            }
        } catch (err) {
            console.warn('Error updating sign-assets association flag:', err);
        }
    }

    function resetSignAssetsAssociationFlagsForPanelIds(panelIds) {
        try {
            if (!panelIds) return;
            for (const pid of panelIds) {
                setSignAssetsAssociatedFlag(pid, false);
            }
        } catch (err) {
            // ignore
        }
    }

    function updateEditModeUIFromState(regulationId) {
        if (!window.currentEditingRegulation || window.currentEditingRegulation.id !== regulationId) return;
        const reg = window.currentEditingRegulation;
        reg.panels = getCurrentAssociatedPanelsFeatureCollection();
        reg.panels_count = (window.associatedPanelIds instanceof Set) ? window.associatedPanelIds.size : (reg.panels.features || []).length;
        updateEditPanelsList(reg);

        const submitBtn = document.getElementById('submit-regulation');
        if (submitBtn) {
            submitBtn.disabled = false;
        }
    }

    function buildRegulationPanelFeatureFromSignAssetFeature(panelFeature) {
        const pid = Number(panelFeature && panelFeature.id);
        if (!Number.isFinite(pid)) return null;
        const props = panelFeature.properties || {};
        return {
            type: 'Feature',
            id: pid,
            geometry: panelFeature.geometry || null,
            properties: {
                code: props.code || '',
                panel_type: props.panel_type || '',
                panel_text: props.panel_text || '',
                panel_icon_image: props.panel_icon_image || null,
                street: props.street || '',
            }
        };
    }

    window.regulationAssociationInFlight = window.regulationAssociationInFlight || new Set();

    async function loadRegulationDetail(regulationId, keepEditing = false, options = { fitBounds: true }) {
        const detailUrl = `{% url 'sign:regulation_detail' regulation_id=0 %}`.replace(/0\/$/, `${regulationId}/`);
        try {
            const resp = await fetch(detailUrl, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });
            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
            const reg = await resp.json();

            ensureRegulationStateFromReg(reg);
            
            // Show detail view
            if (regulationsListView) regulationsListView.style.display = 'none';
            if (regulationsDetailView) regulationsDetailView.style.display = 'block';
            
            // Render detail (or edit) depending on mode
            if (keepEditing && reg.status_class === 'warning') {
                renderRegulationDetail(reg); // ensures title/status updated
                switchToEditMode(reg);
            } else {
                renderRegulationDetail(reg);
            }
            
            // Add panels to map and optionally zoom
            showRegulationPanels(reg, options);
            
        } catch (err) {
            console.error('Failed to load regulation detail', err);
            if (regulationDetailContent) {
                regulationDetailContent.innerHTML = `<div class="alert alert-danger">${gettext('Erreur de chargement')}</div>`;
            }
        }
    }

    function renderRegulationDetail(reg) {
        if (!regulationDetailContent) return;
        
        const detailTitle = document.getElementById('detail-title');
        if (detailTitle) detailTitle.textContent = reg.reference ? `${reg.reference} - ${reg.title}` : reg.title;
        
        const statusClass = reg.status_class ? `bg-${reg.status_class}` : 'bg-secondary';
        const decisionDate = reg.decision_date ? new Date(reg.decision_date).toLocaleDateString() : '—';
        
        // Show/hide edit button based on status
        const editBtn = document.getElementById('edit-regulation-detail');
        if (editBtn) {
            if (reg.status_class === 'warning') {  // 'in_preparation' status
                editBtn.style.display = 'inline-block';
                editBtn.onclick = (e) => {
                    e.preventDefault();
                    window.location.href = regulationEditBaseUrl.replace('{id}', reg.id);
                };
            } else {
                editBtn.style.display = 'none';
            }
        }
        
        let panelsHtml = '';
        if (reg.panels && reg.panels.features && reg.panels.features.length > 0) {
            const abrogatedCount = reg.abrogated_count || 0;
            const abrogatedLegend = abrogatedCount > 0
                ? `<span class="ms-2 badge" style="background:#6f42c1;font-size:.75rem;"><i class="bi bi-slash-circle me-1"></i>${abrogatedCount} {% translate "à abroger" %}</span>`
                : '';
            panelsHtml = `
                <h6 class="mt-3">{% translate "Panneaux associés" %} (${reg.panels_count})${abrogatedLegend}</h6>
                <p class="text-muted small mb-1"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#ff7f00;border:2px solid #fff;margin-right:4px;"></span>{% translate "Associé" %}&ensp;<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#6f42c1;border:2px solid #fff;margin-right:4px;"></span>{% translate "À abroger" %}</p>
                <div id="regulation-panels-readonly-list" class="list-group"></div>`;
        }
        
        regulationDetailContent.innerHTML = `
            <div class="mb-3">
                <h6 class="text-muted">{% translate "Titre" %}</h6>
                <p>${reg.title}</p>
            </div>
            <div class="mb-3">
                <h6 class="text-muted">{% translate "Référence" %}</h6>
                <p>${reg.reference || '—'}</p>
            </div>
            <div class="mb-3">
                <h6 class="text-muted">{% translate "Statut" %}</h6>
                <p><span class="badge ${statusClass}">${reg.status}</span></p>
            </div>
            <div class="mb-3">
                <h6 class="text-muted">{% translate "Date de décision" %}</h6>
                <p>${decisionDate}</p>
            </div>
            <div class="mb-3">
                <h6 class="text-muted">{% translate "Organisation" %}</h6>
                <p>${reg.organization}</p>
            </div>
            <div class="mb-3">
                <h6 class="text-muted">{% translate "Description" %}</h6>
                <p>${reg.description || '—'}</p>
            </div>
            ${panelsHtml}
        `;

        // Render readonly list with icons (and reconstructed panels when no SVG/PNG exists)
        if (reg.panels && reg.panels.features && reg.panels.features.length > 0) {
            const listContainer = document.getElementById('regulation-panels-readonly-list');
            if (listContainer) {
                renderReadonlyPanelsList(listContainer, reg.panels.features);
            }
        }
    }

    function buildPanelPreviewElement(props) {
        // Prefer a static road sign image when available, fallback to a reconstructed canvas
        const iconImg = buildPanelIconElement(props?.panel_icon_image);
        iconImg.style.height = '28px';
        iconImg.style.width = '28px';

        const panelType = (props?.panel_type || '').toString();
        const panelText = (props?.panel_text || '').toString();

        const needsReconstruction = !!panelType && (
            panelType.toUpperCase().startsWith('TYPE') ||
            panelType.toUpperCase() === 'FXX' ||
            panelType.toUpperCase() === 'XC' ||
            panelType.toUpperCase() === 'ICR' ||
            panelType.toUpperCase().startsWith('Z') ||
            panelType.toUpperCase() === 'F33C' ||
            panelType.toUpperCase() === 'F35'
        );

        if (!needsReconstruction) {
            return iconImg;
        }

        // Build a sprite-like canvas using the shared rendering functions
        try {
            const safeText = (panelText || '').toString().slice(0, 80);
            const spriteId = `rcp-preview-${panelType}-${safeText.replace(/[^a-zA-Z0-9]+/g, '-').toLowerCase()}`.slice(0, 64);
            const tmpProps = {
                panel_type: panelType,
                panel_text: panelText,
                panel_text_can_render: true,
                panel_text_image_id: spriteId,
                // orientation may be absent; OK
            };

            const spriteKey = registerPanelTextDefinitionFromProperties(tmpProps);
            if (!spriteKey) {
                return iconImg;
            }

            const def = (typeof panelTextSpriteDefinitions?.get === 'function') ? panelTextSpriteDefinitions.get(spriteKey) : null;
            if (!def || !def.lines) {
                return iconImg;
            }

            const payload = buildPanelTextCanvasPayload(def.lines, def.style || {});
            if (!payload || !payload.data) {
                return iconImg;
            }

            const canvas = document.createElement('canvas');
            canvas.width = payload.width;
            canvas.height = payload.height;
            const ctx = canvas.getContext('2d');
            const imgData = new ImageData(payload.data, payload.width, payload.height);
            ctx.putImageData(imgData, 0, 0);

            const out = document.createElement('img');
            out.src = canvas.toDataURL('image/png');
            out.style.height = '28px';
            out.style.width = '28px';
            out.style.objectFit = 'contain';
            out.style.marginRight = '8px';
            return out;
        } catch (err) {
            return iconImg;
        }
    }

    function renderReadonlyPanelsList(container, features) {
        container.innerHTML = '';
        features.forEach(f => {
            const a = document.createElement('a');
            a.href = '#';
            const props = f.properties || {};
            const isAbrogated = !!props.is_abrogated;

            if (isAbrogated) {
                a.className = 'list-group-item list-group-item-action';
                a.style.background = '#f3e8ff';
                a.style.borderLeft = '3px solid #6f42c1';
            } else {
                a.className = 'list-group-item list-group-item-action';
            }

            const left = document.createElement('div');
            left.style.display = 'flex';
            left.style.alignItems = 'center';

            left.appendChild(buildPanelPreviewElement(props));

            const textDiv = document.createElement('div');
            const code = props.code || '';
            const panelType = props.panel_type || '';
            const street = props.street || '';
            const abrogatedBadge = isAbrogated
                ? `<span class="badge ms-1" style="background:#6f42c1;font-size:.7rem;">{% translate "À abroger" %}</span>`
                : '';
            textDiv.innerHTML = `<strong>${code}</strong>${abrogatedBadge}<br><small class="text-muted">${panelType} • ${street}</small>`;
            left.appendChild(textDiv);

            a.appendChild(left);
            container.appendChild(a);
        });
    }

    // Switch to edit mode for regulation
    function switchToEditMode(reg) {
        if (!regulationDetailContent) return;
        
        const statusClass = reg.status_class ? `bg-${reg.status_class}` : 'bg-secondary';
        const decisionDate = reg.decision_date ? new Date(reg.decision_date).toLocaleDateString() : '—';
        
        regulationDetailContent.innerHTML = `
            <form id="regulation-edit-form">
                <div class="mb-3">
                    <label for="edit-title" class="form-label">{% translate "Titre" %}</label>
                    <input type="text" class="form-control" id="edit-title" value="${reg.title}">
                </div>
                <div class="mb-3">
                    <label for="edit-reference" class="form-label">{% translate "Référence" %}</label>
                    <input type="text" class="form-control" id="edit-reference" value="${reg.reference || ''}">
                </div>
                <div class="mb-3">
                    <label for="edit-description" class="form-label">{% translate "Description" %}</label>
                    <textarea class="form-control" id="edit-description" rows="4">${reg.description || ''}</textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">{% translate "Panneaux associés" %}</label>
                    <p><small class="text-muted">{% translate "Cliquez sur la carte pour ajouter/retirer des panneaux" %}</small></p>
                    <div id="edit-panels-list" class="list-group" style="max-height: 200px; overflow-y: auto;">
                        <!-- Panels list will be populated here -->
                    </div>
                    <small><span id="panels-count" class="badge bg-primary">${reg.panels_count || 0}</span> {% translate "panneau(x) associé(s)" %}</small>
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    <button type="button" id="save-regulation" class="btn btn-primary btn-sm">
                        <i class="bi bi-check2 me-1"></i>{% translate "Enregistrer" %}
                    </button>
                    <button type="button" id="submit-regulation" class="btn btn-success btn-sm">
                        <i class="bi bi-send me-1"></i>{% translate "Soumettre pour approbation" %}
                    </button>
                    <a href="${regulationEditBaseUrl.replace('{id}', reg.id)}" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-pencil-square me-1"></i>{% translate "Rédiger le règlement" %}
                    </a>
                    <button type="button" id="cancel-edit" class="btn btn-secondary btn-sm">
                        {% translate "Annuler" %}
                    </button>
                </div>
            </form>
        `;
        
        // Store current regulation for editing
        window.currentEditingRegulation = reg;
        ensureRegulationStateFromReg(reg);
        
        // Populate panels list
        updateEditPanelsList(reg);
        
        // Setup event handlers
        document.getElementById('save-regulation').addEventListener('click', saveRegulationChanges);
        document.getElementById('submit-regulation').addEventListener('click', submitRegulationForApproval);
        document.getElementById('cancel-edit').addEventListener('click', cancelEditMode);
        
        // Enable panel selection mode on map
        enableRegulationPanelSelection(reg.id);
    }

    // Build an <img> element with robust fallbacks similar to map sprites
    function buildPanelIconElement(panelIconImage) {
        const img = document.createElement('img');
        img.style.height = '26px';
        img.style.width = '26px';
        img.style.objectFit = 'contain';
        img.style.marginRight = '8px';
        const placeholderSvg = 'data:image/svg+xml;utf8,' + encodeURIComponent(
            `<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
                <rect x="1" y="1" width="24" height="24" rx="3" ry="3" fill="#f8f9fa" stroke="#ced4da"/>
                <text x="13" y="17" text-anchor="middle" font-size="14" font-family="sans-serif" fill="#6c757d">?</text>
            </svg>`
        );

        if (!panelIconImage) {
            img.src = placeholderSvg;
            return img;
        }
        const base = panelIconImage.replace('road-sign-', '') || panelIconImage;
        const upperBase = base.toUpperCase();
        const titleBase = base.charAt(0).toUpperCase() + base.slice(1).toLowerCase();
        const lowerBase = base.toLowerCase();
        
        const variations = [
            `${upperBase}.svg`,
            `${upperBase}.png`
        ];
        
        if (titleBase !== upperBase) {
            variations.push(`${titleBase}.svg`, `${titleBase}.png`);
        }
        if (lowerBase !== upperBase && lowerBase !== titleBase) {
            variations.push(`${lowerBase}.svg`, `${lowerBase}.png`);
        }
        const baseUrl = '/static/assets/road_signs/2025/';
        let idx = 0;
        const tryNext = () => {
            if (idx >= variations.length) {
                img.onerror = null;
                img.src = placeholderSvg;
                return;
            }
            img.src = baseUrl + variations[idx];
            idx += 1;
        };
        img.onerror = tryNext;
        tryNext();
        return img;
    }

    function updateEditPanelsList(reg) {
        const listContainer = document.getElementById('edit-panels-list');
        if (!listContainer) return;

        const panelsCountBadge = document.getElementById('panels-count');
        if (panelsCountBadge) {
            panelsCountBadge.textContent = (reg.panels_count || 0);
        }
        
        if (!reg.panels || !reg.panels.features || reg.panels.features.length === 0) {
            listContainer.innerHTML = '<div class="text-muted text-center py-2">{% translate "Aucun panneau associé" %}</div>';
            return;
        }
        
        listContainer.innerHTML = '';
        reg.panels.features.forEach(f => {
            const container = document.createElement('div');
            container.className = 'list-group-item d-flex justify-content-between align-items-center';

            const left = document.createElement('div');
            left.style.display = 'flex';
            left.style.alignItems = 'center';

            const iconElement = buildPanelIconElement(f.properties.panel_icon_image);
            if (iconElement) {
                left.appendChild(iconElement);
            }

            const panelType = f.properties.panel_type || '';
            const street = f.properties.street || '';
            const code = f.properties.code || '';

            const textDiv = document.createElement('div');
            textDiv.innerHTML = `<strong>${code}</strong><br><small class="text-muted">${panelType} • ${street}</small>`;
            left.appendChild(textDiv);

            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'btn btn-sm btn-outline-danger';
            btn.innerHTML = '<i class="bi bi-x"></i>';
            if (window.regulationCreateMode || !reg.id) {
                btn.addEventListener('click', () => removeCreateModePanel(f.id));
            } else {
                btn.addEventListener('click', () => removeRegulationPanel(reg.id, f.id));
            }

            container.appendChild(left);
            container.appendChild(btn);
            listContainer.appendChild(container);
        });
    }

    function ensureCreateSelectionOverlay() {
        try {
            clearRegulationPanels();
            const sourceId = 'regulation-panels-create';
            currentRegulationSource = sourceId;

            if (signMap.getSource(sourceId)) {
                signMap.getSource(sourceId).setData(getCurrentAssociatedPanelsFeatureCollection());
            } else {
                signMap.addSource(sourceId, {
                    type: 'geojson',
                    data: getCurrentAssociatedPanelsFeatureCollection()
                });
            }

            const layerId = `${sourceId}-layer`;
            if (!signMap.getLayer(layerId)) {
                signMap.addLayer({
                    id: layerId,
                    type: 'circle',
                    source: sourceId,
                    paint: {
                        'circle-radius': [
                            'interpolate',
                            ['linear'],
                            ['zoom'],
                            10, 6,
                            18, 12
                        ],
                        'circle-color': '#ff7f00',
                        'circle-opacity': 0.8,
                        'circle-stroke-width': 2,
                        'circle-stroke-color': '#fff'
                    }
                });
            }
        } catch (err) {
            console.warn('Error creating create-mode overlay:', err);
        }
    }

    function enableCreateRegulationPanelSelection() {
        window.regulationEditMode = 'create';

        // Disable default click behavior while selecting panels
        signMap.off('click', 'sign-panels-circles');
        signMap.off('click', 'sign-panels-symbols');
        signMap.off('click', 'sign-poles');
        signMap.off('click', 'sign-poles-vertical');

        signMap.on('click', 'sign-panels-circles', (e) => handleCreateRegulationPanelClick(e));
        signMap.on('click', 'sign-panels-symbols', (e) => handleCreateRegulationPanelClick(e));
        signMap.on('click', 'sign-poles', (e) => handleCreateRegulationPoleClick(e));
        signMap.on('click', 'sign-poles-vertical', (e) => handleCreateRegulationPoleClick(e));
    }

    function handleCreateRegulationPanelClick(e) {
        if (!window.regulationCreateMode) return;
        let feature = null;
        if (e && Array.isArray(e.features) && e.features.length > 0) {
            feature = e.features[0];
        } else if (e && e.point && typeof signMap?.queryRenderedFeatures === 'function') {
            const candidates = signMap.queryRenderedFeatures(e.point, {
                layers: ['sign-panels-symbols', 'sign-panels-circles']
            });
            if (Array.isArray(candidates) && candidates.length > 0) {
                feature = candidates[0];
            }
        }
        if (!feature) return;

        const panelId = Number(feature.id);
        if (!Number.isFinite(panelId)) return;

        const assocMap = window.associatedPanelsById instanceof Map ? window.associatedPanelsById : new Map();
        const assocSet = window.associatedPanelIds instanceof Set ? window.associatedPanelIds : new Set();

        if (assocSet.has(panelId)) {
            assocSet.delete(panelId);
            assocMap.delete(panelId);
            setSignAssetsAssociatedFlag(panelId, false);
        } else {
            assocSet.add(panelId);
            const feat = buildRegulationPanelFeatureFromSignAssetFeature(feature);
            if (feat) assocMap.set(panelId, feat);
            setSignAssetsAssociatedFlag(panelId, true);
        }

        window.associatedPanelIds = assocSet;
        window.associatedPanelsById = assocMap;
        updateCreateModeUIFromState();
    }

    function handleCreateRegulationPoleClick(e) {
        if (!window.regulationCreateMode) return;
        if (!e || !e.features || e.features.length === 0) return;

        const poleIdRaw = e.features[0].id;
        const poleId = (typeof poleIdRaw === 'string') ? poleIdRaw : String(poleIdRaw);

        const source = signMap.getSource('sign-assets');
        if (!source || !source._data || !source._data.features) return;

        const panelsOnPole = source._data.features.filter(f =>
            f.properties.asset_type === 'signpanel' &&
            String(f.properties.pole_id) === poleId
        );
        if (panelsOnPole.length === 0) return;

        const assocMap = window.associatedPanelsById instanceof Map ? window.associatedPanelsById : new Map();
        const assocSet = window.associatedPanelIds instanceof Set ? window.associatedPanelIds : new Set();
        const allAssociated = panelsOnPole.every(p => assocSet.has(Number(p.id)));
        const action = allAssociated ? 'remove' : 'add';

        if (action === 'add') {
            for (const p of panelsOnPole) {
                const pid = Number(p.id);
                if (!Number.isFinite(pid)) continue;
                assocSet.add(pid);
                const feat = buildRegulationPanelFeatureFromSignAssetFeature(p);
                if (feat) assocMap.set(pid, feat);
                setSignAssetsAssociatedFlag(pid, true);
            }
        } else {
            for (const p of panelsOnPole) {
                const pid = Number(p.id);
                if (!Number.isFinite(pid)) continue;
                assocSet.delete(pid);
                assocMap.delete(pid);
                setSignAssetsAssociatedFlag(pid, false);
            }
        }

        window.associatedPanelIds = assocSet;
        window.associatedPanelsById = assocMap;
        updateCreateModeUIFromState();
    }

    function removeCreateModePanel(panelId) {
        if (!window.regulationCreateMode) return;
        const pid = Number(panelId);
        if (!Number.isFinite(pid)) return;
        const assocMap = window.associatedPanelsById instanceof Map ? window.associatedPanelsById : new Map();
        const assocSet = window.associatedPanelIds instanceof Set ? window.associatedPanelIds : new Set();
        assocSet.delete(pid);
        assocMap.delete(pid);
        window.associatedPanelIds = assocSet;
        window.associatedPanelsById = assocMap;
        setSignAssetsAssociatedFlag(pid, false);
        updateCreateModeUIFromState();
    }

    async function createRegulationFromCreateMode() {
        if (!window.regulationCreateMode) return;
        const draft = window.currentCreatingRegulation;
        if (!draft) return;

        const title = (draft.title || '').trim();
        const reference = (draft.reference || '').trim();
        const description = (draft.description || '').trim();
        const organizationId = (draft.organization_id || '').trim();
        const panelIds = (window.associatedPanelIds instanceof Set) ? Array.from(window.associatedPanelIds) : [];

        if (!title || !reference) {
            alert(gettext('Le titre et la référence sont obligatoires.'));
            return;
        }
        const btn = document.getElementById('create-regulation');
        if (btn) btn.disabled = true;

        try {
            const formData = new FormData();
            formData.append('title', title);
            formData.append('reference', reference);
            formData.append('description', description);
            if (organizationId) {
                formData.append('organization', organizationId);
            }

            const resp = await fetch(regulationCreateUrl, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCSRFToken()
                },
                body: formData
            });

            const data = await resp.json().catch(() => ({}));
            if (!resp.ok || !data || !data.id) {
                throw new Error(data?.error || `HTTP ${resp.status}`);
            }

            const newRegId = Number(data.id);
            if (!Number.isFinite(newRegId)) {
                throw new Error(gettext('Création impossible (id invalide).'));
            }

            // Persist panel associations (single request)
            const bulkResp = await fetch(`/sign/regulations/${newRegId}/panels/bulk_update/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCSRFToken()
                },
                body: JSON.stringify({ action: 'add', panel_ids: panelIds })
            });
            if (!bulkResp.ok) {
                console.warn('Bulk association failed:', bulkResp.status);
            }

            // Exit create mode and reload detail in edit mode (no navigation, same page)
            window.regulationCreateMode = false;
            window.currentCreatingRegulation = null;
            await loadRegulationDetail(newRegId, true, { fitBounds: false });
            fetchRegulations();
        } catch (err) {
            console.error('Create regulation failed', err);
            alert(err?.message || gettext('Erreur lors de la création'));
        } finally {
            if (btn) {
                // Recompute disabled state
                updateCreateModeButtons();
            }
        }
    }

    function enableRegulationPanelSelection(regulationId) {
        // Modify map behavior to allow panel selection
        window.regulationEditMode = regulationId;
        
        // Override panel click behavior for edit mode
        signMap.off('click', 'sign-panels-circles');
        signMap.off('click', 'sign-panels-symbols');
        signMap.off('click', 'sign-poles');
        signMap.off('click', 'sign-poles-vertical');
        
        // Panel clicks: toggle association
        signMap.on('click', 'sign-panels-circles', (e) => handleRegulationPanelClick(regulationId, e));
        signMap.on('click', 'sign-panels-symbols', (e) => handleRegulationPanelClick(regulationId, e));
        
        // Pole clicks: select/deselect all panels on the pole
        signMap.on('click', 'sign-poles', (e) => handleRegulationPoleClick(regulationId, e));
        signMap.on('click', 'sign-poles-vertical', (e) => handleRegulationPoleClick(regulationId, e));
    }

    async function handleRegulationPoleClick(regulationId, e) {
        if (e.features.length === 0) return;

        const poleIdRaw = e.features[0].id;
        const poleId = (typeof poleIdRaw === 'string') ? poleIdRaw : String(poleIdRaw);
        
        // Get all panels from the current map data for this pole
        const source = signMap.getSource('sign-assets');
        if (!source || !source._data || !source._data.features) return;
        
        const panelsOnPole = source._data.features.filter(f =>
            f.properties.asset_type === 'signpanel' &&
            String(f.properties.pole_id) === poleId
        );
        
        if (panelsOnPole.length === 0) return;
        
        const associatedIds = window.associatedPanelIds instanceof Set ? window.associatedPanelIds : new Set();
        const allAssociated = panelsOnPole.every(p => associatedIds.has(Number(p.id)));
        const action = allAssociated ? 'remove' : 'add';

        // De-dupe rapid double clicks / multiple layer triggers
        const poleFlightKey = `${regulationId}:pole:${poleId}`;
        if (window.regulationAssociationInFlight.has(poleFlightKey)) return;
        window.regulationAssociationInFlight.add(poleFlightKey);
        
        try {
            const panelIds = panelsOnPole.map(p => Number(p.id)).filter(Number.isFinite);
            if (panelIds.length === 0) return;

            // Prefer bulk endpoint (one request). If not available, fallback to single updates.
            let bulkOk = false;
            try {
                const bulkResp = await fetch(`/sign/regulations/${regulationId}/panels/bulk_update/`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCSRFToken()
                    },
                    body: JSON.stringify({ action: action, panel_ids: panelIds })
                });
                bulkOk = bulkResp.ok;
            } catch (err) {
                bulkOk = false;
            }

            if (!bulkOk) {
                for (const pid of panelIds) {
                    const key = `${regulationId}:${pid}`;
                    if (window.regulationAssociationInFlight.has(key)) continue;
                    window.regulationAssociationInFlight.add(key);
                    const resp = await fetch(`/sign/regulations/${regulationId}/panels/update/`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': getCSRFToken()
                        },
                        body: JSON.stringify({ action: action, panel_id: pid })
                    });
                    window.regulationAssociationInFlight.delete(key);
                    if (!resp.ok) {
                        console.error('Failed to update panel on pole', resp.status);
                        break;
                    }
                }
            }

            // Update local state/UI/overlay without re-fetching or re-zooming
            const assocMap = window.associatedPanelsById instanceof Map ? window.associatedPanelsById : new Map();
            const assocSet = window.associatedPanelIds instanceof Set ? window.associatedPanelIds : new Set();
            if (action === 'add') {
                for (const p of panelsOnPole) {
                    const pid = Number(p.id);
                    if (!Number.isFinite(pid)) continue;
                    assocSet.add(pid);
                    const feat = buildRegulationPanelFeatureFromSignAssetFeature(p);
                    if (feat) assocMap.set(pid, feat);
                    setSignAssetsAssociatedFlag(pid, true);
                }
            } else {
                for (const p of panelsOnPole) {
                    const pid = Number(p.id);
                    if (!Number.isFinite(pid)) continue;
                    assocSet.delete(pid);
                    assocMap.delete(pid);
                    setSignAssetsAssociatedFlag(pid, false);
                }
            }
            window.associatedPanelIds = assocSet;
            window.associatedPanelsById = assocMap;
            refreshRegulationOverlayFromState(regulationId);
            updateEditModeUIFromState(regulationId);
        } catch (error) {
            console.error('Error updating pole panels:', error);
        } finally {
            window.regulationAssociationInFlight.delete(poleFlightKey);
        }
    }

    async function handleRegulationPanelClick(regulationId, e) {
        // Some layers (e.g. the orange overlay) may call the handler without e.features
        let feature = null;
        if (e && Array.isArray(e.features) && e.features.length > 0) {
            feature = e.features[0];
        } else if (e && e.point && typeof signMap?.queryRenderedFeatures === 'function') {
            const candidates = signMap.queryRenderedFeatures(e.point, {
                layers: ['sign-panels-symbols', 'sign-panels-circles']
            });
            if (Array.isArray(candidates) && candidates.length > 0) {
                feature = candidates[0];
            }
        }

        if (!feature) return;

        const panelIdRaw = feature.id;
        const panelId = Number(panelIdRaw);
        if (!Number.isFinite(panelId)) return;
        const associatedIds = window.associatedPanelIds instanceof Set ? window.associatedPanelIds : new Set();
        const isCurrentlyAssociated = associatedIds.has(panelId);
        const action = isCurrentlyAssociated ? 'remove' : 'add';

        // De-dupe: the same click can be received from multiple layers (symbols + overlay)
        const flightKey = `${regulationId}:${panelId}`;
        if (window.regulationAssociationInFlight.has(flightKey)) return;
        window.regulationAssociationInFlight.add(flightKey);
        
        try {
            const response = await fetch(`/sign/regulations/${regulationId}/panels/update/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCSRFToken()
                },
                body: JSON.stringify({
                    action: action,
                    panel_id: panelId
                })
            });
            
            if (response.ok) {
                // Update local state/UI/overlay without re-fetching or re-zooming
                const assocMap = window.associatedPanelsById instanceof Map ? window.associatedPanelsById : new Map();
                const assocSet = window.associatedPanelIds instanceof Set ? window.associatedPanelIds : new Set();
                if (action === 'add') {
                    assocSet.add(panelId);
                    const feat = buildRegulationPanelFeatureFromSignAssetFeature(feature);
                    if (feat) assocMap.set(panelId, feat);
                    setSignAssetsAssociatedFlag(panelId, true);
                } else {
                    assocSet.delete(panelId);
                    assocMap.delete(panelId);
                    setSignAssetsAssociatedFlag(panelId, false);
                }
                window.associatedPanelIds = assocSet;
                window.associatedPanelsById = assocMap;
                refreshRegulationOverlayFromState(regulationId);
                updateEditModeUIFromState(regulationId);
            }
        } catch (error) {
            console.error('Error updating panel association:', error);
        } finally {
            window.regulationAssociationInFlight.delete(flightKey);
        }
    }

    async function removeRegulationPanel(regulationId, panelId) {
        try {
            const panelIdNum = Number(panelId);
            if (!Number.isFinite(panelIdNum)) return;

            const flightKey = `${regulationId}:${panelIdNum}`;
            if (window.regulationAssociationInFlight.has(flightKey)) return;
            window.regulationAssociationInFlight.add(flightKey);

            const resp = await fetch(`/sign/regulations/${regulationId}/panels/update/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCSRFToken()
                },
                body: JSON.stringify({
                    action: 'remove',
                    panel_id: panelIdNum
                })
            });

            if (!resp.ok) {
                console.error('Error removing panel:', resp.status);
                return;
            }
            
            const assocMap = window.associatedPanelsById instanceof Map ? window.associatedPanelsById : new Map();
            const assocSet = window.associatedPanelIds instanceof Set ? window.associatedPanelIds : new Set();
            assocSet.delete(panelIdNum);
            assocMap.delete(panelIdNum);
            window.associatedPanelIds = assocSet;
            window.associatedPanelsById = assocMap;
            setSignAssetsAssociatedFlag(panelIdNum, false);
            refreshRegulationOverlayFromState(regulationId);
            updateEditModeUIFromState(regulationId);
        } catch (error) {
            console.error('Error removing panel:', error);
        } finally {
            window.regulationAssociationInFlight.delete(`${regulationId}:${Number(panelId)}`);
        }
    }

    async function saveRegulationChanges() {
        const reg = window.currentEditingRegulation;
        if (!reg) return;
        
        const title = document.getElementById('edit-title').value;
        const reference = document.getElementById('edit-reference').value;
        const description = document.getElementById('edit-description').value;
        // Build form data to match server expectations (Django form POST)
        const formData = new FormData();
        formData.append('title', title || '');
        formData.append('reference', reference || '');
        formData.append('description', description || '');

        try {
            const response = await fetch(`/sign/regulations/${reg.id}/edit/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCSRFToken()
                },
                body: formData
            });
            
            if (response.ok) {
                alert('{% translate "Règlement enregistré avec succès" %}');
                loadRegulationDetail(reg.id, true, { fitBounds: false });
            } else {
                alert('{% translate "Erreur lors de l\'enregistrement" %}');
            }
        } catch (error) {
            console.error('Error saving regulation:', error);
            alert('{% translate "Erreur lors de l\'enregistrement" %}');
        }
    }

    async function submitRegulationForApproval() {
        const reg = window.currentEditingRegulation;
        if (!reg) return;
        
        if (!confirm('{% translate "Êtes-vous sûr de vouloir soumettre ce règlement pour approbation ?" %}')) {
            return;
        }
        
        try {
            const response = await fetch(`/sign/regulations/${reg.id}/submit/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCSRFToken()
                }
            });
            
            if (response.ok) {
                alert('{% translate "Règlement soumis avec succès" %}');
                cancelEditMode();
                // Reload regulations list
                fetchRegulations();
            } else {
                alert('{% translate "Erreur lors de la soumission" %}');
            }
        } catch (error) {
            console.error('Error submitting regulation:', error);
            alert('{% translate "Erreur lors de la soumission" %}');
        }
    }

    function cancelEditMode() {
        window.regulationEditMode = null;
        window.currentEditingRegulation = null;
        window.regulationCreateMode = false;
        window.currentCreatingRegulation = null;
        
        // Reset map click handlers
        signMap.off('click', 'sign-panels-circles');
        signMap.off('click', 'sign-panels-symbols');
        
        // Close detail view
        if (regulationsListView) regulationsListView.style.display = 'block';
        if (regulationsDetailView) regulationsDetailView.style.display = 'none';
        
        fetchRegulations();
    }

    // Map management for regulation panels
    let currentRegulationSource = null;
    // One handler reference for MapLibre off()/on()
    window.regulationOverlayClickHandler = window.regulationOverlayClickHandler || function(e) {
        const regId = window.regulationEditMode;
        if (!regId) return;
        handleRegulationPanelClick(regId, e);
    };

    function showRegulationPanels(reg, options = { fitBounds: true }) {
        clearRegulationPanels();
        
        if (!reg.panels || !reg.panels.features || reg.panels.features.length === 0) {
            console.log('No panels for this regulation');
            return;
        }

        // Add source with regulation panels
        const sourceId = `regulation-panels-${reg.id}`;
        currentRegulationSource = sourceId;
        
        try {
            signMap.addSource(sourceId, {
                type: 'geojson',
                data: reg.panels
            });

            const layerId = `${sourceId}-layer`;

            // Add layer for regulation panels with distinct styling
            // Abrogated panels (is_abrogated=true) → purple, others → orange
            signMap.addLayer({
                id: layerId,
                type: 'circle',
                source: sourceId,
                paint: {
                    'circle-radius': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        10, 6,
                        18, 12
                    ],
                    'circle-color': [
                        'case',
                        ['==', ['get', 'is_abrogated'], true], '#6f42c1',
                        '#ff7f00'
                    ],
                    'circle-opacity': 0.85,
                    'circle-stroke-width': 2,
                    'circle-stroke-color': '#fff'
                }
            });

            // Allow clicking the orange overlay to toggle (useful when base symbols are offset)
            try {
                signMap.on('click', layerId, window.regulationOverlayClickHandler);
            } catch (err) {
                console.warn('Error binding regulation overlay click:', err);
            }

            if (options && options.fitBounds) {
                // Zoom to bounding box (only on initial open; avoid re-zoom on select/deselect)
                const features = reg.panels.features;
                if (features.length > 0) {
                    let bounds = null;
                    features.forEach(f => {
                        const geom = f.geometry;
                        if (!geom) return;
                        
                        if (geom.type === 'Point') {
                            const [lng, lat] = geom.coordinates;
                            if (!bounds) {
                                bounds = [[lng, lat], [lng, lat]];
                            } else {
                                bounds[0][0] = Math.min(bounds[0][0], lng);
                                bounds[0][1] = Math.min(bounds[0][1], lat);
                                bounds[1][0] = Math.max(bounds[1][0], lng);
                                bounds[1][1] = Math.max(bounds[1][1], lat);
                            }
                        }
                    });
                    
                    if (bounds) {
                        signMap.fitBounds(bounds, { padding: 100 });
                    }
                }
            }
        } catch (err) {
            console.warn('Error adding regulation panels to map:', err);
        }
    }

    function clearRegulationPanels() {
        if (!currentRegulationSource) return;
        
        try {
            const layerId = `${currentRegulationSource}-layer`;
            try {
                if (window.regulationOverlayClickHandler) {
                    signMap.off('click', layerId, window.regulationOverlayClickHandler);
                }
            } catch (err) {
                // ignore
            }
            if (signMap.getLayer(layerId)) {
                signMap.removeLayer(layerId);
            }
            if (signMap.getSource(currentRegulationSource)) {
                signMap.removeSource(currentRegulationSource);
            }
        } catch (err) {
            console.warn('Error clearing regulation panels:', err);
        }
        
        currentRegulationSource = null;
    }
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const panelTypeSelect = document.getElementById('panel_type');
    if (!panelTypeSelect) return;

    const accordion = document.getElementById('panel-type-accordion');
    const selectedList = document.getElementById('selected-panels-list');
    const emptyMessage = selectedList ? selectedList.querySelector('.empty-message') : null;
    if (!selectedList) return;

    // Helper to load images for a category
    function loadGroupImages(group) {
        const collapseDiv = document.querySelector(`#collapse-${group}`);
        if (!collapseDiv) return;
        collapseDiv.querySelectorAll('.panel-item').forEach(item => {
            const placeholder = item.querySelector('.panel-img-placeholder');
            if (placeholder && placeholder.children.length === 0) {
                const imageUrl = item.dataset.imageUrl;
                const code = item.dataset.code;
                if (typeof appendPanelTypeImage === 'function') {
                    appendPanelTypeImage(placeholder, code, imageUrl);
                } else if (imageUrl) {
                    const img = document.createElement('img');
                    img.src = imageUrl;
                    img.style.maxHeight = '100%';
                    img.style.maxWidth = '100%';
                    placeholder.appendChild(img);
                } else if (typeof buildPanelIconElement === 'function') {
                    const img = buildPanelIconElement(code); 
                    img.style.height = '40px';
                    img.style.width = '40px';
                    placeholder.appendChild(img);
                } else if (typeof renderPanelTextFallback === 'function') {
                    renderPanelTextFallback(placeholder, code);
                } else {
                    placeholder.textContent = code;
                }
            }
        });
    }

    // Map option values to option elements for fast lookup
    function getOptionMap() {
        const map = new Map();
        Array.from(panelTypeSelect.options).forEach(opt => {
            map.set(String(opt.value), opt);
        });
        return map;
    }

    // Helper to update selected list UI & Group states
    function updateSelectedList() {
        const optionMap = getOptionMap();
        const selectedIds = new Set(
            Array.from(panelTypeSelect.options)
                .filter(opt => opt.selected)
                .map(opt => String(opt.value))
        );

        // 1. Update active states on grid items
        document.querySelectorAll('.panel-item').forEach(item => {
            if (selectedIds.has(String(item.dataset.id))) {
                item.classList.add('selected');
            } else {
                item.classList.remove('selected');
            }
        });

        // 2. Clear selected list container (except empty message)
        Array.from(selectedList.children).forEach(child => {
            if (!child.classList.contains('empty-message')) {
                child.remove();
            }
        });

        // 3. Process groups to calculate counts, update checkboxes, and build selection items
        const groupItems = document.querySelectorAll('#panel-type-accordion .accordion-item');
        const fullySelectedGroups = new Set();
        const groupSelectedPanelsMap = new Map();

        groupItems.forEach(groupEl => {
            const groupKey = groupEl.dataset.groupKey;
            if (!groupKey) return;

            const panelsInGroup = Array.from(groupEl.querySelectorAll('.panel-item'));
            const totalInGroup = panelsInGroup.length;
            const selectedPanels = panelsInGroup.filter(p => selectedIds.has(String(p.dataset.id)));
            const count = selectedPanels.length;

            groupSelectedPanelsMap.set(groupKey, selectedPanels);

            // Update group checkbox state (checked / indeterminate / unchecked)
            const checkbox = document.getElementById(`check-group-${groupKey}`);
            if (checkbox) {
                if (count === 0) {
                    checkbox.checked = false;
                    checkbox.indeterminate = false;
                } else if (count === totalInGroup && totalInGroup > 0) {
                    checkbox.checked = true;
                    checkbox.indeterminate = false;
                    fullySelectedGroups.add(groupKey);
                } else {
                    checkbox.checked = false;
                    checkbox.indeterminate = true;
                }
            }

            // Update header badge
            const badge = document.getElementById(`badge-${groupKey}`);
            if (badge) {
                if (count > 0) {
                    badge.textContent = `${count}/${totalInGroup}`;
                    badge.className = 'badge rounded-pill bg-primary text-white border-0 group-count-badge me-2';
                } else {
                    badge.textContent = '0';
                    badge.className = 'badge rounded-pill bg-light text-muted border group-count-badge me-2';
                }
            }

            // Update status text inside accordion body
            const statusText = document.getElementById(`status-${groupKey}`);
            if (statusText) {
                if (count === totalInGroup && totalInGroup > 0) {
                    statusText.innerHTML = `<span class="text-primary fw-bold"><i class="bi bi-check-circle-fill me-1"></i>Tous sélectionnés (${totalInGroup})</span>`;
                } else if (count > 0) {
                    statusText.textContent = `${count} / ${totalInGroup} sélectionné(s)`;
                } else {
                    statusText.textContent = `0 / ${totalInGroup} sélectionné(s)`;
                }
            }
        });

        // 4. Render selected list
        if (selectedIds.size === 0) {
            if (emptyMessage) emptyMessage.style.display = 'block';
        } else {
            if (emptyMessage) emptyMessage.style.display = 'none';

            // Selection header with total count and "Tout effacer" button
            const headerRow = document.createElement('div');
            headerRow.className = 'd-flex justify-content-between align-items-center mb-2 pb-1 border-bottom';
            headerRow.innerHTML = `
                <span class="small fw-bold text-dark">${selectedIds.size} sélectionné(s)</span>
                <button type="button" class="btn btn-link btn-sm text-danger p-0 text-decoration-none" id="clear-all-panel-types" style="font-size: 0.75rem;">
                    <i class="bi bi-trash3 me-1"></i>Tout effacer
                </button>
            `;
            selectedList.appendChild(headerRow);

            const handledPanelIds = new Set();

            // Display consolidated cards for fully selected groups first
            groupItems.forEach(groupEl => {
                const groupKey = groupEl.dataset.groupKey;
                if (!groupKey) return;
                const groupLabel = groupEl.querySelector('.group-title')?.textContent?.trim() || groupKey;
                const selectedPanels = groupSelectedPanelsMap.get(groupKey) || [];

                if (fullySelectedGroups.has(groupKey)) {
                    // Entire group selected
                    const groupItem = document.createElement('div');
                    groupItem.className = 'd-flex justify-content-between align-items-center bg-primary-subtle border border-primary-subtle rounded p-1 mb-1 shadow-sm';
                    groupItem.innerHTML = `
                        <div class="d-flex align-items-center text-truncate me-2">
                            <i class="bi bi-folder-check text-primary me-1 ms-1"></i>
                            <span class="small fw-bold text-primary text-truncate">${groupLabel}</span>
                            <span class="badge bg-primary text-white ms-2" style="font-size: 0.65rem;">Tous (${selectedPanels.length})</span>
                        </div>
                        <button type="button" class="btn btn-sm btn-link text-danger p-0 me-1 remove-group-type" data-group="${groupKey}" title="Désélectionner tout le groupe">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    `;
                    selectedList.appendChild(groupItem);
                    selectedPanels.forEach(p => handledPanelIds.add(String(p.dataset.id)));
                } else if (selectedPanels.length > 0) {
                    // Partially selected group: list individual items
                    selectedPanels.forEach(p => {
                        const id = String(p.dataset.id);
                        const code = p.dataset.code || optionMap.get(id)?.text?.trim() || id;
                        handledPanelIds.add(id);

                        const item = document.createElement('div');
                        item.className = 'd-flex justify-content-between align-items-center bg-white border rounded p-1 mb-1 shadow-sm';
                        item.innerHTML = `
                            <span class="small fw-bold ms-1 text-primary text-truncate" style="max-width: 200px;" title="${code}">${code}</span>
                            <button type="button" class="btn btn-sm btn-link text-danger p-0 me-1 remove-panel-type flex-shrink-0" data-id="${id}" title="Retirer">
                                <i class="bi bi-x"></i>
                            </button>
                        `;
                        selectedList.appendChild(item);
                    });
                }
            });

            // Any remaining panels not in groups (fallback)
            selectedIds.forEach(id => {
                if (!handledPanelIds.has(id)) {
                    const opt = optionMap.get(id);
                    const code = opt ? opt.text.trim() : id;
                    const item = document.createElement('div');
                    item.className = 'd-flex justify-content-between align-items-center bg-white border rounded p-1 mb-1 shadow-sm';
                    item.innerHTML = `
                        <span class="small fw-bold ms-1 text-primary text-truncate" style="max-width: 200px;" title="${code}">${code}</span>
                        <button type="button" class="btn btn-sm btn-link text-danger p-0 me-1 remove-panel-type flex-shrink-0" data-id="${id}" title="Retirer">
                            <i class="bi bi-x"></i>
                        </button>
                    `;
                    selectedList.appendChild(item);
                }
            });
        }
    }

    // Set group selection helper
    function setGroupSelection(groupKey, isSelected) {
        const collapseDiv = document.querySelector(`#collapse-${groupKey}`);
        if (!collapseDiv) return;
        const optionMap = getOptionMap();

        collapseDiv.querySelectorAll('.panel-item').forEach(item => {
            const opt = optionMap.get(String(item.dataset.id));
            if (opt) {
                opt.selected = isSelected;
            }
        });

        if (isSelected) {
            loadGroupImages(groupKey);
        }
        updateSelectedList();
    }

    // Group checkbox change handler
    document.addEventListener('change', function(e) {
        if (e.target && e.target.classList.contains('group-select-all')) {
            const groupKey = e.target.dataset.group;
            setGroupSelection(groupKey, e.target.checked);
        }
    });

    // Toolbar and action button handlers via event delegation
    document.addEventListener('click', function(e) {
        const selectAllBtn = e.target.closest('.select-all-btn');
        if (selectAllBtn) {
            const groupKey = selectAllBtn.dataset.group;
            setGroupSelection(groupKey, true);
            return;
        }

        const deselectAllBtn = e.target.closest('.deselect-all-btn');
        if (deselectAllBtn) {
            const groupKey = deselectAllBtn.dataset.group;
            setGroupSelection(groupKey, false);
            return;
        }

        // Remove entire group from selected list
        const removeGroupBtn = e.target.closest('.remove-group-type');
        if (removeGroupBtn) {
            const groupKey = removeGroupBtn.dataset.group;
            setGroupSelection(groupKey, false);
            return;
        }

        // Remove single panel from selected list
        const removeBtn = e.target.closest('.remove-panel-type');
        if (removeBtn) {
            const id = String(removeBtn.dataset.id);
            const optionMap = getOptionMap();
            const opt = optionMap.get(id);
            if (opt) {
                opt.selected = false;
                updateSelectedList();
            }
            return;
        }

        // Clear all panel types
        const clearAllBtn = e.target.closest('#clear-all-panel-types');
        if (clearAllBtn) {
            Array.from(panelTypeSelect.options).forEach(opt => opt.selected = false);
            updateSelectedList();
            return;
        }

        // Panel item click in grid
        const item = e.target.closest('.panel-item');
        if (item) {
            const id = String(item.dataset.id);
            const optionMap = getOptionMap();
            const opt = optionMap.get(id);
            if (opt) {
                opt.selected = !opt.selected;
                updateSelectedList();
            }
            return;
        }
    });

    // Handle accordion toggle to load images & sync visual open class
    document.querySelectorAll('#panel-type-accordion .accordion-button').forEach(btn => {
        btn.addEventListener('click', () => {
            const group = btn.dataset.group;
            loadGroupImages(group);
        });
    });

    document.querySelectorAll('#panel-type-accordion .accordion-collapse').forEach(collapse => {
        collapse.addEventListener('show.bs.collapse', () => {
            const header = collapse.previousElementSibling;
            if (header) header.classList.add('is-open');
        });
        collapse.addEventListener('hide.bs.collapse', () => {
            const header = collapse.previousElementSibling;
            if (header) header.classList.remove('is-open');
        });
    });

    // Listen to panelTypeSelect changes and reset button
    panelTypeSelect.addEventListener('change', updateSelectedList);
    const resetFiltersBtn = document.getElementById('reset-filters');
    if (resetFiltersBtn) {
        resetFiltersBtn.addEventListener('click', function() {
            setTimeout(updateSelectedList, 0);
        });
    }

    // Initial update
    updateSelectedList();
});
</script>
{% endblock script %}