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

{% block head %}
<link rel="stylesheet" href="{% static 'sign/sign.css' %}">
<style>
    .regulation-form-container {
        max-width: 1400px;
        width: 100%;
        margin: 0 auto;
        padding: 20px;
    }

    .regulation-form-container .tab-content {
        min-width: 100%;
    }
    
    .form-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .form-section h4 {
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e9ecef;
        color: #2c3e50;
    }
    
    .map-container {
        border: 2px solid #dee2e6;
        border-radius: 8px;
        height: 500px;
        margin-top: 15px;
        position: relative;
    }
    
    #regulation-map {
        height: 100%;
        width: 100%;
    }
    
    .panels-list {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 0;
    }
    
    .panel-item {
        padding: 12px;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8f9fa;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .panel-item:hover {
        background-color: #e9ecef;
    }
    
    .panel-item:last-child {
        border-bottom: none;
    }
    
    .panel-item.associated {
        background-color: #d4edda;
    }
    
    .panel-item-code {
        font-weight: 600;
        color: #2c3e50;
    }
    
    .panel-item-info {
        font-size: 0.85rem;
        color: #6c757d;
    }
    
    .panel-item-actions {
        display: flex;
        gap: 8px;
    }
    
    .btn-deselect {
        background-color: #dc3545;
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 3px;
        cursor: pointer;
        font-size: 0.85rem;
        transition: background-color 0.2s;
    }
    
    .btn-deselect:hover {
        background-color: #c82333;
    }
    
    .panel-marker-associated {
        stroke: #28a745 !important;
        stroke-width: 3 !important;
    }
    
    .panel-marker-normal {
        stroke: #007bff !important;
        stroke-width: 2 !important;
    }
    
    .button-group {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 2px solid #e9ecef;
    }
    
    .btn-submit {
        background-color: #28a745;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 600;
        transition: background-color 0.2s;
    }
    
    .btn-submit:hover {
        background-color: #218838;
    }
    
    .btn-submit:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
    }
    
    .btn-back {
        background-color: #6c757d;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition: background-color 0.2s;
    }
    
    .btn-back:hover {
        background-color: #5a6268;
    }
    
    .status-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.85rem;
        font-weight: 600;
    }
    
    .status-badge-warning {
        background-color: #fff3cd;
        color: #856404;
    }
    
    .panels-count {
        background-color: #e7f3ff;
        padding: 10px 15px;
        border-radius: 4px;
        margin-bottom: 10px;
        color: #004085;
        border-left: 4px solid #004085;
    }
    
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .form-row.full {
        grid-template-columns: 1fr;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
        color: #2c3e50;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 1rem;
    }
    
    .form-group textarea {
        resize: vertical;
        min-height: 100px;
    }
    
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }
    
    .alert {
        padding: 12px 15px;
        border-radius: 4px;
        margin-bottom: 15px;
    }
    
    .alert-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border-left: 4px solid #0c5460;
    }
    
    .alert-error {
        background-color: #f8d7da;
        color: #721c24;
        border-left: 4px solid #721c24;
    }
</style>
{% endblock head %}

{% block main %}
<div class="regulation-form-container">
    {% block content %}
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            {% if regulation %}
                {% trans "Modifier un règlement complémentaire de police" %}
            {% else %}
                {% trans "Créer un nouveau règlement complémentaire de police" %}
            {% endif %}
        </h2>
        {% if regulation %}
        <a href="{% url 'sign:regulation_generate_docx' regulation.id %}" class="btn btn-outline-secondary">
            <i class="bi bi-file-earmark-word me-1"></i>{% trans "Générer Word (.docx)" %}
        </a>
        {% endif %}
    </div>
    
    {% if regulation %}
    <div class="alert alert-info">
        <i class="bi bi-info-circle me-2"></i>
        {% trans "Statut" %}: <span class="status-badge status-badge-warning">{{ regulation.status_label }}</span>
        &nbsp;{% trans "Règlement" %}: <strong>{{ regulation.reference }}</strong>
    </div>
    {% endif %}

    <!-- Tabs navigation -->
    <ul class="nav nav-tabs mb-3" id="regulationTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tab-config-btn" data-bs-toggle="tab"
                    data-bs-target="#tab-config" type="button" role="tab">
                <i class="bi bi-gear me-1"></i>{% trans "Configuration" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-mesures-btn" data-bs-toggle="tab"
                    data-bs-target="#tab-mesures" type="button" role="tab">
                <i class="bi bi-sign-intersection me-1"></i>{% trans "Mesures" %}
            </button>
        </li>
    </ul>

    <form id="regulation-form" method="post">
        {% csrf_token %}

        <!-- Tab 1: Configuration -->
        <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-config" role="tabpanel">
            <style>.bilingual-label { font-weight:600; font-size:.8rem; color:#6c757d; margin-bottom:3px; }</style>

            <!-- Informations générales -->
            <div class="form-section">
                <h4><i class="bi bi-info-circle me-2 text-primary"></i>{% trans "Informations générales" %}</h4>
                <div class="form-row">
                    <div class="form-group">
                        <label for="reference">{% trans "Référence" %} *</label>
                        <input type="text" id="reference" name="reference" class="form-control"
                               value="{{ regulation.reference|default:'' }}" required
                               placeholder="{% trans 'Ex: RCP-2024-001' %}">
                    </div>
                    <div class="form-group">
                        <label for="organization">{% trans "Organisation" %} *</label>
                        <select id="organization" name="organization" class="form-select" required>
                            <option value="">--- {% trans "Sélectionner une organisation" %} ---</option>
                            {% for org in organizations %}
                                <option value="{{ org.id }}" {% if regulation.organization.id == org.id %}selected{% endif %}>
                                    {{ org.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="title">{% trans "Titre" %} *</label>
                    <input type="text" id="title" name="title" class="form-control"
                           value="{{ regulation.title|default:'' }}" required
                           placeholder="{% trans 'Titre du règlement' %}">
                </div>
                <div class="form-group">
                    <label for="description">{% trans "Description" %}</label>
                    <textarea id="description" name="description" class="form-control"
                              placeholder="{% trans 'Description détaillée du règlement' %}">{{ regulation.description|default:'' }}</textarea>
                </div>
            </div>

            <!-- 1. Dispositions initiales -->
            <div class="form-section">
                <h4>
                    <span class="badge bg-primary me-2">1</span>
                    {% trans "Dispositions initiales" %}
                </h4>
                <p class="text-muted small mb-2">{% trans "Visas légaux, considérants et texte d'introduction (avant l'«ARRÊTÉ»)." %}</p>
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="bilingual-label">🇫🇷 FR</div>
                        <textarea name="text_introduction_fr" class="form-control" rows="10"
                            placeholder="Vu l'article 117…&#10;ARRÊTE :">{{ regulation.text_introduction_fr|default:'' }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <div class="bilingual-label">🇧🇪 NL</div>
                        <textarea name="text_introduction_nl" class="form-control" rows="10"
                            placeholder="Gelet op artikel 117…&#10;BESLUIT :">{{ regulation.text_introduction_nl|default:'' }}</textarea>
                    </div>
                </div>
            </div>

            <!-- 3. Dispositions finales -->
            <div class="form-section">
                <h4>
                    <span class="badge bg-secondary me-2">3</span>
                    {% trans "Dispositions finales" %}
                </h4>
                <p class="text-muted small mb-2">{% trans "Entrée en vigueur, approbation, mise en place de la signalisation." %}</p>
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="bilingual-label">🇫🇷 FR</div>
                        <textarea name="text_dispositions_finales_fr" class="form-control" rows="8"
                            placeholder="La signalisation prévue ci-dessus sera placée…">{{ regulation.text_dispositions_finales_fr|default:'' }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <div class="bilingual-label">🇧🇪 NL</div>
                        <textarea name="text_dispositions_finales_nl" class="form-control" rows="8"
                            placeholder="De hierboven voorziene signalisatie zal worden geplaatst…">{{ regulation.text_dispositions_finales_nl|default:'' }}</textarea>
                    </div>
                </div>
            </div>

        </div><!-- /tab-config -->

        <!-- Tab 2: Mesures -->
        <div class="tab-pane fade" id="tab-mesures" role="tabpanel">

            <style>
                .article-tree-container { border:1px solid #dee2e6; border-radius:6px; overflow:hidden; }
                .article-node { border-bottom:1px solid #f0f0f0; }
                .article-node:last-child { border-bottom:none; }
                .article-row {
                    display:grid;
                    grid-template-columns: 24px 18px 130px 1fr 1fr 90px 58px;
                    gap:5px;
                    align-items:flex-start;
                    padding:5px 8px;
                    background:#fff;
                    transition:background .15s;
                }
                .article-row:hover { background:#f8f9fa; }
                .article-row.level-1 { background:#f0f4ff; font-weight:700; }
                .article-row.level-2 { background:#f8f9fa; font-weight:600; }
                .article-toggle { cursor:pointer; border:none; background:none; padding:0; line-height:1; color:#6c757d; font-size:.85rem; width:20px; text-align:center; flex-shrink:0; }
                .article-toggle:hover { color:#000; }
                .article-id-cell { font-size:.8rem; font-family:monospace; color:#495057; white-space:nowrap; padding-top:2px; }
                .article-text-cell { font-size:.85rem; line-height:1.3; }
                .article-children { border-left:3px solid #dee2e6; margin-left:14px; }
                .article-children.collapsed { display:none; }
                .from-panels-indicator { width:6px; height:6px; border-radius:50%; background:#28a745; display:inline-block; margin-top:5px; flex-shrink:0; }
                .no-indicator { width:6px; height:6px; display:inline-block; }
                .article-tree-header {
                    display:grid;
                    grid-template-columns: 24px 18px 130px 1fr 1fr 90px 58px;
                    gap:5px;
                    padding:6px 8px;
                    background:#343a40;
                    color:#fff;
                    font-size:.8rem;
                    font-weight:600;
                    border-radius:6px 6px 0 0;
                }
                .article-remove-btn { font-size:.7rem; padding:1px 4px; line-height:1.2; opacity:.6; }
                .article-remove-btn:hover { opacity:1; }
                .btn-tree-action { font-size:.8rem; }
                .voirie-toggle-btn { font-size:.72rem; padding:1px 5px; white-space:nowrap; }
                .article-add-sub-btn { font-size:.72rem; padding:1px 4px; line-height:1.2; }
                .add-subarticle-panel { background:#f0fff4; border-top:1px solid #c3e6cb; padding:8px 12px; display:none; }
                .add-subarticle-panel.open { display:block; }
                .voirie-panel { background:#fffce8; border-top:1px solid #ffe082; padding:6px 12px; display:none; }
                .voirie-panel.open { display:block; }
                .voirie-row { display:flex; gap:5px; align-items:flex-start; margin-bottom:5px; }
                .voirie-row-label { font-size:.7rem; color:#6c757d; white-space:nowrap; width:22px; padding-top:6px; }
                .voirie-row textarea { flex:1; font-size:.82rem; min-height:34px; resize:vertical; }
                .voirie-delete-btn { background:none; border:none; color:#dc3545; font-size:1rem; cursor:pointer; padding:0 2px; flex-shrink:0; margin-top:4px; }
                .voirie-actions { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
                .text-edit-bar { background:#fff8e1; border-top:1px solid #ffe082; padding:6px 12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
                .article-row.level-1 ~ .text-edit-bar, .article-row.level-1 ~ .measure-panel { margin-left: 48px; }
                .article-row.level-2 ~ .text-edit-bar, .article-row.level-2 ~ .measure-panel { margin-left: 62px; }
                .article-row.level-3 ~ .text-edit-bar, .article-row.level-3 ~ .measure-panel { margin-left: 76px; }
                .article-row.level-4 ~ .text-edit-bar, .article-row.level-4 ~ .measure-panel { margin-left: 90px; }
                .article-text-input { width:100%; font-size:.85rem; border:1px solid #dee2e6; border-radius:4px; padding:2px 6px; line-height:1.4; background:#fffde7; }
                .article-id-input { width:100%; font-size:.82rem; border:1px solid #b0bec5; border-radius:4px; padding:2px 5px; line-height:1.4; background:#fffde7; font-family:monospace; color:#37474f; }
                .voirie-save-badge { font-size:.7rem; color:#198754; display:none; }
                .measure-panels-toggle-btn { font-size:.72rem; padding:1px 5px; white-space:nowrap; }
                .measure-panel { background:#e8f4fd; border-top:1px solid #90caf9; padding:6px 12px; display:none; }
                .measure-panel.open { display:block; }
                .measure-panel-header { font-size:.8rem; font-weight:600; color:#1565c0; margin-bottom:4px; }
                .measure-panel-linked { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; min-height:24px; }
                .measure-panel-chip { display:inline-flex; align-items:center; gap:3px; background:#fff; border:1px solid #90caf9; border-radius:12px; padding:1px 6px; font-size:.78rem; }
                .measure-panel-chip-remove { background:none; border:none; color:#dc3545; cursor:pointer; font-size:.9rem; line-height:1; padding:0; margin-left:2px; }
                .measure-panel-search { margin-top:4px; }
                .measure-panel-search-results { max-height:160px; overflow-y:auto; border:1px solid #dee2e6; border-radius:4px; background:#fff; margin-top:3px; }
                .add-flow-card { background:#fff; }
                .add-flow-results { max-height:240px; overflow-y:auto; }
                #panel-select-mode-banner { background:#e0f7fa; color:#006064; }
            </style>

            <!-- Map -->
            <div class="mb-3">
                <div class="form-section">
                    <h4><i class="bi bi-map me-2 text-primary"></i>{% trans "Carte des panneaux" %}</h4>
                    <p class="text-muted small mb-2">
                        <i class="bi bi-info-circle"></i>
                        {% trans "Rouge = associé · Violet = actif à abroger · Bordeaux = retiré+abrogé · Orange = retiré · Bleu = non associé" %}
                    </p>
                        <!-- Map controls -->
                        <div class="d-flex align-items-center gap-3 mb-2 flex-wrap">
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" role="switch"
                                       id="toggle-removed-panels"
                                       onchange="onRemovedToggleChange(this.checked)">
                                <label class="form-check-label fw-semibold" for="toggle-removed-panels">
                                    <i class="bi bi-sign-stop me-1 text-warning"></i>{% trans "Afficher retirés" %}
                                </label>
                            </div>
                            <div id="removed-months-group" style="display:none;" class="d-flex align-items-center gap-2">
                                <select id="removed-months-select" class="form-select form-select-sm" style="width:auto;"
                                        onchange="onRemovedMonthsChange(this.value)">
                                    <option value="3">3 {% trans "mois" %}</option>
                                    <option value="6">6 {% trans "mois" %}</option>
                                    <option value="12" selected>12 {% trans "mois" %}</option>
                                    <option value="24">24 {% trans "mois" %}</option>
                                    <option value="36">36 {% trans "mois" %}</option>
                                    <option value="">{% trans "Tous" %}</option>
                                </select>
                            </div>
                            {% if regulation %}
                            <div class="vr d-none d-md-block"></div>
                            <button type="button" id="btn-abrogation-mode"
                                    class="btn btn-sm btn-outline-secondary"
                                    onclick="toggleAbrogationMode()"
                                    title="{% trans 'Marque/démarque un panneau comme abrogé physiquement dans ce RCP.' %}">
                                <i class="bi bi-pencil-square me-1"></i>{% trans "Mode abrogation physique" %}
                            </button>
                            {% endif %}
                        </div>
                        <!-- Abrogation mode banner -->
                        <div id="abrogation-mode-banner" class="alert border-0 mb-2 py-1 px-3 small fw-semibold" style="display:none;background:#ede7f6;color:#4a148c;">
                            <i class="bi bi-pencil-square me-1"></i>
                            {% trans "Mode abrogation physique actif — Cliquez sur un panneau pour le marquer / démarquer comme abrogé dans ce RCP." %}
                            <button type="button" class="btn-close btn-close-sm float-end" onclick="toggleAbrogationMode()" style="font-size:.7rem;"></button>
                        </div>
                        <!-- Panel-select mode banner -->
                        <div id="panel-select-mode-banner" class="alert border-0 mb-2 py-1 px-3 small fw-semibold" style="display:none;">
                            <i class="bi bi-cursor me-1"></i>
                            <span id="panel-select-mode-label">{% trans "Mode sélection actif" %}</span>
                            — {% trans "Cliquez sur des panneaux sur la carte pour les sélectionner." %}
                            <button type="button" class="btn-close btn-close-sm float-end" onclick="exitPanelSelectMode()" style="font-size:.7rem;"></button>
                        </div>
                        <!-- Measure panel edit mode banner -->
                        <div id="measure-panel-edit-banner" class="alert border-0 mb-2 py-2 px-3 small fw-semibold" style="display:none; background:#e0f7fa; color:#006064;">
                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                <i class="bi bi-pencil-square me-1"></i>
                                <span>{% trans "Panneaux de la mesure" %} : <strong id="measure-edit-article-label"></strong></span>
                                <span class="badge text-dark ms-1" style="background:#0dcaf0;" id="measure-edit-count">0</span>
                                <div class="ms-auto d-flex gap-2 align-items-center position-relative">
                                    <div class="position-relative">
                                        <input type="text" id="measure-edit-search" class="form-control form-control-sm" style="width:220px;" placeholder="{% trans 'Rechercher un panneau…' %}" autocomplete="off">
                                        <div id="measure-edit-search-results" class="position-absolute bg-white rounded border shadow-sm" style="display:none; z-index:1000; width:340px; max-height:220px; overflow-y:auto; top:100%; right:0;"></div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-success" onclick="exitMeasurePanelEditMode()">
                                        <i class="bi bi-check me-1"></i>{% trans "Terminer" %}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="map-container" id="map-wrapper">
                            <div id="regulation-map"></div>
                        </div>
                    </div>
                </div>

            <!-- Section 2: Nouvelles dispositions -->
            <div class="form-section">
                <h4 class="d-flex align-items-center flex-wrap gap-2">
                    <span class="badge bg-success me-1">2</span>
                    {% trans "Nouvelles dispositions" %}
                    {% if regulation %}
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-tree-action"
                            onclick="treeExpandAll()"><i class="bi bi-chevron-expand"></i></button>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-tree-action"
                            onclick="treeCollapseAll()"><i class="bi bi-chevron-contract"></i></button>
                    {% endif %}
                </h4>
                <p class="text-muted small mb-2">{% trans "Cochez les articles à inclure. 🟢 = suggéré par les types de panneaux associés." %}</p>

                {% if regulation %}
                <!-- Add a new measure — two flows -->
                <div class="add-flow-card border rounded mb-3">
                    <div class="p-2 d-flex flex-wrap gap-2 align-items-center border-bottom bg-success bg-opacity-10">
                        <span class="fw-semibold small text-success"><i class="bi bi-plus-circle me-1"></i>{% trans "Ajouter une mesure" %}</span>
                        <button type="button" class="btn btn-sm btn-outline-success"
                                onclick="openAddArticleSearch()">
                            <i class="bi bi-search me-1"></i>{% trans "Chercher un article" %}
                        </button>
                        <button type="button" id="btn-nd-panel-select" class="btn btn-sm btn-outline-info"
                                onclick="enterPanelSelectMode('nouvelle_disposition')">
                            <i class="bi bi-cursor me-1"></i>{% trans "Sélectionner des panneaux" %}
                        </button>
                    </div>
                    <!-- Flow 1: article search -->
                    <div id="article-search-panel" style="display:none;" class="p-2 bg-light">
                        <div class="d-flex gap-2 align-items-center">
                            <input type="text" id="article-search-input" class="form-control form-control-sm"
                                   placeholder="{% trans 'Rechercher par n° ou texte (ex: 1.1.2, interdit, verboden)…' %}"
                                   autocomplete="off">
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="closeAddArticleSearch()">✕</button>
                        </div>
                        <div id="article-search-results" class="mt-1" style="max-height:260px;overflow-y:auto;"></div>
                    </div>
                    <!-- Flow 2: select panels → suggest measures -->
                    <div id="nd-panel-select-wrap" style="display:none;" class="p-2">
                        <div class="d-flex justify-content-between align-items-center mb-1 flex-wrap gap-2">
                            <span class="small text-info fw-semibold">
                                <i class="bi bi-cursor me-1"></i>
                                {% trans "Sélectionnez des panneaux sur la carte" %} — <strong id="nd-panel-count">0</strong> {% trans "sélectionné(s)" %}
                            </span>
                            <div class="d-flex gap-1">
                                <button type="button" class="btn btn-sm btn-info text-white"
                                        onclick="flux2SuggestArticles('nouvelle_disposition')">
                                    <i class="bi bi-search me-1"></i>{% trans "Suggérer des mesures" %}
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger"
                                        onclick="flux2ClearSelection()" title="{% trans 'Vider' %}">
                                    <i class="bi bi-x"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary"
                                        onclick="exitPanelSelectMode()">✕</button>
                            </div>
                        </div>
                        <div id="nd-panel-select-list" class="measure-panel-linked mb-1">
                            <div class="text-muted small">{% trans "Cliquez sur des panneaux sur la carte ci-dessus." %}</div>
                        </div>
                        <div id="nd-articles-results" class="add-flow-results mt-1"></div>
                    </div>
                </div>

                <div class="article-tree-container">
                    <div class="article-tree-header">
                        <div></div><div title="Suggéré">🟢</div>
                        <div>N°</div><div>FR</div><div>NL</div><div> Panneaux</div><div></div>
                    </div>
                    <div id="article-tree-root">
                        <div class="text-center text-muted p-3 small">
                            <i class="bi bi-hourglass-split me-1"></i>{% trans "Chargement…" %}
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="alert alert-warning">{% translate "Enregistrez d'abord le règlement pour pouvoir sélectionner les articles." %}</div>
                {% endif %}

            </div>

            <!-- Section 3: Abrogations -->
            <div class="form-section">
                <h4 class="d-flex align-items-center flex-wrap gap-2">
                    <span class="badge bg-danger me-2">3</span>
                    {% trans "Abrogations" %}
                    {% if regulation %}
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-tree-action"
                            onclick="abrogationTreeExpandAll()"><i class="bi bi-chevron-expand"></i></button>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-tree-action"
                            onclick="abrogationTreeCollapseAll()"><i class="bi bi-chevron-contract"></i></button>
                    {% endif %}
                </h4>
                <p class="text-muted small mb-2">{% trans "Cochez les articles abrogés à inclure. 🟢 = suggéré par les types de panneaux abrogés." %}</p>

                {% if regulation %}
                <!-- Add an abrogation — two flows -->
                <div class="add-flow-card border rounded mb-3">
                    <div class="p-2 d-flex flex-wrap gap-2 align-items-center border-bottom bg-danger bg-opacity-10">
                        <span class="fw-semibold small text-danger"><i class="bi bi-plus-circle me-1"></i>{% trans "Ajouter une abrogation" %}</span>
                        <button type="button" class="btn btn-sm btn-outline-danger"
                                onclick="openAddAbrogationArticleSearch()">
                            <i class="bi bi-search me-1"></i>{% trans "Chercher un article" %}
                        </button>
                        <button type="button" id="btn-abrog-panel-select" class="btn btn-sm btn-outline-warning"
                                onclick="enterPanelSelectMode('abrogation')">
                            <i class="bi bi-cursor me-1"></i>{% trans "Sélectionner des panneaux" %}
                        </button>
                    </div>
                    <!-- Flow 1: article search -->
                    <div id="abrogation-article-search-panel" style="display:none;" class="p-2 bg-light">
                        <div class="d-flex gap-2 align-items-center">
                            <input type="text" id="abrogation-article-search-input" class="form-control form-control-sm"
                                   placeholder="{% trans 'Rechercher par n° ou texte (ex: 1.1.2, interdit, verboden)…' %}"
                                   autocomplete="off">
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="closeAddAbrogationArticleSearch()">✕</button>
                        </div>
                        <div id="abrogation-article-search-results" class="mt-1" style="max-height:260px;overflow-y:auto;"></div>
                    </div>
                    <!-- Flow 2: select panels → find measure reference in existing RCPs -->
                    <div id="abrog-panel-select-wrap" style="display:none;" class="p-2">
                        <div class="d-flex justify-content-between align-items-center mb-1 flex-wrap gap-2">
                            <span class="small text-warning fw-semibold">
                                <i class="bi bi-cursor me-1"></i>
                                {% trans "Sélectionnez des panneaux sur la carte" %} — <strong id="abrog-panel-count">0</strong> {% trans "sélectionné(s)" %}
                            </span>
                            <div class="d-flex gap-1">
                                <button type="button" class="btn btn-sm btn-warning text-dark"
                                        onclick="flux2SuggestArticles('abrogation')">
                                    <i class="bi bi-search me-1"></i>{% trans "Trouver la mesure RCP" %}
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger"
                                        onclick="flux2ClearSelection()">
                                    <i class="bi bi-x"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary"
                                        onclick="exitPanelSelectMode()">✕</button>
                            </div>
                        </div>
                        <div id="abrog-panel-select-list" class="measure-panel-linked mb-1">
                            <div class="text-muted small">{% trans "Cliquez sur des panneaux sur la carte ci-dessus." %}</div>
                        </div>
                        <div id="abrog-articles-results" class="add-flow-results mt-1"></div>
                    </div>
                </div>

                <div class="article-tree-container">
                    <div class="article-tree-header">
                        <div></div><div title="Suggéré">🟢</div>
                        <div>N°</div><div>FR</div><div>NL</div><div> Panneaux</div><div></div>
                    </div>
                    <div id="abrogation-article-tree-root">
                        <div class="text-center text-muted p-3 small">
                            <i class="bi bi-hourglass-split me-1"></i>{% trans "Chargement…" %}
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>

        </div><!-- /tab-mesures -->
        </div><!-- /tab-content -->

    </form>

    <!-- Action Buttons (always visible) -->
    <div class="form-section">
        <div class="button-group">
            <a href="{% url 'sign:index' %}?panel=regulations" class="btn btn-back">
                <i class="bi bi-arrow-left me-1"></i>{% trans "Retour" %}
            </a>

            <div>
                {% if regulation and regulation.status == 'in_preparation' %}
                    <button type="button" class="btn btn-success me-2" id="btn-save" onclick="saveRegulation()">
                        <i class="bi bi-check-circle me-1"></i>{% trans "Enregistrer" %}
                    </button>
                    <button type="button" class="btn btn-primary" id="btn-submit" onclick="submitRegulation()">
                        <i class="bi bi-send me-1"></i>{% trans "Soumettre pour approbation" %}
                    </button>
                {% elif not regulation %}
                    <button type="button" class="btn btn-success" id="btn-create" onclick="createRegulation()">
                        <i class="bi bi-plus-circle me-1"></i>{% trans "Créer" %}
                    </button>
                {% else %}
                    <button type="button" class="btn btn-secondary" disabled>
                        {% trans "Ce règlement n'est pas modifiable" %}
                    </button>
                {% endif %}
            </div>
        </div>
    </div>

    {% endblock content %}
</div>

<!-- MapLibre GL (version locale figée, la CSS est déjà chargée dans base.html) -->
<script src="{% static 'common/maplibre-gl.js' %}"></script>
<script src="{% static 'common/base_map.js' %}"></script>

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

<script>
// Import only the necessary functions from sign.js without auto-initialization
// We'll manually load the functions we need

// Constants
const ZOOM_THRESHOLD_PANELS = 17;
const MIN_ZOOM_TO_LOAD = 16;
const MIN_PANEL_BASE_UP_OFFSET_PX = 40;
const DEFAULT_PANEL_ICON_HEIGHT_PX = 65;
const PANEL_STACK_GAP_PX = 2;
const SCALED_PANEL_ICON_FACTOR = 1.2;
let panelOffsetRefreshTimer = null;

function getRenderedPanelHeight(feature) {
    const props = feature?.properties || {};
    const spriteId = props.panel_text_image_id;
    const textMetrics = window.panelTextSpriteMetrics || {};
    const iconMetrics = window.panelRoadSignSpriteMetrics || {};
    const iconSpriteId = props.panel_icon_image_scaled || props.panel_icon_image;

    if (props.panel_text_can_render && spriteId && textMetrics[spriteId]?.height) {
        return textMetrics[spriteId].height * (props.panel_scale_factor || 1.0);
    }

    if (!props.panel_text_can_render && iconSpriteId && iconMetrics[iconSpriteId]?.height) {
        return iconMetrics[iconSpriteId].height * (props.panel_scale_factor || 1.0);
    }

    if (!props.panel_text_can_render && props.panel_icon_image_scaled) {
        return (props.panel_render_height || DEFAULT_PANEL_ICON_HEIGHT_PX) * SCALED_PANEL_ICON_FACTOR * (props.panel_scale_factor || 1.0);
    }

    return (props.panel_render_height || DEFAULT_PANEL_ICON_HEIGHT_PX) * (props.panel_scale_factor || 1.0);
}

function refreshVisiblePanelOffsets() {
    if (!regulationMap || !regulationMap.getSource) {
        return;
    }
    const source = regulationMap.getSource('regulation-panels');
    if (!source || !source._data || !Array.isArray(source._data.features)) {
        return;
    }

    calculatePanelOffsets(source._data.features);
    source.setData(source._data);
}

function schedulePanelOffsetRefresh() {
    if (panelOffsetRefreshTimer) {
        clearTimeout(panelOffsetRefreshTimer);
    }
    panelOffsetRefreshTimer = setTimeout(() => {
        panelOffsetRefreshTimer = null;
        refreshVisiblePanelOffsets();
    }, 40);
}

window.panelRoadSignSpriteMetrics = window.panelRoadSignSpriteMetrics || {};
window.panelTextSpriteMetrics = window.panelTextSpriteMetrics || {};
window.addEventListener('panelTextSpriteRendered', () => {
    schedulePanelOffsetRefresh();
});

function calculatePanelOffsets(features) {
    if (!Array.isArray(features) || features.length === 0) {
        return;
    }

    const panelsByPole = {};
    features.forEach((feature) => {
        if (feature?.properties?.asset_type !== 'signpanel') {
            return;
        }
        const poleId = feature.properties.pole_id;
        if (!poleId) {
            return;
        }
        if (!panelsByPole[poleId]) {
            panelsByPole[poleId] = [];
        }
        panelsByPole[poleId].push(feature);
    });

    Object.values(panelsByPole).forEach((polePanels) => {
        polePanels.sort((a, b) => {
            const orderA = a?.properties?.panel_vertical_order || 1;
            const orderB = b?.properties?.panel_vertical_order || 1;
            return orderA - orderB;
        });

        let cumulativeOffset = -MIN_PANEL_BASE_UP_OFFSET_PX;
        let previousHeight = 0;

        polePanels.forEach((panel, index) => {
            const renderHeight = getRenderedPanelHeight(panel);

            if (index === 0) {
                cumulativeOffset = -MIN_PANEL_BASE_UP_OFFSET_PX - Math.max(0, (renderHeight - DEFAULT_PANEL_ICON_HEIGHT_PX) / 2);
            } else {
                cumulativeOffset -= (previousHeight + renderHeight) / 2 + PANEL_STACK_GAP_PX;
            }

            // Regulation map uses offset baseline without -64 correction.
            const panelScaleFactor = panel.properties.panel_scale_factor || 1.0;
            panel.properties.panel_stack_offset = [0, cumulativeOffset / panelScaleFactor];
            previousHeight = renderHeight;
        });
    });
}

// Global variables
const loadingRoadSignImages = new Set();
let panelTextSpriteMap = null;

// Load road sign images (from sign.js)
function loadRoadSignImages(map) {
    if (map.hasImage('road-sign-images-loaded')) {
        return;
    }
    
    // Create a default placeholder image (blue circle)
    const canvas = document.createElement('canvas');
    canvas.width = 64;
    canvas.height = 64;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#0022ff';
    ctx.beginPath();
    ctx.arc(32, 32, 30, 0, 2 * Math.PI);
    ctx.fill();
    const defaultCircleData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    map.addImage('road-sign-default', {
        width: canvas.width,
        height: canvas.height,
        data: defaultCircleData.data
    });

    // Create orientation arrow image
    const arrowCanvas = document.createElement('canvas');
    arrowCanvas.width = 32;
    arrowCanvas.height = 32;
    const arrowCtx = arrowCanvas.getContext('2d');
    
    arrowCtx.fillStyle = '#aaaaaa';
    arrowCtx.strokeStyle = '#222222';
    arrowCtx.lineWidth = 2;
    
    arrowCtx.beginPath();
    arrowCtx.moveTo(16, 4);
    arrowCtx.lineTo(26, 18);
    arrowCtx.lineTo(19, 18);
    arrowCtx.lineTo(19, 28);
    arrowCtx.lineTo(13, 28);
    arrowCtx.lineTo(13, 18);
    arrowCtx.lineTo(6, 18);
    arrowCtx.closePath();
    arrowCtx.fill();
    arrowCtx.stroke();
    
    map.addImage('orientation-arrow', {
        width: arrowCanvas.width,
        height: arrowCanvas.height,
        data: arrowCtx.getImageData(0, 0, arrowCanvas.width, arrowCanvas.height).data
    });

    // Create vertical pole image (thin vertical line)
    const poleCanvas = document.createElement('canvas');
    poleCanvas.width = 16;
    poleCanvas.height = 64;
    const poleCtx = poleCanvas.getContext('2d');
    poleCtx.clearRect(0, 0, poleCanvas.width, poleCanvas.height);
    poleCtx.fillStyle = '#555555';
    poleCtx.strokeStyle = '#222222';
    poleCtx.lineWidth = 1;
    // Draw a rounded vertical rectangle centered horizontally
    const poleWidth = 4;
    const poleX = Math.floor((poleCanvas.width - poleWidth) / 2);
    const poleY = 0;
    const poleH = poleCanvas.height;
    poleCtx.beginPath();
    poleCtx.moveTo(poleX + poleWidth, poleY);
    poleCtx.lineTo(poleX + poleWidth, poleY + poleH);
    poleCtx.lineTo(poleX, poleY + poleH);
    poleCtx.lineTo(poleX, poleY);
    poleCtx.closePath();
    poleCtx.fill();
    poleCtx.stroke();

    map.addImage('sign-pole-vertical', {
        width: poleCanvas.width,
        height: poleCanvas.height,
        data: poleCtx.getImageData(0, 0, poleCanvas.width, poleCanvas.height).data
    });

    // Create traffic light support image (mast + 3-light traffic signal box)
    const tlCanvas = document.createElement('canvas');
    tlCanvas.width = 24;
    tlCanvas.height = 64;
    const tlCtx = tlCanvas.getContext('2d');
    tlCtx.clearRect(0, 0, tlCanvas.width, tlCanvas.height);

    const tlMastWidth = 4;
    const tlMastX = Math.floor((tlCanvas.width - tlMastWidth) / 2);
    tlCtx.fillStyle = '#374151';
    tlCtx.strokeStyle = '#111827';
    tlCtx.lineWidth = 1;
    tlCtx.fillRect(tlMastX, 28, tlMastWidth, 36);
    tlCtx.strokeRect(tlMastX, 28, tlMastWidth, 36);

    tlCtx.fillStyle = '#1f2937';
    tlCtx.fillRect(tlMastX - 2, 61, tlMastWidth + 4, 3);

    const boxW = 14;
    const boxH = 28;
    const boxX = Math.floor((tlCanvas.width - boxW) / 2);
    const boxY = 2;
    const radius = 3;

    tlCtx.fillStyle = '#111827';
    tlCtx.strokeStyle = '#e5e7eb';
    tlCtx.lineWidth = 1.2;
    tlCtx.beginPath();
    if (tlCtx.roundRect) {
        tlCtx.roundRect(boxX, boxY, boxW, boxH, radius);
    } else {
        tlCtx.rect(boxX, boxY, boxW, boxH);
    }
    tlCtx.fill();
    tlCtx.stroke();

    const lightRadius = 3;
    const lightCenterX = 12;

    tlCtx.beginPath();
    tlCtx.arc(lightCenterX, 7, lightRadius, 0, 2 * Math.PI);
    tlCtx.fillStyle = '#ef4444';
    tlCtx.fill();
    tlCtx.strokeStyle = '#7f1d1d';
    tlCtx.lineWidth = 0.8;
    tlCtx.stroke();
    tlCtx.beginPath();
    tlCtx.arc(lightCenterX - 1, 6, 1, 0, 2 * Math.PI);
    tlCtx.fillStyle = '#ffffff';
    tlCtx.fill();

    tlCtx.beginPath();
    tlCtx.arc(lightCenterX, 16, lightRadius, 0, 2 * Math.PI);
    tlCtx.fillStyle = '#f59e0b';
    tlCtx.fill();
    tlCtx.strokeStyle = '#78350f';
    tlCtx.lineWidth = 0.8;
    tlCtx.stroke();
    tlCtx.beginPath();
    tlCtx.arc(lightCenterX - 1, 15, 1, 0, 2 * Math.PI);
    tlCtx.fillStyle = '#ffffff';
    tlCtx.fill();

    tlCtx.beginPath();
    tlCtx.arc(lightCenterX, 25, lightRadius, 0, 2 * Math.PI);
    tlCtx.fillStyle = '#10b981';
    tlCtx.fill();
    tlCtx.strokeStyle = '#064e3b';
    tlCtx.lineWidth = 0.8;
    tlCtx.stroke();
    tlCtx.beginPath();
    tlCtx.arc(lightCenterX - 1, 24, 1, 0, 2 * Math.PI);
    tlCtx.fillStyle = '#ffffff';
    tlCtx.fill();

    map.addImage('sign-support-trafficlight', {
        width: tlCanvas.width,
        height: tlCanvas.height,
        data: tlCtx.getImageData(0, 0, tlCanvas.width, tlCanvas.height).data
    });

    const lpCanvas = document.createElement('canvas');
    lpCanvas.width = 24;
    lpCanvas.height = 64;
    const lpCtx = lpCanvas.getContext('2d');
    lpCtx.clearRect(0, 0, lpCanvas.width, lpCanvas.height);

    const lpMastW = 4;
    const lpMastX = Math.floor((lpCanvas.width - lpMastW) / 2);
    lpCtx.fillStyle = '#4b5563';
    lpCtx.strokeStyle = '#1f2937';
    lpCtx.lineWidth = 1;
    lpCtx.fillRect(lpMastX, 10, lpMastW, 54);
    lpCtx.strokeRect(lpMastX, 10, lpMastW, 54);

    lpCtx.fillStyle = '#1f2937';
    lpCtx.fillRect(lpMastX - 2, 61, lpMastW + 4, 3);

    lpCtx.strokeStyle = '#4b5563';
    lpCtx.lineWidth = 2.5;
    lpCtx.beginPath();
    lpCtx.moveTo(lpMastX + 2, 14);
    lpCtx.quadraticCurveTo(lpMastX + 2, 3, 5, 5);
    lpCtx.stroke();

    lpCtx.fillStyle = '#fbbf24';
    lpCtx.strokeStyle = '#b45309';
    lpCtx.lineWidth = 1;
    lpCtx.beginPath();
    if (lpCtx.ellipse) {
        lpCtx.ellipse(5, 5, 4, 2.5, -0.3, 0, 2 * Math.PI);
    } else {
        lpCtx.arc(5, 5, 3, 0, 2 * Math.PI);
    }
    lpCtx.fill();
    lpCtx.stroke();

    map.addImage('sign-support-lightingpole', {
        width: lpCanvas.width,
        height: lpCanvas.height,
        data: lpCtx.getImageData(0, 0, lpCanvas.width, lpCanvas.height).data
    });

    const fcCanvas = document.createElement('canvas');
    fcCanvas.width = 24;
    fcCanvas.height = 64;
    const fcCtx = fcCanvas.getContext('2d');
    fcCtx.clearRect(0, 0, fcCanvas.width, fcCanvas.height);

    fcCtx.fillStyle = '#64748b';
    fcCtx.strokeStyle = '#334155';
    fcCtx.lineWidth = 1;
    fcCtx.fillRect(2, 16, 6, 32);
    fcCtx.strokeRect(2, 16, 6, 32);

    fcCtx.strokeStyle = '#94a3b8';
    fcCtx.lineWidth = 0.8;
    fcCtx.beginPath();
    fcCtx.moveTo(2, 24); fcCtx.lineTo(8, 24);
    fcCtx.moveTo(2, 32); fcCtx.lineTo(8, 32);
    fcCtx.moveTo(2, 40); fcCtx.lineTo(8, 40);
    fcCtx.stroke();

    fcCtx.strokeStyle = '#1e293b';
    fcCtx.lineWidth = 3;
    fcCtx.beginPath();
    fcCtx.moveTo(8, 28);
    fcCtx.lineTo(16, 28);
    fcCtx.stroke();

    fcCtx.fillStyle = '#334155';
    fcCtx.fillRect(14, 18, 4, 20);

    map.addImage('sign-support-facade', {
        width: fcCanvas.width,
        height: fcCanvas.height,
        data: fcCtx.getImageData(0, 0, fcCanvas.width, fcCanvas.height).data
    });

    map.addImage('road-sign-images-loaded', {
        width: 1,
        height: 1,
        data: new Uint8Array([0, 0, 0, 0])
    });
}

// Handle missing image event (from sign.js)
function handleMissingImage(e) {
    const missingId = e.id;
    if (!missingId || !panelTextSpriteMap) {
        return;
    }

    // Handle road sign images (road-sign-xxx format)
    if (missingId.startsWith('road-sign-') && missingId !== 'road-sign-default') {
        if (panelTextSpriteMap.hasImage(missingId)) {
            return;
        }
        if (loadingRoadSignImages.has(missingId)) {
            return;
        }
        const baseUrl = "/static/assets/road_signs/2025/";
        const isScaledX12 = missingId.endsWith('-x12');
        const targetSize = isScaledX12 ? Math.round(64 * 1.2) : 64;
        const signCode = missingId.replace('road-sign-', '').replace(/-x12$/, '');
        
        // Create a grey placeholder immediately
        const greyCanvas = document.createElement('canvas');
        greyCanvas.width = targetSize;
        greyCanvas.height = targetSize;
        const greyCtx = greyCanvas.getContext('2d');
        greyCtx.fillStyle = '#d0d0d0';
        const inset = Math.max(8, Math.round(targetSize * 0.25));
        greyCtx.fillRect(inset, inset, greyCanvas.width - (2 * inset), greyCanvas.height - (2 * inset));
        greyCtx.strokeStyle = '#7a7a7a';
        greyCtx.lineWidth = 2;
        greyCtx.strokeRect(inset + 2, inset + 2, greyCanvas.width - (2 * inset) - 4, greyCanvas.height - (2 * inset) - 4);
        
        const greyData = greyCtx.getImageData(0, 0, greyCanvas.width, greyCanvas.height).data;
        if (panelTextSpriteMap.hasImage(missingId)) {
            panelTextSpriteMap.updateImage(missingId, {
                width: greyCanvas.width,
                height: greyCanvas.height,
                data: greyData
            });
        } else {
            panelTextSpriteMap.addImage(missingId, {
                width: greyCanvas.width,
                height: greyCanvas.height,
                data: greyData
            });
        }
        
        // Try to load the actual image asynchronously
        const img = new Image();
        img.crossOrigin = 'anonymous';
        
        let attemptCount = 0;
        const codeVariations = [
            signCode.toUpperCase(),
            signCode.charAt(0).toUpperCase() + signCode.slice(1),
            signCode.toLowerCase()
        ];
        
        function tryNextVariation() {
            if (attemptCount >= codeVariations.length * 2) {
                return;
            }
            
            const currentVariation = codeVariations[Math.floor(attemptCount / 2)];
            const extension = attemptCount % 2 === 0 ? 'svg' : 'png';
            const url = `${baseUrl}${currentVariation}.${extension}`;
            
            img.src = url;
            attemptCount++;
        }
        
        loadingRoadSignImages.add(missingId);
        img.onload = () => {
            try {
                const canvas = document.createElement('canvas');
                const aspectRatio = img.height / img.width;
                const spriteWidth = targetSize;
                const spriteHeight = Math.round(targetSize * aspectRatio);
                canvas.width = spriteWidth;
                canvas.height = spriteHeight;
                const ctx = canvas.getContext('2d');
                
                ctx.drawImage(img, 0, 0, spriteWidth, spriteHeight);
                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                
                if (panelTextSpriteMap.hasImage(missingId)) {
                    panelTextSpriteMap.removeImage(missingId);
                }

                panelTextSpriteMap.addImage(missingId, {
                    width: canvas.width,
                    height: canvas.height,
                    data: imageData.data
                });

                window.panelRoadSignSpriteMetrics[missingId] = {
                    width: canvas.width,
                    height: canvas.height,
                };
                
                panelTextSpriteMap.triggerRepaint();
                schedulePanelOffsetRefresh();
            } catch (err) {
                console.warn(`Error updating image ${missingId}:`, err);
            } finally {
                loadingRoadSignImages.delete(missingId);
            }
        };
        
        img.onerror = () => {
            tryNextVariation();
        };
        
        tryNextVariation();
        return;
    }
    
    // Handle panel text sprites
    if (missingId.startsWith('panel-text-')) {
        const hasDefinition = ensurePanelTextDefinitionFromMap(panelTextSpriteMap, missingId);
        if (!hasDefinition) {
            return;
        }
        ensurePanelTextSprite(panelTextSpriteMap, missingId);
        return;
    }
}

// Initialize map for panel selection
let regulationMap;
const regulationId = {% if regulation %}'{{ regulation.id }}'{% else %}null{% endif %};
const panelGeoJsonUrl = {% if regulation %}'{% url "sign:regulation_panels_geojson" regulation.id %}'{% else %}null{% endif %};
const associatedPanelsUrl = {% if regulation %}'{% url "sign:regulation_associated_panels" regulation.id %}'{% else %}null{% endif %};
const abrogatedPanelToggleUrl = {% if regulation %}'{% url "sign:regulation_abrogated_panel_toggle" regulation.id %}'{% else %}null{% endif %};

// Removed-panels toggle state
let _showRemovedPanels = false;
let _removedMonths = 12;

// Flux 2: panel selection → measure suggestion state (declared early to be available in click handlers)
let _flux2Mode = false;
let _flux2ActiveSection = null; // 'nouvelle_disposition' or 'abrogation'
const _flux2SelectedPanels = new Map(); // panelId → { id, code, panel_type, street }

function onRemovedToggleChange(checked) {
    _showRemovedPanels = checked;
    document.getElementById('removed-months-group').style.display = checked ? '' : 'none';
    if (regulationMap) loadPanelsData();
}

function onRemovedMonthsChange(val) {
    _removedMonths = val ? parseInt(val) : null;
    if (regulationMap && _showRemovedPanels) loadPanelsData();
}

// Initialize map
function initializeMap() {
    regulationMap = new maplibregl.Map({
        container: 'regulation-map',
        style: window.MAP_STYLE_LIGHT,
        center: [4.3572, 50.8477], // Brussels
        zoom: 13,
        minzoom: 10,
        maxzoom: 22
    });
    
    regulationMap.on('load', function() {
        regulationMap.addControl(new maplibregl.NavigationControl(), 'top-right');
        
        // Load road sign images and setup sprite map
        loadRoadSignImages(regulationMap);
        panelTextSpriteMap = regulationMap;
        
        // Handle missing images (road signs and panel text sprites)
        regulationMap.on('styleimagemissing', handleMissingImage);
        
        // Initialize map sources
        initMapSources();
        
        // Force canvas resize in case layout caused incorrect initial dimensions
        regulationMap.resize();
        
        // Load associated panels list (without loading map data)
        if (regulationId !== null && associatedPanelsUrl) {
            loadAssociatedPanelsList();
        }
        
        // Reload panels on map move or zoom
        regulationMap.on('moveend', function() {
            if (regulationId !== null && panelGeoJsonUrl && regulationMap.getZoom() >= MIN_ZOOM_TO_LOAD) {
                loadPanelsData();
            }
        });
        
        regulationMap.on('zoomend', function() {
            if (regulationId !== null && panelGeoJsonUrl && regulationMap.getZoom() >= MIN_ZOOM_TO_LOAD) {
                loadPanelsData();
            }
        });
    });
}

function initMapSources() {
    // Add source for panels
    regulationMap.addSource('regulation-panels', {
        type: 'geojson',
        data: {
            type: 'FeatureCollection',
            features: []
        }
    });
    
    // Add poles layer (low zoom)
    regulationMap.addLayer({
        id: 'regulation-poles',
        type: 'circle',
        source: 'regulation-panels',
        filter: ['==', ['get', 'asset_type'], 'signpole'],
        paint: {
            'circle-radius': [
                'interpolate', ['linear'], ['zoom'],
                10, 3,
                18, 8
            ],
            'circle-color': '#888888',
            'circle-stroke-color': '#333333',
            'circle-stroke-width': 1,
            'circle-opacity': 0.8
        },
        maxzoom: ZOOM_THRESHOLD_PANELS
    });
    
    // Add panels circles (low zoom)
    regulationMap.addLayer({
        id: 'regulation-panels-circles',
        type: 'circle',
        source: 'regulation-panels',
        filter: ['==', ['get', 'asset_type'], 'signpanel'],
        paint: {
            'circle-radius': [
                'interpolate',
                ['linear'],
                ['zoom'],
                10, 4,
                16, 8,
                17, 10
            ],
            'circle-color': [
                'case',
                ['all', ['==', ['get', 'status'], 'removed'], ['get', 'is_abrogated']], '#8b1a1a',  // Bordeaux: retiré + abrogé
                ['all', ['!=', ['get', 'status'], 'removed'], ['get', 'is_abrogated']], '#6f42c1',  // Violet: actif + abrogé (à retirer)
                ['==', ['get', 'status'], 'removed'], '#fd7e14',                                    // Orange: retiré non abrogé
                ['get', 'is_associated'], '#dc3545',                                               // Rouge: actif associé
                '#0022ff'                                                                           // Bleu: actif non associé
            ],
            'circle-stroke-width': [
                'case',
                ['get', 'is_abrogated'], 2,
                ['==', ['get', 'status'], 'removed'], 2,
                ['get', 'is_associated'], 2,
                1
            ],
            'circle-stroke-color': [
                'case',
                ['all', ['==', ['get', 'status'], 'removed'], ['get', 'is_abrogated']], '#5a0d0d',
                ['all', ['!=', ['get', 'status'], 'removed'], ['get', 'is_abrogated']], '#4a148c',
                ['==', ['get', 'status'], 'removed'], '#e06010',
                ['get', 'is_associated'], '#c82333',
                '#0011aa'
            ],
            'circle-opacity': [
                'case',
                ['==', ['get', 'status'], 'removed'], 0.85,
                0.8
            ]
        },
        maxzoom: ZOOM_THRESHOLD_PANELS
    });

    // Add poles vertical line layer (high zoom)
    regulationMap.addLayer({
        id: 'regulation-poles-vertical',
        type: 'symbol',
        source: 'regulation-panels',
        filter: ['==', ['get', 'asset_type'], 'signpole'],
        layout: {
            'icon-image': [
                'case',
                ['==', ['get', 'support_type'], 'trafficlightpole'], 'sign-support-trafficlight',
                ['==', ['get', 'support_type'], 'lightingpole'], 'sign-support-lightingpole',
                ['==', ['get', 'support_type'], 'facade'], 'sign-support-facade',
                'sign-pole-vertical'
            ],
            'icon-anchor': 'top',
            'icon-offset': ['literal', [0, -5]],
            'icon-allow-overlap': true,
            'icon-ignore-placement': true,
            'icon-size': [
                'interpolate', ['linear'], ['zoom'],
                17, 0.6,
                22, 1.0
            ],
            'symbol-z-order': 'viewport-y'
        },
        paint: {
            'icon-opacity': 0.9
        },
        minzoom: ZOOM_THRESHOLD_PANELS
    });
    
    // Add panels symbol layer (high zoom with dynamic rendering)
    regulationMap.addLayer({
        id: 'regulation-panels-symbols',
        type: 'symbol',
        source: 'regulation-panels',
        filter: ['==', ['get', 'asset_type'], 'signpanel'],
        layout: {
            // Prefer dynamically built text sprite; fallback to static icon then placeholder
            'icon-image': [
                'coalesce',
                ['get', 'panel_text_image_id'],
                ['get', 'panel_icon_image_scaled'],
                ['get', 'panel_icon_image'],
                'road-sign-default'
            ],
            'icon-size': [
                'interpolate',
                ['linear'],
                ['zoom'],
                17, ['*', 0.3, ['to-number', ['get', 'panel_scale_factor'], 1.0]],
                22, ['*', 0.8, ['to-number', ['get', 'panel_scale_factor'], 1.0]]
            ],
            'icon-allow-overlap': true,
            'icon-ignore-placement': true,
            'icon-offset': [
                'coalesce',
                ['get', 'panel_stack_offset'],
                ['get', 'panel_text_offset'],
                ['get', 'panel_icon_offset'],
                ['literal', [0, 0]]
            ],
            'symbol-z-order': 'viewport-y',
            'icon-rotate': 0
        },
        paint: {
            'icon-opacity': [
                'case',
                ['all', ['==', ['get', 'status'], 'removed'], ['get', 'is_abrogated']], 1.0,
                ['all', ['!=', ['get', 'status'], 'removed'], ['get', 'is_abrogated']], 1.0,  // Active+abrogé: full opacity
                ['==', ['get', 'status'], 'removed'], 0.6,  // Dimmed for removed non-abrogated
                ['get', 'is_associated'], 1.0,
                0.8
            ]
        },
        minzoom: ZOOM_THRESHOLD_PANELS
    });
    
    // Add orientation arrow layer
    regulationMap.addLayer({
        id: 'regulation-panels-orientation',
        type: 'symbol',
        source: 'regulation-panels',
        filter: [
            'all',
            ['==', ['get', 'asset_type'], 'signpanel'],
            ['has', 'orientation'],
            ['==', ['get', 'show_orientation_arrow'], true]
        ],
        layout: {
            'icon-image': 'orientation-arrow',
            'icon-size': [
                'interpolate',
                ['linear'],
                ['zoom'],
                17, ['*', 0.3, ['to-number', ['get', 'panel_scale_factor'], 1.0]],
                22, ['*', 0.8, ['to-number', ['get', 'panel_scale_factor'], 1.0]]
            ],
            'icon-rotation-alignment': 'map',
            'icon-pitch-alignment': 'map',
            'icon-rotate': ['to-number', ['get', 'orientation'], 0],
            'icon-allow-overlap': true,
            'icon-ignore-placement': true,
            'icon-offset': [
                'coalesce',
                ['get', 'panel_orientation_offset'],
                ['literal', [0, 0]]
            ],
            'symbol-z-order': 'viewport-y'
        },
        paint: {
            'icon-opacity': 0.7
        },
        minzoom: ZOOM_THRESHOLD_PANELS
    });
    
    // Add red highlight border for associated panels
    regulationMap.addLayer({
        id: 'regulation-panels-associated-highlight',
        type: 'circle',
        source: 'regulation-panels',
        filter: ['all',
            ['==', ['get', 'asset_type'], 'signpanel'],
            ['==', ['get', 'is_associated'], true]
        ],
        paint: {
            'circle-radius': [
                'interpolate',
                ['linear'],
                ['zoom'],
                17, 16,
                22, 28
            ],
            'circle-color': 'rgba(0,0,0,0)',
            'circle-stroke-width': 3,
            'circle-stroke-color': '#dc3545',
            'circle-stroke-opacity': 1
        },
        minzoom: ZOOM_THRESHOLD_PANELS
    });

    // Add purple highlight border for active abrogated panels
    regulationMap.addLayer({
        id: 'regulation-panels-abrogated-highlight',
        type: 'circle',
        source: 'regulation-panels',
        filter: ['all',
            ['==', ['get', 'asset_type'], 'signpanel'],
            ['get', 'is_abrogated'],
            ['!=', ['get', 'status'], 'removed']
        ],
        paint: {
            'circle-radius': [
                'interpolate',
                ['linear'],
                ['zoom'],
                17, 16,
                22, 28
            ],
            'circle-color': 'rgba(0,0,0,0)',
            'circle-stroke-width': 3,
            'circle-stroke-color': '#6f42c1',
            'circle-stroke-opacity': 1
        },
        minzoom: ZOOM_THRESHOLD_PANELS
    });

    // Cyan highlight for panels selected in measure panel edit mode
    // Note: feature-state cannot be used in filters, only in paint expressions
    regulationMap.addLayer({
        id: 'regulation-panels-measure-edit-highlight',
        type: 'circle',
        source: 'regulation-panels',
        paint: {
            'circle-radius': [
                'interpolate',
                ['linear'],
                ['zoom'],
                17, 17,
                22, 29
            ],
            'circle-color': 'rgba(0,0,0,0)',
            'circle-stroke-width': ['case', ['boolean', ['feature-state', 'measureSelected'], false], 4, 0],
            'circle-stroke-color': '#0dcaf0',
            'circle-stroke-opacity': ['case', ['boolean', ['feature-state', 'measureSelected'], false], 1, 0]
        },
        minzoom: ZOOM_THRESHOLD_PANELS
    });
    
    // Add click handlers
    regulationMap.on('click', 'regulation-panels-circles', handlePanelClick);
    regulationMap.on('click', 'regulation-panels-symbols', handlePanelClick);
    
    // Change cursor on hover
    regulationMap.on('mouseenter', 'regulation-panels-circles', () => {
        regulationMap.getCanvas().style.cursor = 'pointer';
    });
    regulationMap.on('mouseleave', 'regulation-panels-circles', () => {
        regulationMap.getCanvas().style.cursor = '';
    });
    regulationMap.on('mouseenter', 'regulation-panels-symbols', () => {
        regulationMap.getCanvas().style.cursor = 'pointer';
    });
    regulationMap.on('mouseleave', 'regulation-panels-symbols', () => {
        regulationMap.getCanvas().style.cursor = '';
    });
}

// Load panels data from GeoJSON
async function loadPanelsData() {
    // Ne charger que si le zoom est suffisant
    if (regulationMap.getZoom() < MIN_ZOOM_TO_LOAD) {
        // Vider la source si zoom trop faible
        if (regulationMap.getSource('regulation-panels')) {
            regulationMap.getSource('regulation-panels').setData({
                type: 'FeatureCollection',
                features: []
            });
        }
        return;
    }
    
    try {
        const bounds = regulationMap.getBounds();
        const bbox = {
            type: "Polygon",
            coordinates: [[
                [bounds.getWest(), bounds.getSouth()],
                [bounds.getEast(), bounds.getSouth()],
                [bounds.getEast(), bounds.getNorth()],
                [bounds.getWest(), bounds.getNorth()],
                [bounds.getWest(), bounds.getSouth()]
            ]]
        };
        
        const response = await fetch(panelGeoJsonUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify({
                filter_geom: {
                    type: "Feature",
                    geometry: bbox
                },
                include_removed: _showRemovedPanels,
                removed_months: _showRemovedPanels ? (_removedMonths || null) : null
            })
        });
        
        const data = await response.json();
        calculatePanelOffsets(data.features || []);
        
        if (regulationMap.getSource('regulation-panels')) {
            regulationMap.getSource('regulation-panels').setData(data);
        }
        
        // Enqueue panel text sprites after assets are loaded
        try {
            if (data && data.features) {
                enqueuePanelTextSprites(data.features);
            }
        } catch (err) {
            console.warn('Error enqueueing panel text sprites:', err);
        }
    } catch (error) {
        console.error('Error loading panels:', error);
    }
}
// Abrogation mode state
let _abrogationMode = false;

// Measure panel edit mode state
let _measurePanelEditMode = false;
let _measurePanelEditArticleId = null;
let _measurePanelEditSection = null;
let _measurePanelEditPanelIds = new Set();

function toggleAbrogationMode() {
    _abrogationMode = !_abrogationMode;
    // Deactivate panel-select mode if enabling abrogation mode
    if (_abrogationMode && _flux2Mode) {
        exitPanelSelectMode();
    }
    const btn = document.getElementById('btn-abrogation-mode');
    const banner = document.getElementById('abrogation-mode-banner');
    if (btn) {
        btn.classList.toggle('btn-outline-secondary', !_abrogationMode);
        btn.classList.toggle('btn-purple', _abrogationMode);
        btn.style.background = _abrogationMode ? '#6f42c1' : '';
        btn.style.color = _abrogationMode ? '#fff' : '';
        btn.style.borderColor = _abrogationMode ? '#6f42c1' : '';
    }
    if (banner) banner.style.display = _abrogationMode ? '' : 'none';
}

// ── Measure Panel Edit Mode ───────────────────────────────────────────────────

async function enterMeasurePanelEditMode(articleId, section, articleLabel) {
    // Load current panel IDs for this article/section
    let panelIds = [];
    let bbox = null;
    if (_measurePanelsBase) {
        try {
            const url = `${_measurePanelsUrl(articleId)}?section=${encodeURIComponent(section)}`;
            const resp = await fetch(url);
            const data = await resp.json();
            panelIds = (data.panels || []).filter(p => p.selected).map(p => p.id);
            bbox = data.bbox || null;
        } catch(e) { console.error(e); }
    }

    _measurePanelEditMode = true;
    _measurePanelEditArticleId = articleId;
    _measurePanelEditSection = section;
    _measurePanelEditPanelIds = new Set(panelIds);

    _updateMeasureEditFeatureStates();

    document.getElementById('measure-edit-article-label').textContent = articleLabel;
    document.getElementById('measure-edit-count').textContent = panelIds.length;
    document.getElementById('measure-panel-edit-banner').style.display = '';
    document.getElementById('measure-edit-search').value = '';
    document.getElementById('measure-edit-search-results').style.display = 'none';

    document.getElementById('measure-panel-edit-banner')?.scrollIntoView({ behavior: 'smooth', block: 'start' });

    if (regulationMap) {
        regulationMap.resize();
        // Zoom to this measure's panels, or fall back to all associated panels
        if (bbox) {
            regulationMap.fitBounds(
                [[bbox[0], bbox[1]], [bbox[2], bbox[3]]],
                { padding: 60, maxZoom: 18, duration: 800 }
            );
        } else if (associatedPanelsUrl) {
            // No panels yet for this measure — zoom to all associated panels
            try {
                const r = await fetch(associatedPanelsUrl);
                const d = await r.json();
                if (d.bbox) regulationMap.fitBounds(
                    [[d.bbox[0], d.bbox[1]], [d.bbox[2], d.bbox[3]]],
                    { padding: 60, maxZoom: 17, duration: 800 }
                );
            } catch(e) { console.error(e); }
        }
    }
}

function _updateMeasureEditFeatureStates(oldIds = new Set()) {
    if (!regulationMap) return;
    oldIds.forEach(id => regulationMap.setFeatureState(
        { source: 'regulation-panels', id }, { measureSelected: false }
    ));
    _measurePanelEditPanelIds.forEach(id => regulationMap.setFeatureState(
        { source: 'regulation-panels', id }, { measureSelected: true }
    ));
    const el = document.getElementById('measure-edit-count');
    if (el) el.textContent = _measurePanelEditPanelIds.size;
}

async function exitMeasurePanelEditMode() {
    if (!_measurePanelEditMode) return;
    // Clear feature states
    _measurePanelEditPanelIds.forEach(id => regulationMap?.setFeatureState(
        { source: 'regulation-panels', id }, { measureSelected: false }
    ));

    const articleId = _measurePanelEditArticleId;
    const section   = _measurePanelEditSection;
    const finalIds  = Array.from(_measurePanelEditPanelIds);

    _measurePanelEditMode = false;
    _measurePanelEditArticleId = null;
    _measurePanelEditSection = null;
    _measurePanelEditPanelIds = new Set();

    document.getElementById('measure-panel-edit-banner').style.display = 'none';
    document.getElementById('measure-edit-search-results').style.display = 'none';

    // Atomically persist the final panel set (eliminates race conditions from live toggles)
    if (articleId && _measurePanelsSetBase) {
        try {
            await fetch(_measurePanelsSetUrl(articleId), {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value },
                body: JSON.stringify({ panel_ids: finalIds, section }),
            });
        } catch(e) { console.error('Error saving final panel set:', e); }
    }

    // Refresh map symbology (is_associated layer) and reload trees
    if (regulationMap) loadPanelsData();
    loadArticleTree();
    loadAbrogationArticleTree();
}

async function toggleMeasurePanelFromMap(panelId, props) {
    const oldIds = new Set(_measurePanelEditPanelIds);
    if (_measurePanelEditPanelIds.has(panelId)) {
        _measurePanelEditPanelIds.delete(panelId);
    } else {
        _measurePanelEditPanelIds.add(panelId);
    }
    _updateMeasureEditFeatureStates(oldIds);
    await measurePanelToggle(_measurePanelEditArticleId, panelId, _measurePanelEditSection, null);
}

// Handle panel click
function handlePanelClick(e) {
    if (e.features.length > 0) {
        const feature = e.features[0];
        const panelId = feature.id;
        const status = feature.properties.status;
        if (_flux2Mode) {
            // Flux 2 mode: add/remove from the panel selection for measure suggestion
            if (_flux2SelectedPanels.has(panelId)) {
                _flux2SelectedPanels.delete(panelId);
            } else {
                _flux2SelectedPanels.set(panelId, {
                    id: panelId,
                    code: feature.properties.code || '',
                    panel_type: feature.properties.panel_type || '',
                    street: feature.properties.street || '',
                });
            }
            renderFlux2Selection();
        } else if (_measurePanelEditMode) {
            // Measure panel edit mode: toggle this panel for the current article
            toggleMeasurePanelFromMap(panelId, feature.properties);
        } else if (_abrogationMode || status === 'removed') {
            // Abrogation mode: mark/unmark any panel as abrogated in this RCP
            toggleAbrogatedFromMap(panelId);
        }
        // Normal mode: no action on map click (panels are managed per-measure)
    }
}

// Toggle abrogated status for a removed panel clicked on the map
async function toggleAbrogatedFromMap(panelId) {
    if (!abrogatedPanelToggleUrl) {
        alert("{% translate "Veuillez d'abord créer le règlement." %}");
        return;
    }
    try {
        // Determine current state from map source (most up-to-date)
        const source = regulationMap.getSource('regulation-panels');
        const feature = source?._data?.features?.find(f => f.id === panelId);
        const props = feature?.properties || {};
        const isCurrentlyAbrogated = feature
            ? !!props.is_abrogated
            : _abrogatedPanels.has(panelId);

        const panelData = {
            id: panelId,
            code: props.code || '',
            panel_type: props.panel_type || '',
            street: props.street || '',
            status: props.status || '',
            selected: true,
        };

        // Track whether this panel was associated before abrogation
        const wasAlreadyAssociated = !!props.is_associated;

        // Optimistic update: immediately reflect change in the abrogated section
        if (isCurrentlyAbrogated) {
            _abrogatedPanels.delete(panelId);
        } else {
            _abrogatedPanels.set(panelId, panelData);
            if (!wasAlreadyAssociated) {
                _abrogatedNewlyAssociated.add(panelId);
            }
        }
        renderAbrogatedPanelsList();

        // Optimistic update: also add/remove from the associated panels list
        if (!isCurrentlyAbrogated) {
            // Adding: inject immediately with the "À abroger" badge
            const list = document.getElementById('panels-list');
            const alreadyInList = list?.querySelector(`[data-panel-id="${panelId}"]`);
            if (!alreadyInList && list) {
                const item = document.createElement('div');
                item.className = 'panel-item associated abrogated';
                item.dataset.panelId = panelId;
                item.style.background = '#ede7f6';
                item.style.borderLeft = '3px solid #6f42c1';
                item.innerHTML = `
                    <div>
                        <div class="panel-item-code">${escapeHtml(panelData.code)}<span class="badge ms-1" style="background:#6f42c1;font-size:.7rem;">{% trans "À abroger" %}</span></div>
                        <div class="panel-item-info">${escapeHtml(panelData.panel_type || '—')} • ${escapeHtml(panelData.street || '—')}</div>
                    </div>
                    <div class="panel-item-actions">
                        <button type="button" class="btn-deselect" onclick="togglePanelAssociation(${panelId})">
                            <i class="bi bi-x"></i> {% trans "Enlever" %}
                        </button>
                    </div>
                `;
                // Remove the "empty" placeholder if present
                const placeholder = list.querySelector('.text-muted.text-center');
                if (placeholder) placeholder.remove();
                list.appendChild(item);
                const countEl = document.getElementById('panels-count');
                if (countEl) countEl.textContent = parseInt(countEl.textContent || '0') + 1;
            }
        }
        // When removing abrogation: if the panel was added by abrogation, also remove
        // it from the associated list immediately
        const alsoDisassociate = isCurrentlyAbrogated && _abrogatedNewlyAssociated.has(panelId);
        if (alsoDisassociate) {
            const list = document.getElementById('panels-list');
            list?.querySelector(`[data-panel-id="${panelId}"]`)?.remove();
            const countEl = document.getElementById('panels-count');
            if (countEl) countEl.textContent = Math.max(0, parseInt(countEl.textContent || '0') - 1);
            _abrogatedNewlyAssociated.delete(panelId);
        }

        const resp = await fetch(abrogatedPanelToggleUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify({ panel_id: panelId, also_disassociate: alsoDisassociate })
        });
        if (resp.ok) {
            // Refresh map colours and associated panels list (canonical state)
            await Promise.all([loadPanelsData(), loadAssociatedPanelsList(true)]);
        } else {
            // Revert optimistic updates on server error
            if (isCurrentlyAbrogated) {
                _abrogatedPanels.set(panelId, panelData);
                if (alsoDisassociate) {
                    _abrogatedNewlyAssociated.add(panelId);
                    // Re-inject into associated list
                    await loadAssociatedPanelsList(true);
                }
            } else {
                _abrogatedPanels.delete(panelId);
                _abrogatedNewlyAssociated.delete(panelId);
                const list = document.getElementById('panels-list');
                list?.querySelector(`[data-panel-id="${panelId}"]`)?.remove();
            }
            renderAbrogatedPanelsList();
        }
    } catch(e) {
        console.error('Error toggling abrogated panel:', e);
    }
}

// Zoom the map to the bounding box of all panels associated with this regulation
async function loadAssociatedPanelsList(skipZoom = false) {
    if (skipZoom || !associatedPanelsUrl || !regulationMap) return;
    try {
        const response = await fetch(associatedPanelsUrl);
        const data = await response.json();
        if (data.bbox) {
            regulationMap.fitBounds(
                [[data.bbox[0], data.bbox[1]], [data.bbox[2], data.bbox[3]]],
                { padding: 60, maxZoom: 17, duration: 800 }
            );
        }
    } catch (error) {
        console.error('Error loading associated panels bbox:', error);
    }
}

// Toggle panel association
async function togglePanelAssociation(panelId) {
    if (!regulationId) {
        alert("{% translate "Veuillez d'abord créer le règlement." %}");
        return;
    }
    
    // Find if panel is currently associated
    const source = regulationMap.getSource('regulation-panels');
    if (!source || !source._data || !source._data.features) return;
    
    const panel = source._data.features.find(f => f.id === panelId);
    if (!panel) return;
    
    const isCurrentlyAssociated = panel.properties.is_associated;
    const action = isCurrentlyAssociated ? 'remove' : 'add';
    
    try {
        const response = await fetch(`/sign/regulations/${regulationId}/panels/update/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify({
                action: action,
                panel_id: panelId
            })
        });
        
        if (response.ok) {
            // Reload map data and list — no zoom change on user interaction
            await loadPanelsData();
            await loadAssociatedPanelsList(true);
        } else {
            alert("{% trans 'Erreur lors de la mise à jour du panneau.' %}");
        }
    } catch (error) {
        console.error('Error updating panel association:', error);
        alert("{% trans 'Erreur lors de la mise à jour du panneau.' %}");
    }
}

// Update panels list (only associated panels)
function updatePanelsList(panels) {
    const list = document.getElementById('panels-list');
    list.innerHTML = '';
    
    if (!panels || panels.length === 0) {
        list.innerHTML = '<div class="p-3 text-muted text-center">{% trans "Aucun panneau associé" %}</div>';
        return;
    }
    
    panels.forEach(panel => {
        const item = document.createElement('div');
        item.className = 'panel-item associated' + (panel.is_abrogated ? ' abrogated' : '');
        item.dataset.panelId = panel.id;
        if (panel.is_abrogated) {
            item.style.background = '#ede7f6';
            item.style.borderLeft = '3px solid #6f42c1';
        }
        const abrogatedBadge = panel.is_abrogated
            ? `<span class="badge ms-1" style="background:#6f42c1;font-size:.7rem;">{% trans "À abroger" %}</span>`
            : '';
        item.innerHTML = `
            <div>
                <div class="panel-item-code">${escapeHtml(panel.code)}${abrogatedBadge}</div>
                <div class="panel-item-info">${escapeHtml(panel.panel_type || '—')} • ${escapeHtml(panel.street || '—')}</div>
            </div>
            <div class="panel-item-actions">
                <button type="button" class="btn-deselect" onclick="togglePanelAssociation(${panel.id})">
                    <i class="bi bi-x"></i> {% trans "Enlever" %}
                </button>
            </div>
        `;
        list.appendChild(item);
    });
}

// Create regulation
async function createRegulation() {
    const form = document.getElementById('regulation-form');
    const formData = new FormData(form);
    
    try {
        const response = await fetch('{% url "sign:regulation_create" %}', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            window.location.href = result.redirect_url;
        } else {
            alert(result.error || "{% trans 'Erreur lors de la création.' %}");
        }
    } catch (error) {
        console.error('Error creating regulation:', error);
        alert("{% trans 'Erreur lors de la création.' %}");
    }
}

// ── Article Tree ────────────────────────────────────────────────────────────
{% if regulation %}
const _articlesTreeUrl = "{% url 'sign:regulation_articles_tree' regulation.id %}";
const _articlesSearchUrl = "{% url 'sign:regulation_articles_search' regulation.id %}";
const _articleSelectBase = "{% url 'sign:regulation_article_select' regulation.id 0 %}";
// Voirie suggest URL templates: replace /0/ with the actual article PK
const _voiriesSuggestBase = "{% url 'sign:regulation_article_voiries_suggest' regulation.id 0 %}";
// Abrogation articles
const _abrogationArticlesTreeUrl = "{% url 'sign:regulation_abrogation_articles_tree' regulation.id %}";
const _articleAbrogationSelectBase = "{% url 'sign:regulation_article_select' regulation.id 0 %}";
const _abrogationArticlesSearchUrl = "{% url 'sign:regulation_abrogation_articles_search' regulation.id %}";
const _abrogationVoiriesSuggestBase = "{% url 'sign:regulation_abrogation_article_voiries_suggest' regulation.id 0 %}";
// Article deselect
const _articleDeselectBase = "{% url 'sign:regulation_article_deselect' regulation.id 0 %}";
const _articleChildrenSelectableBase = "{% url 'sign:regulation_article_children_selectable' regulation.id 0 %}";
const _articleCreateCustomBase = "{% url 'sign:regulation_article_create_custom' regulation.id 0 %}";
const _articleUpdateTextBase = "{% url 'sign:regulation_article_update_text' regulation.id 0 %}";
{% else %}
const _articlesTreeUrl = null;
const _articlesSearchUrl = null;
const _articleSelectBase = null;
const _voiriesSuggestBase = null;
const _abrogationArticlesTreeUrl = null;
const _articleAbrogationSelectBase = null;
const _abrogationArticlesSearchUrl = null;
const _abrogationVoiriesSuggestBase = null;
const _articleDeselectBase = null;
const _articleChildrenSelectableBase = null;
const _articleCreateCustomBase = null;
const _articleUpdateTextBase = null;
{% endif %}

function _voiriesSuggestUrl(pk) { return _voiriesSuggestBase.replace('/0/', `/${pk}/`); }
function _abrogationVoiriesSuggestUrl(pk) { return _abrogationVoiriesSuggestBase.replace('/0/', `/${pk}/`); }
function _articleDeselectUrl(pk) { return _articleDeselectBase ? _articleDeselectBase.replace('/0/', `/${pk}/`) : null; }
function _articleSelectUrl(pk) { return _articleSelectBase ? _articleSelectBase.replace('/0/', `/${pk}/`) : null; }
function _articleAbrogationSelectUrl(pk) { return _articleAbrogationSelectBase ? _articleAbrogationSelectBase.replace('/0/', `/${pk}/`) : null; }
function _articleChildrenSelectableUrl(pk) { return _articleChildrenSelectableBase ? _articleChildrenSelectableBase.replace('/0/', `/${pk}/`) : null; }
function _articleCreateCustomUrl(pk) { return _articleCreateCustomBase ? _articleCreateCustomBase.replace('/0/', `/${pk}/`) : null; }
function _articleUpdateTextUrl(pk) { return _articleUpdateTextBase ? _articleUpdateTextBase.replace('/0/', `/${pk}/`) : null; }

// ── Article search (nouvelle_disposition) ───────────────────────────────────
let _articleSearchTimer = null;

function openAddArticleSearch() {
    document.getElementById('article-search-panel').style.display = '';
    document.getElementById('article-search-results').innerHTML = '';
    const input = document.getElementById('article-search-input');
    input.value = '';
    input.focus();
}

function closeAddArticleSearch() {
    document.getElementById('article-search-panel').style.display = 'none';
    document.getElementById('article-search-results').innerHTML = '';
}

async function doArticleSearch(q) {
    const resultsEl = document.getElementById('article-search-results');
    if (!_articlesSearchUrl || q.length < 2) { resultsEl.innerHTML = ''; return; }
    const data = await fetch(_articlesSearchUrl + '?q=' + encodeURIComponent(q)).then(r => r.json());
    resultsEl.innerHTML = '';
    if (!data.results || !data.results.length) {
        resultsEl.innerHTML = '<div class="text-muted small p-1">{% trans "Aucun résultat." %}</div>';
        return;
    }
    data.results.forEach(art => {
        const row = document.createElement('div');
        row.className = 'p-1 border-bottom d-flex justify-content-between align-items-start gap-2 article-search-row';
        row.style.cssText = 'cursor:pointer;';
        row.innerHTML = `<div><div class="small fw-semibold">${art.breadcrumb}</div><div class="text-muted" style="font-size:.8rem;">${art.text_fr || ''}</div></div>`;
        row.onclick = async () => {
            const url = _articleSelectUrl(art.id);
            if (!url) return;
            await fetch(url, { method: 'POST', headers: { 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value, 'Content-Type': 'application/json' }, body: JSON.stringify({ section: 'nouvelle_disposition' }) });
            closeAddArticleSearch();
            loadArticleTree();
        };
        resultsEl.appendChild(row);
    });
}

// ── Article search (abrogation) ───────────────────────────────────────────────
let _abrogationArticleSearchTimer = null;

function openAddAbrogationArticleSearch() {
    document.getElementById('abrogation-article-search-panel').style.display = '';
    document.getElementById('abrogation-article-search-results').innerHTML = '';
    const input = document.getElementById('abrogation-article-search-input');
    input.value = '';
    input.focus();
}

function closeAddAbrogationArticleSearch() {
    document.getElementById('abrogation-article-search-panel').style.display = 'none';
    document.getElementById('abrogation-article-search-results').innerHTML = '';
}

async function doAbrogationArticleSearch(q) {
    const resultsEl = document.getElementById('abrogation-article-search-results');
    if (!_abrogationArticlesSearchUrl || q.length < 2) { resultsEl.innerHTML = ''; return; }
    const data = await fetch(_abrogationArticlesSearchUrl + '?q=' + encodeURIComponent(q)).then(r => r.json());
    resultsEl.innerHTML = '';
    if (!data.results || !data.results.length) {
        resultsEl.innerHTML = '<div class="text-muted small p-1">{% trans "Aucun résultat." %}</div>';
        return;
    }
    data.results.forEach(art => {
        const row = document.createElement('div');
        row.className = 'p-1 border-bottom d-flex justify-content-between align-items-start gap-2 article-search-row';
        row.style.cssText = 'cursor:pointer;';
        row.innerHTML = `<div><div class="small fw-semibold">${art.breadcrumb}</div><div class="text-muted" style="font-size:.8rem;">${art.text_fr || ''}</div></div>`;
        row.onclick = async () => {
            const url = _articleAbrogationSelectUrl(art.id);
            if (!url) return;
            await fetch(url, { method: 'POST', headers: { 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value, 'Content-Type': 'application/json' }, body: JSON.stringify({ section: 'abrogation' }) });
            closeAddAbrogationArticleSearch();
            loadAbrogationArticleTree();
        };
        resultsEl.appendChild(row);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    const ndInput = document.getElementById('article-search-input');
    if (ndInput) {
        ndInput.addEventListener('input', () => {
            clearTimeout(_articleSearchTimer);
            _articleSearchTimer = setTimeout(() => doArticleSearch(ndInput.value.trim()), 300);
        });
    }
    const abrogInput = document.getElementById('abrogation-article-search-input');
    if (abrogInput) {
        abrogInput.addEventListener('input', () => {
            clearTimeout(_abrogationArticleSearchTimer);
            _abrogationArticleSearchTimer = setTimeout(() => doAbrogationArticleSearch(abrogInput.value.trim()), 300);
        });
    }
});

async function deselectArticle(articleId, section, reloadFn) {
    const url = _articleDeselectUrl(articleId);
    if (!url) return;
    if (!confirm('{% trans "Supprimer cet article et ses sous-articles de la sélection ?" %}')) return;
    try {
        const resp = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            },
            body: JSON.stringify({ section }),
        });
        const data = await resp.json();
        if (data.success) {
            reloadFn();
        }
    } catch(e) {
        console.error(e);
    }
}


// ── Suggest text via panels modal ─────────────────────────────────────────────
let _suggestModalFrInput = null;
let _suggestModalNlInput = null;
let _suggestModalCombinedFr = '';
let _suggestModalCombinedNl = '';

function openSuggestTextModal(articleId, frInput, nlInput, section) {
    _suggestModalFrInput = frInput;
    _suggestModalNlInput = nlInput;
    _suggestModalCombinedFr = '';
    _suggestModalCombinedNl = '';

    const loadingEl = document.getElementById('suggest-modal-loading');
    const contentEl = document.getElementById('suggest-modal-content');
    const emptyEl   = document.getElementById('suggest-modal-empty');
    const frEl      = document.getElementById('suggest-modal-fr');
    const nlEl      = document.getElementById('suggest-modal-nl');
    const confirmBtn = document.getElementById('suggest-modal-confirm');

    loadingEl.style.display = '';
    contentEl.style.display = 'none';
    emptyEl.style.display = 'none';
    confirmBtn.disabled = true;

    const modal = new bootstrap.Modal(document.getElementById('suggestTextModal'));
    modal.show();

    const suggestUrl = section === 'abrogation'
        ? _abrogationVoiriesSuggestUrl(articleId)
        : _voiriesSuggestUrl(articleId);

    fetch(suggestUrl)
        .then(r => r.json())
        .then(data => {
            loadingEl.style.display = 'none';
            const suggestions = data.suggestions || [];
            if (!suggestions.length) {
                emptyEl.style.display = '';
                return;
            }
            const frParts = suggestions.map(s => s.text_fr).filter(Boolean);
            const nlParts = suggestions.map(s => s.text_nl).filter(Boolean);
            _suggestModalCombinedFr = frParts.join(' ');
            _suggestModalCombinedNl = nlParts.join(' ');
            frEl.textContent = _suggestModalCombinedFr || '—';
            nlEl.textContent = _suggestModalCombinedNl || '—';
            contentEl.style.display = '';
            confirmBtn.disabled = false;
        })
        .catch(() => {
            loadingEl.style.display = 'none';
            emptyEl.style.display = '';
        });
}

document.addEventListener('DOMContentLoaded', () => {
    const confirmBtn = document.getElementById('suggest-modal-confirm');
    if (confirmBtn) {
        confirmBtn.addEventListener('click', () => {
            if (_suggestModalFrInput) _suggestModalFrInput.value = _suggestModalCombinedFr;
            if (_suggestModalNlInput) _suggestModalNlInput.value = _suggestModalCombinedNl;
            bootstrap.Modal.getInstance(document.getElementById('suggestTextModal')).hide();
        });
    }
});

// ── Measure ↔ Panel URLs ———————————————————————————————————————————
{% if regulation %}
const _measurePanelsBase         = "{% url 'sign:regulation_measure_panels' regulation.id 0 %}";
const _measurePanelsSaveBase     = "{% url 'sign:regulation_measure_panels_save' regulation.id 0 %}";
const _measurePanelsSetBase      = "{% url 'sign:regulation_measure_panels_set' regulation.id 0 %}";
const _measurePanelsToggleBase   = "{% url 'sign:regulation_measure_panel_toggle' regulation.id 0 %}";
const _measureSuggestArticlesUrl = "{% url 'sign:regulation_measure_suggest_articles' regulation.id %}";
{% else %}
const _measurePanelsBase         = null;
const _measurePanelsSaveBase     = null;
const _measurePanelsSetBase      = null;
const _measurePanelsToggleBase   = null;
const _measureSuggestArticlesUrl = null;
{% endif %}
function _measurePanelsUrl(pk)       { return _measurePanelsBase.replace('/0/', `/${pk}/`); }
function _measurePanelsSaveUrl(pk)   { return _measurePanelsSaveBase.replace('/0/', `/${pk}/`); }
function _measurePanelsSetUrl(pk)    { return _measurePanelsSetBase.replace('/0/', `/${pk}/`); }
function _measurePanelsToggleUrl(pk) { return _measurePanelsToggleBase.replace('/0/', `/${pk}/`); }

// ── Abrogated Panels ─────────────────────────────────────────────────────────
{% if regulation %}
const _abrogatedPanelsUrl     = "{% url 'sign:regulation_abrogated_panels_list' regulation.id %}";
const _abrogatedPanelsSaveUrl = "{% url 'sign:regulation_abrogated_panels_save' regulation.id %}";
{% else %}
const _abrogatedPanelsUrl     = null;
const _abrogatedPanelsSaveUrl = null;
{% endif %}

function escapeHtml(str) {
    if (!str) return '';
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

// In-memory set of selected abrogated panel objects: id → {id, code, panel_type, street, status}
const _abrogatedPanels = new Map();
// Tracks panels that were NOT previously associated but got added to panels M2M via abrogation
const _abrogatedNewlyAssociated = new Set();
// Temporary cache of search results so onclick only needs the numeric ID
const _abrogatedSearchCache = new Map();

function addAbrogatedPanelById(id) {
    const panel = _abrogatedSearchCache.get(id);
    if (panel) addAbrogatedPanel(panel);
}

async function loadAbrogatedPanels() {
    if (!_abrogatedPanelsUrl) return;
    const btn = document.getElementById('btn-load-abrogated');
    if (btn) { btn.disabled = true; btn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>{% trans "Chargement…" %}'; }
    try {
        const resp = await fetch(_abrogatedPanelsUrl);
        const data = await resp.json();
        _abrogatedPanels.clear();
        (data.panels || []).forEach(p => { if (p.selected) _abrogatedPanels.set(p.id, p); });
        renderAbrogatedPanelsList();
        // Refresh map so is_abrogated colours update
        if (regulationMap && regulationMap.getZoom() >= MIN_ZOOM_TO_LOAD) {
            loadPanelsData();
        }
    } catch(e) {
        console.error(e);
    } finally {
        if (btn) { btn.disabled = false; btn.innerHTML = '<i class="bi bi-arrow-clockwise me-1"></i>{% trans "Charger" %}'; }
    }
}

function renderAbrogatedPanelsList() {
    const container = document.getElementById('abrogated-panels-list');
    if (!container) return;
    if (_abrogatedPanels.size === 0) {
        container.innerHTML = '<div class="text-muted small p-2"><i class="bi bi-info-circle me-1"></i>{% trans "Aucun panneau sélectionné." %}</div>';
        return;
    }
    let html = '<ul class="list-group list-group-flush" style="font-size:.86rem;">';
    _abrogatedPanels.forEach(p => {
        const isRemoved = p.status === 'removed';
        const statusBadge = isRemoved
            ? `<span class="badge ms-1" style="background:#8b1a1a;font-size:.7rem;">{% trans "Retiré" %}</span>`
            : `<span class="badge ms-1" style="background:#6f42c1;font-size:.7rem;">{% trans "À retirer" %}</span>`;
        html += `<li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
            <span>
                <span class="badge bg-secondary me-1">${escapeHtml(p.code || '–')}</span>
                <span class="text-muted me-1">${escapeHtml(p.panel_type || '')}</span>
                ${escapeHtml(p.street || '')}
                ${statusBadge}
            </span>
            <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1"
                    onclick="removeAbrogatedPanel(${p.id})" title="{% trans 'Retirer' %}">
                <i class="bi bi-x"></i>
            </button>
        </li>`;
    });
    html += '</ul>';
    container.innerHTML = html;
}

function addAbrogatedPanel(panel) {
    _abrogatedPanels.set(panel.id, panel);
    renderAbrogatedPanelsList();
    // Update the search result row button
    const btn = document.getElementById(`abrogated-add-btn-${panel.id}`);
    if (btn) {
        btn.className = 'btn btn-sm btn-outline-success disabled';
        btn.innerHTML = '✓ {% trans "Ajouté" %}';
    }
}

function removeAbrogatedPanel(id) {
    _abrogatedPanels.delete(id);
    renderAbrogatedPanelsList();
}

async function doAbrogatedPanelSearch(q) {
    const resultsDiv = document.getElementById('abrogated-search-results');
    if (!resultsDiv) return;
    if (!_abrogatedPanelsUrl || q.trim().length < 2) {
        resultsDiv.style.display = 'none';
        return;
    }
    resultsDiv.style.display = '';
    resultsDiv.innerHTML = '<div class="text-muted small p-2"><i class="bi bi-hourglass-split me-1"></i>{% trans "Recherche…" %}</div>';
    try {
        const resp = await fetch(`${_abrogatedPanelsUrl}?q=${encodeURIComponent(q.trim())}`);
        const data = await resp.json();
        renderAbrogatedSearchResults(data.panels || []);
    } catch(e) {
        console.error(e);
        resultsDiv.innerHTML = '<div class="text-danger small p-2">{% trans "Erreur lors de la recherche." %}</div>';
    }
}

function renderAbrogatedSearchResults(panels) {
    const div = document.getElementById('abrogated-search-results');
    if (!div) return;
    if (!panels.length) {
        div.innerHTML = '<div class="text-muted small p-2">{% trans "Aucun panneau trouvé." %}</div>';
        return;
    }
    div.innerHTML = '';
    panels.forEach(p => {
        _abrogatedSearchCache.set(p.id, p);  // cache so onclick can look up by ID only
        const row = document.createElement('div');
        row.className = 'd-flex justify-content-between align-items-center p-1 border-bottom';
        row.style.fontSize = '.85rem';
        const alreadyIn = _abrogatedPanels.has(p.id);
        const isRemoved = p.status === 'removed';
        const statusStyle = isRemoved ? 'background:#8b1a1a' : 'background:#6f42c1';
        const statusLabel = isRemoved ? '{% trans "Retiré" %}' : '{% trans "Actif" %}';
        row.innerHTML = `
            <span>
                <span class="badge bg-secondary me-1">${escapeHtml(p.code || '–')}</span>
                <span class="text-muted me-1">${escapeHtml(p.panel_type || '')}</span>
                ${escapeHtml(p.street || '')}
                <span class="badge ms-1" style="${statusStyle};font-size:.7rem;">${statusLabel}</span>
            </span>
            <button type="button" id="abrogated-add-btn-${p.id}"
                    class="btn btn-sm ${alreadyIn ? 'btn-outline-success disabled' : 'btn-outline-primary'}"
                    ${alreadyIn ? 'disabled' : `onclick="addAbrogatedPanelById(${p.id})"`}>
                ${alreadyIn ? '✓ {% trans "Ajouté" %}' : '＋ {% trans "Ajouter" %}'}
            </button>`;
        div.appendChild(row);
    });
}

async function saveAbrogatedPanels() {
    if (!_abrogatedPanelsSaveUrl) return;
    const btn = document.getElementById('btn-save-abrogated');
    if (btn) { btn.disabled = true; btn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>{% trans "Sauvegarde…" %}'; }
    let success = false;
    try {
        const resp = await fetch(_abrogatedPanelsSaveUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify({ panel_ids: Array.from(_abrogatedPanels.keys()) })
        });
        const data = await resp.json();
        success = data.success === true;
        if (success && btn) {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-check-circle me-1"></i>{% trans "Sauvegardé" %} (' + data.count + ')';
            setTimeout(() => { if (btn) btn.innerHTML = '<i class="bi bi-save me-1"></i>{% trans "Sauvegarder la sélection" %}'; }, 2500);
            // Refresh map to update is_abrogated colours
            if (regulationMap && regulationMap.getZoom() >= MIN_ZOOM_TO_LOAD) loadPanelsData();
        }
    } catch(e) {
        console.error(e);
    } finally {
        if (!success && btn) { btn.disabled = false; btn.innerHTML = '<i class="bi bi-save me-1"></i>{% trans "Sauvegarder la sélection" %}'; }
    }
}

let _abrogatedSearchTimer = null;
document.addEventListener('DOMContentLoaded', () => {
    const inp = document.getElementById('abrogated-search-input');
    if (!inp) return;
    inp.addEventListener('input', () => {
        clearTimeout(_abrogatedSearchTimer);
        _abrogatedSearchTimer = setTimeout(() => doAbrogatedPanelSearch(inp.value), 280);
    });
    inp.addEventListener('keydown', e => {
        if (e.key === 'Escape') {
            document.getElementById('abrogated-search-results').style.display = 'none';
        }
    });
});

async function loadArticleTree() {
    if (!_articlesTreeUrl) return;
    try {
        const resp = await fetch(_articlesTreeUrl);
        const data = await resp.json();
        renderArticleTree(data.tree || [], document.getElementById('article-tree-root'));
    } catch(e) {
        console.error(e);
        const c = document.getElementById('article-tree-root');
        if (c) c.innerHTML = '<div class="p-3 text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>{% trans "Erreur lors du chargement des articles." %}</div>';
    }
}

async function loadAbrogationArticleTree() {
    if (!_abrogationArticlesTreeUrl) return;
    try {
        const resp = await fetch(_abrogationArticlesTreeUrl);
        const data = await resp.json();
        renderAbrogationArticleTree(data.tree || [], document.getElementById('abrogation-article-tree-root'));
    } catch(e) {
        console.error(e);
        const c = document.getElementById('abrogation-article-tree-root');
        if (c) c.innerHTML = '<div class="p-3 text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>{% trans "Erreur lors du chargement des articles." %}</div>';
    }
}

function renderArticleTree(nodes, container) {
    container.innerHTML = '';
    if (!nodes || !nodes.length) {
        container.innerHTML = '<div class="p-3 text-muted small">{% trans "Aucun article disponible pour les types de panneaux de ce règlement." %}</div>';
        return;
    }
    nodes.forEach(n => container.appendChild(buildArticleNode(n)));
}

function renderAbrogationArticleTree(nodes, container) {
    container.innerHTML = '';
    if (!nodes || !nodes.length) {
        container.innerHTML = '<div class="p-3 text-muted small">{% trans "Aucun article disponible pour les types de panneaux de ce règlement." %}</div>';
        return;
    }
    nodes.forEach(n => container.appendChild(buildAbrogationArticleNode(n)));
}

function treeExpandAll() {
    document.querySelectorAll('#article-tree-root .article-children.collapsed').forEach(el => {
        el.classList.remove('collapsed');
        const toggle = el.closest('.article-node')?.querySelector(':scope > .article-row .article-toggle');
        if (toggle) toggle.innerHTML = '▼';
    });
}
function treeCollapseAll() {
    document.querySelectorAll('#article-tree-root .article-children:not(.collapsed)').forEach(el => {
        el.classList.add('collapsed');
        const toggle = el.closest('.article-node')?.querySelector(':scope > .article-row .article-toggle');
        if (toggle) toggle.innerHTML = '▶';
    });
}
function abrogationTreeExpandAll() {
    document.querySelectorAll('#abrogation-article-tree-root .article-children.collapsed').forEach(el => {
        el.classList.remove('collapsed');
        const toggle = el.closest('.article-node')?.querySelector(':scope > .article-row .article-toggle');
        if (toggle) toggle.innerHTML = '▼';
    });
}
function abrogationTreeCollapseAll() {
    document.querySelectorAll('#abrogation-article-tree-root .article-children:not(.collapsed)').forEach(el => {
        el.classList.add('collapsed');
        const toggle = el.closest('.article-node')?.querySelector(':scope > .article-row .article-toggle');
        if (toggle) toggle.innerHTML = '▶';
    });
}

function buildArticleNode(node) {
    const hasChildren = node.children && node.children.length > 0;
    const wrapper = document.createElement('div');
    wrapper.className = 'article-node';
    wrapper.dataset.pk = node.id;

    // ── Main row ──
    const row = document.createElement('div');
    row.className = `article-row level-${Math.min(node.level, 4)}`;

    // Toggle
    const toggle = document.createElement('button');
    toggle.type = 'button';
    toggle.className = 'article-toggle';
    if (hasChildren) {
        toggle.innerHTML = '▼';
        toggle.onclick = () => {
            const ch = wrapper.querySelector(':scope > .article-children');
            const closed = ch.classList.toggle('collapsed');
            toggle.innerHTML = closed ? '▶' : '▼';
        };
    }
    row.appendChild(toggle);

    // from_panels indicator
    const dot = document.createElement('div');
    dot.className = node.from_panels ? 'from-panels-indicator' : 'no-indicator';
    row.appendChild(dot);

    // Article ID — editable input for custom articles, plain div otherwise
    let idInput = null;
    if (node.is_custom) {
        idInput = document.createElement('input');
        idInput.type = 'text';
        idInput.className = 'article-id-input';
        idInput.value = node.article_id || '';
        idInput.title = '{% trans "Numérotation" %}';
        row.appendChild(idInput);
    } else {
        const idEl = document.createElement('div');
        idEl.className = 'article-id-cell';
        idEl.textContent = node.article_id || '';
        row.appendChild(idEl);
    }

    // FR text — editable input for custom articles, plain text otherwise
    let frInput = null;
    if (node.is_custom) {
        frInput = document.createElement('input');
        frInput.type = 'text';
        frInput.className = 'article-text-input';
        frInput.value = node.text_fr || '';
        row.appendChild(frInput);
    } else {
        const frEl = document.createElement('div');
        frEl.className = 'article-text-cell';
        frEl.textContent = node.text_fr || '';
        row.appendChild(frEl);
    }

    // NL text — editable input for custom articles
    let nlInput = null;
    if (node.is_custom) {
        nlInput = document.createElement('input');
        nlInput.type = 'text';
        nlInput.className = 'article-text-input';
        nlInput.value = node.text_nl || '';
        row.appendChild(nlInput);
    } else {
        const nlEl = document.createElement('div');
        nlEl.className = 'article-text-cell';
        nlEl.textContent = node.text_nl || '';
        row.appendChild(nlEl);
    }

    // Measure panels toggle cell — only for custom articles
    const measureCell = document.createElement('div');
    measureCell.style.cssText = 'display:flex;align-items:center;justify-content:flex-end;';
    let measurePickerPanel = null;
    if (node.is_custom) {
        measurePickerPanel = buildMeasurePanelsPicker(node, wrapper, 'nouvelle_disposition');
        const mpBtn = document.createElement('button');
        mpBtn.type = 'button';
        mpBtn.className = 'btn btn-sm btn-outline-info measure-panels-toggle-btn';
        const mpCount = (node.measure_panels || []).length;
        mpBtn.innerHTML = `🔲 ${mpCount > 0 ? mpCount : '+'}`;
        mpBtn.title = '{% trans "Associer / désassocier des panneaux à cette mesure" %}';
        mpBtn.onclick = () => measurePickerPanel.classList.toggle('open');
        measureCell.appendChild(mpBtn);
    }
    row.appendChild(measureCell);

    // Actions cell (add sub-article + remove)
    const removeCell = document.createElement('div');
    removeCell.style.cssText = 'display:flex;align-items:center;justify-content:center;gap:3px;';
    if (!node.is_custom || hasChildren || node.has_ref_children) {
        const addSubBtn = document.createElement('button');
        addSubBtn.type = 'button';
        addSubBtn.className = 'btn btn-sm btn-outline-success article-add-sub-btn';
        addSubBtn.innerHTML = '＋';
        addSubBtn.title = '{% trans "Ajouter un sous-article" %}';
        addSubBtn.onclick = () => {
            const asp = wrapper.querySelector(':scope > .add-subarticle-panel');
            if (asp) {
                const wasOpen = asp.classList.contains('open');
                asp.classList.toggle('open');
                if (!wasOpen) asp._fill();
            }
        };
        removeCell.appendChild(addSubBtn);
    }
    if (node.selected || node.is_custom) {
        const rmBtn = document.createElement('button');
        rmBtn.type = 'button';
        rmBtn.className = 'btn btn-sm btn-outline-danger article-remove-btn';
        rmBtn.innerHTML = '✕';
        rmBtn.title = '{% trans "Retirer cet article (et ses sous-articles spécifiques) de la sélection" %}';
        rmBtn.onclick = () => deselectArticle(node.id, 'nouvelle_disposition', loadArticleTree);
        removeCell.appendChild(rmBtn);
    }
    row.appendChild(removeCell);

    wrapper.appendChild(row);

    // Text edit bar — save + suggest, only for custom articles
    if (node.is_custom && frInput && nlInput) {
        const editBar = document.createElement('div');
        editBar.className = 'text-edit-bar';

        const saveBtn = document.createElement('button');
        saveBtn.type = 'button';
        saveBtn.className = 'btn btn-sm btn-success';
        saveBtn.innerHTML = '💾 {% trans "Enregistrer" %}';
        const savedBadge = document.createElement('span');
        savedBadge.className = 'badge bg-success ms-2';
        savedBadge.textContent = '✓ {% trans "Enregistré" %}';
        savedBadge.style.display = 'none';
        saveBtn.onclick = async () => {
            const url = _articleUpdateTextUrl(node.id);
            if (!url) return;
            saveBtn.disabled = true;
            try {
                const resp = await fetch(url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value },
                    body: JSON.stringify({ article_id: idInput ? idInput.value.trim() : undefined, text_fr: frInput.value.trim(), text_nl: nlInput.value.trim() }),
                });
                const result = await resp.json();
                if (result.success) {
                    if (result.article_id && idInput) idInput.value = result.article_id;
                    savedBadge.style.display = 'inline';
                    setTimeout(() => savedBadge.style.display = 'none', 2500);
                } else {
                    alert(result.error || '{% trans "Erreur lors de la sauvegarde." %}');
                }
            } catch(e) { console.error(e); alert('{% trans "Erreur lors de la sauvegarde." %}'); }
            finally { saveBtn.disabled = false; }
        };

        const suggestBtn = document.createElement('button');
        suggestBtn.type = 'button';
        suggestBtn.className = 'btn btn-sm btn-outline-secondary';
        suggestBtn.innerHTML = '💡 {% trans "Suggérer via panneaux" %}';
        suggestBtn.onclick = () => openSuggestTextModal(node.id, frInput, nlInput, 'nouvelle_disposition');

        editBar.appendChild(saveBtn);
        editBar.appendChild(savedBadge);
        editBar.appendChild(suggestBtn);
        wrapper.appendChild(editBar);
    }

    if (measurePickerPanel) wrapper.appendChild(measurePickerPanel);

    // Children
    if (hasChildren) {
        const childDiv = document.createElement('div');
        childDiv.className = 'article-children';
        node.children.forEach(c => childDiv.appendChild(buildArticleNode(c)));
        wrapper.appendChild(childDiv);
    }
    if (!node.is_custom || hasChildren || node.has_ref_children) {
        const addSubPanel = buildAddSubArticlePanel(node, 'nouvelle_disposition', loadArticleTree);
        wrapper.appendChild(addSubPanel);
    }
    return wrapper;
}


// ── Add sub-article panel builder ────────────────────────────────────────────
// Shows for non-leaf nodes: 1) reference children not yet selected, 2) create custom child form
function buildAddSubArticlePanel(node, section, reloadFn) {
    const panel = document.createElement('div');
    panel.className = 'add-subarticle-panel';

    const header = document.createElement('div');
    header.className = 'd-flex justify-content-between align-items-center mb-2';
    const title = document.createElement('span');
    title.className = 'fw-semibold small';
    title.textContent = '{% trans "Ajouter un sous-article" %}';
    const closeBtn = document.createElement('button');
    closeBtn.type = 'button';
    closeBtn.className = 'btn-close';
    closeBtn.style.fontSize = '.6rem';
    closeBtn.onclick = () => panel.classList.remove('open');
    header.appendChild(title);
    header.appendChild(closeBtn);
    panel.appendChild(header);

    const content = document.createElement('div');
    panel.appendChild(content);

    // Called once when the panel is first opened
    panel._fill = async () => {
        if (!node.id || !_articleChildrenSelectableBase) {
            content.innerHTML = '<div class="text-muted small">{% trans "Non disponible." %}</div>';
            return;
        }
        content.innerHTML = '<div class="text-muted small"><i class="bi bi-hourglass-split me-1"></i>{% trans "Chargement…" %}</div>';
        try {
            const resp = await fetch(`${_articleChildrenSelectableUrl(node.id)}?section=${encodeURIComponent(section)}`);
            const data = await resp.json();
            content.innerHTML = '';

            // ── 1. Reference children not yet selected ────────────────────
            const unselected = (data.children || []).filter(c => !c.already_selected);
            if (unselected.length) {
                const pickTitle = document.createElement('div');
                pickTitle.className = 'small text-muted mb-1';
                pickTitle.textContent = '{% trans "Sous-articles du référentiel :" %}';
                content.appendChild(pickTitle);
                const refList = document.createElement('div');
                refList.className = 'd-flex flex-column gap-1 mb-3';
                for (const child of unselected) {
                    const refRow = document.createElement('div');
                    refRow.className = 'd-flex align-items-start gap-2';
                    const badge = document.createElement('span');
                    badge.className = 'badge bg-secondary text-nowrap mt-1';
                    badge.style.fontSize = '.75rem';
                    badge.textContent = child.article_id;
                    const texts = document.createElement('div');
                    texts.style.flex = '1';
                    texts.style.fontSize = '.83rem';
                    texts.textContent = child.text_fr || '';
                    const pickBtn = document.createElement('button');
                    pickBtn.type = 'button';
                    pickBtn.className = 'btn btn-sm btn-outline-primary';
                    pickBtn.textContent = '＋';
                    pickBtn.onclick = async () => {
                        pickBtn.disabled = true;
                        const url3 = _articleSelectUrl(child.id);
                        if (url3) {
                            try {
                                await fetch(url3, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                                    },
                                    body: JSON.stringify({ section }),
                                });
                            } catch(e) { console.error(e); }
                        }
                        panel.classList.remove('open');
                        reloadFn();
                    };
                    refRow.appendChild(badge);
                    refRow.appendChild(texts);
                    refRow.appendChild(pickBtn);
                    refList.appendChild(refRow);
                }
                content.appendChild(refList);
            }

            // ── 2. Create a new custom child ──────────────────────────────
            const parentPrefix = node.article_id || '';
            const toSuffix = c => { const n = parseInt(c.article_id.split('.').pop()); return isNaN(n) ? 0 : n; };
            let nextSuffix;
            if (data.has_ref_children) {
                // Parent has reference children → slot new article by number:
                // suggest max of ALL existing children (ref + custom) + 1
                const allSuffixes = (data.children || []).map(toSuffix).filter(n => n > 0);
                nextSuffix = allSuffixes.length > 0 ? Math.max(...allSuffixes) + 1 : 1;
            } else {
                // Leaf parent (no reference children) → append after existing custom children
                const customSuffixes = (data.children || []).filter(c => c.is_custom).map(toSuffix).filter(n => n > 0);
                nextSuffix = customSuffixes.length > 0 ? Math.max(...customSuffixes) + 1 : 1;
            }

            const createTitle = document.createElement('div');
            createTitle.className = 'small text-muted mb-1';
            createTitle.textContent = '{% trans "Créer un sous-article personnalisé :" %}';
            content.appendChild(createTitle);

            const form = document.createElement('div');
            form.className = 'd-flex flex-column gap-2';

            // Article number row
            const idRow = document.createElement('div');
            idRow.className = 'd-flex align-items-center gap-1 flex-wrap';
            const idLabel = document.createElement('span');
            idLabel.className = 'small text-muted text-nowrap';
            idLabel.textContent = '{% trans "N° :" %} ' + parentPrefix + '.';
            const idInput = document.createElement('input');
            idInput.type = 'text';
                idInput.className = 'form-control form-control-sm';
                idInput.style.width = '60px';
                idInput.value = String(nextSuffix);
                idRow.appendChild(idLabel);
                idRow.appendChild(idInput);
                form.appendChild(idRow);

                // FR
                const frRow = document.createElement('div');
                frRow.className = 'd-flex align-items-center gap-1';
                const frLabel = document.createElement('span');
                frLabel.className = 'small text-muted text-nowrap';
                frLabel.style.width = '22px';
                frLabel.textContent = 'FR';
                const frInput = document.createElement('input');
                frInput.type = 'text';
                frInput.className = 'form-control form-control-sm';
                frInput.placeholder = 'Texte FR…';
                frRow.appendChild(frLabel);
                frRow.appendChild(frInput);
                form.appendChild(frRow);

                // NL
                const nlRow = document.createElement('div');
                nlRow.className = 'd-flex align-items-center gap-1';
                const nlLabel = document.createElement('span');
                nlLabel.className = 'small text-muted text-nowrap';
                nlLabel.style.width = '22px';
                nlLabel.textContent = 'NL';
                const nlInput = document.createElement('input');
                nlInput.type = 'text';
                nlInput.className = 'form-control form-control-sm';
                nlInput.placeholder = 'Tekst NL…';
                nlRow.appendChild(nlLabel);
                nlRow.appendChild(nlInput);
                form.appendChild(nlRow);

                const createBtn = document.createElement('button');
                createBtn.type = 'button';
                createBtn.className = 'btn btn-sm btn-success';
                createBtn.textContent = '＋ {% trans "Créer" %}';
                createBtn.onclick = async () => {
                    const suffix = idInput.value.trim();
                    const fr = frInput.value.trim();
                    if (!suffix || !fr) {
                        alert('{% trans "Le numéro et le texte FR sont requis." %}');
                        return;
                    }
                    const newId = `${parentPrefix}.${suffix}`;
                    createBtn.disabled = true;
                    try {
                        const url2 = _articleCreateCustomUrl(node.id);
                        const resp2 = await fetch(url2, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                            },
                            body: JSON.stringify({ article_id: newId, text_fr: fr, text_nl: nlInput.value.trim(), section }),
                        });
                        const result = await resp2.json();
                        if (result.success) {
                            panel.classList.remove('open');
                            reloadFn();
                        } else {
                            alert(result.error || '{% trans "Erreur lors de la création." %}');
                            createBtn.disabled = false;
                        }
                    } catch(e) {
                        console.error(e);
                        alert('{% trans "Erreur lors de la création." %}');
                        createBtn.disabled = false;
                    }
                };
                form.appendChild(createBtn);
                content.appendChild(form);

        } catch(e) {
            console.error(e);
            content.innerHTML = '<div class="text-danger small">{% trans "Erreur de chargement." %}</div>';
        }
    };

    return panel;
}

function buildAbrogationArticleNode(node) {
    const hasChildren = node.children && node.children.length > 0;
    const wrapper = document.createElement('div');
    wrapper.className = 'article-node';
    wrapper.dataset.pk = node.id;

    // ── Main row ──
    const row = document.createElement('div');
    row.className = `article-row level-${Math.min(node.level, 4)}`;

    // Toggle
    const toggle = document.createElement('button');
    toggle.type = 'button';
    toggle.className = 'article-toggle';
    if (hasChildren) {
        toggle.innerHTML = '▼';
        toggle.onclick = () => {
            const ch = wrapper.querySelector(':scope > .article-children');
            const closed = ch.classList.toggle('collapsed');
            toggle.innerHTML = closed ? '▶' : '▼';
        };
    }
    row.appendChild(toggle);

    const dot = document.createElement('div');
    dot.className = node.from_panels ? 'from-panels-indicator' : 'no-indicator';
    row.appendChild(dot);

    // Article ID — editable input for custom articles, plain div otherwise
    let idInput = null;
    if (node.is_custom) {
        idInput = document.createElement('input');
        idInput.type = 'text';
        idInput.className = 'article-id-input';
        idInput.value = node.article_id || '';
        idInput.title = '{% trans "Numérotation" %}';
        row.appendChild(idInput);
    } else {
        const idEl = document.createElement('div');
        idEl.className = 'article-id-cell';
        idEl.textContent = node.article_id || '';
        row.appendChild(idEl);
    }

    // FR text — editable input for custom articles, plain text otherwise
    let frInput = null;
    if (node.is_custom) {
        frInput = document.createElement('input');
        frInput.type = 'text';
        frInput.className = 'article-text-input';
        frInput.value = node.text_fr || '';
        row.appendChild(frInput);
    } else {
        const frEl = document.createElement('div');
        frEl.className = 'article-text-cell';
        frEl.textContent = node.text_fr || '';
        row.appendChild(frEl);
    }

    // NL text — editable input for custom articles
    let nlInput = null;
    if (node.is_custom) {
        nlInput = document.createElement('input');
        nlInput.type = 'text';
        nlInput.className = 'article-text-input';
        nlInput.value = node.text_nl || '';
        row.appendChild(nlInput);
    } else {
        const nlEl = document.createElement('div');
        nlEl.className = 'article-text-cell';
        nlEl.textContent = node.text_nl || '';
        row.appendChild(nlEl);
    }

    // Measure panels toggle cell — only for custom articles
    const measureCell = document.createElement('div');
    measureCell.style.cssText = 'display:flex;align-items:center;justify-content:flex-end;';
    let measurePickerPanel = null;
    if (node.is_custom) {
        measurePickerPanel = buildMeasurePanelsPicker(node, wrapper, 'abrogation');
        const mpBtn = document.createElement('button');
        mpBtn.type = 'button';
        mpBtn.className = 'btn btn-sm btn-outline-info measure-panels-toggle-btn';
        const mpCount = (node.measure_panels || []).length;
        mpBtn.innerHTML = `🔲 ${mpCount > 0 ? mpCount : '+'}`;
        mpBtn.title = '{% trans "Associer / désassocier des panneaux à cette mesure" %}';
        mpBtn.onclick = () => measurePickerPanel.classList.toggle('open');
        measureCell.appendChild(mpBtn);
    }
    row.appendChild(measureCell);

    // Actions cell (add sub-article + remove)
    const removeCell = document.createElement('div');
    removeCell.style.cssText = 'display:flex;align-items:center;justify-content:center;gap:3px;';
    if (!node.is_custom || hasChildren || node.has_ref_children) {
        const addSubBtn = document.createElement('button');
        addSubBtn.type = 'button';
        addSubBtn.className = 'btn btn-sm btn-outline-success article-add-sub-btn';
        addSubBtn.innerHTML = '＋';
        addSubBtn.title = '{% trans "Ajouter un sous-article" %}';
        addSubBtn.onclick = () => {
            const asp = wrapper.querySelector(':scope > .add-subarticle-panel');
            if (asp) {
                const wasOpen = asp.classList.contains('open');
                asp.classList.toggle('open');
                if (!wasOpen) asp._fill();
            }
        };
        removeCell.appendChild(addSubBtn);
    }
    if (node.selected || node.is_custom) {
        const rmBtn = document.createElement('button');
        rmBtn.type = 'button';
        rmBtn.className = 'btn btn-sm btn-outline-danger article-remove-btn';
        rmBtn.innerHTML = '✕';
        rmBtn.title = '{% trans "Retirer cet article (et ses sous-articles spécifiques) de la sélection" %}';
        rmBtn.onclick = () => deselectArticle(node.id, 'abrogation', loadAbrogationArticleTree);
        removeCell.appendChild(rmBtn);
    }
    row.appendChild(removeCell);

    wrapper.appendChild(row);

    // Text edit bar — save + suggest, only for custom articles
    if (node.is_custom && frInput && nlInput) {
        const editBar = document.createElement('div');
        editBar.className = 'text-edit-bar';

        const saveBtn = document.createElement('button');
        saveBtn.type = 'button';
        saveBtn.className = 'btn btn-sm btn-success';
        saveBtn.innerHTML = '💾 {% trans "Enregistrer" %}';
        const savedBadge = document.createElement('span');
        savedBadge.className = 'badge bg-success ms-2';
        savedBadge.textContent = '✓ {% trans "Enregistré" %}';
        savedBadge.style.display = 'none';
        saveBtn.onclick = async () => {
            const url = _articleUpdateTextUrl(node.id);
            if (!url) return;
            saveBtn.disabled = true;
            try {
                const resp = await fetch(url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value },
                    body: JSON.stringify({ article_id: idInput ? idInput.value.trim() : undefined, text_fr: frInput.value.trim(), text_nl: nlInput.value.trim() }),
                });
                const result = await resp.json();
                if (result.success) {
                    if (result.article_id && idInput) idInput.value = result.article_id;
                    savedBadge.style.display = 'inline';
                    setTimeout(() => savedBadge.style.display = 'none', 2500);
                } else {
                    alert(result.error || '{% trans "Erreur lors de la sauvegarde." %}');
                }
            } catch(e) { console.error(e); alert('{% trans "Erreur lors de la sauvegarde." %}'); }
            finally { saveBtn.disabled = false; }
        };

        const suggestBtn = document.createElement('button');
        suggestBtn.type = 'button';
        suggestBtn.className = 'btn btn-sm btn-outline-secondary';
        suggestBtn.innerHTML = '💡 {% trans "Suggérer via panneaux" %}';
        suggestBtn.onclick = () => openSuggestTextModal(node.id, frInput, nlInput, 'abrogation');

        editBar.appendChild(saveBtn);
        editBar.appendChild(savedBadge);
        editBar.appendChild(suggestBtn);
        wrapper.appendChild(editBar);
    }

    if (measurePickerPanel) wrapper.appendChild(measurePickerPanel);

    if (hasChildren) {
        const childDiv = document.createElement('div');
        childDiv.className = 'article-children';
        node.children.forEach(c => childDiv.appendChild(buildAbrogationArticleNode(c)));
        wrapper.appendChild(childDiv);
    }
    if (!node.is_custom || hasChildren || node.has_ref_children) {
        const addSubPanel = buildAddSubArticlePanel(node, 'abrogation', loadAbrogationArticleTree);
        wrapper.appendChild(addSubPanel);
    }
    return wrapper;
}

function buildMeasurePanelsPicker(node, wrapper, section) {
    const panel = document.createElement('div');
    panel.className = 'measure-panel';
    if ((node.measure_panels || []).length > 0) panel.classList.add('open');

    // Header with "Éditer sur la carte" button
    const header = document.createElement('div');
    header.className = 'measure-panel-header d-flex justify-content-between align-items-center';
    const headerTitle = document.createElement('span');
    headerTitle.innerHTML = `<i class="bi bi-sign-intersection me-1"></i>{% trans "Panneaux associés à cette mesure" %}`;
    const editOnMapBtn = document.createElement('button');
    editOnMapBtn.type = 'button';
    editOnMapBtn.className = 'btn btn-outline-primary ms-2';
    editOnMapBtn.style.cssText = 'font-size:.7rem; padding:1px 7px; line-height:1.5;';
    editOnMapBtn.innerHTML = '<i class="bi bi-map me-1"></i>{% trans "Éditer sur la carte" %}';
    editOnMapBtn.onclick = () => enterMeasurePanelEditMode(node.id, section, node.article_id || node.id);
    header.appendChild(headerTitle);
    header.appendChild(editOnMapBtn);

    const linkedList = document.createElement('div');
    linkedList.className = 'measure-panel-linked';

    function renderLinkedPanels(panels) {
        linkedList.innerHTML = '';
        if (!panels || !panels.length) {
            linkedList.innerHTML = '<div class="text-muted small p-1"><i class="bi bi-info-circle me-1"></i>{% trans "Aucun panneau associé à cette mesure." %}</div>';
            return;
        }
        panels.forEach(p => {
            const chip = document.createElement('div');
            chip.className = 'measure-panel-chip';
            chip.innerHTML = `
                <span class="badge bg-secondary me-1">${escapeHtml(p.code || '\u2013')}</span>
                <span class="text-muted small">${escapeHtml(p.panel_type || '')} ${escapeHtml(p.street || '')}</span>
                <button type="button" class="measure-panel-chip-remove" title="{% trans 'Retirer ce panneau de la mesure' %}">\u00d7</button>
            `;
            chip.querySelector('button').onclick = async () => {
                chip.remove();
                const remaining = linkedList.querySelectorAll('.measure-panel-chip').length;
                const mpBtnEl = wrapper.querySelector('.measure-panels-toggle-btn');
                if (mpBtnEl) mpBtnEl.innerHTML = `\ud83d\udd32 ${remaining > 0 ? remaining : '+'}`;
                if (!remaining) {
                    linkedList.innerHTML = '<div class="text-muted small p-1"><i class="bi bi-info-circle me-1"></i>{% trans "Aucun panneau associé à cette mesure." %}</div>';
                }
                await measurePanelToggle(node.id, p.id, section, null);
                // Keep map highlight in sync if currently editing this article
                if (_measurePanelEditMode && _measurePanelEditArticleId === node.id) {
                    const old = new Set(_measurePanelEditPanelIds);
                    _measurePanelEditPanelIds.delete(p.id);
                    _updateMeasureEditFeatureStates(old);
                }
            };
            linkedList.appendChild(chip);
        });
    }
    renderLinkedPanels(node.measure_panels || []);

    panel.appendChild(header);
    panel.appendChild(linkedList);
    return panel;
}

async function measurePanelSearch(articleId, q, section, resultsDiv, linkedList, renderFn, wrapper) {
    if (!_measurePanelsBase) return;
    resultsDiv.style.display = '';
    resultsDiv.innerHTML = '<div class="text-muted small p-1"><i class="bi bi-hourglass-split me-1"></i>{% trans "Recherche\u2026" %}</div>';
    try {
        const url = `${_measurePanelsUrl(articleId)}?section=${encodeURIComponent(section)}&q=${encodeURIComponent(q)}`;
        const resp = await fetch(url);
        const data = await resp.json();
        renderMeasurePanelResults(data.panels || [], articleId, section, linkedList, renderFn, wrapper, resultsDiv);
    } catch(e) {
        console.error(e);
        resultsDiv.innerHTML = '<div class="text-danger small p-1">{% trans "Erreur lors de la recherche." %}</div>';
    }
}

function renderMeasurePanelResults(panels, articleId, section, linkedList, renderFn, wrapper, container) {
    container.innerHTML = '';
    if (!panels.length) {
        container.innerHTML = '<div class="text-muted small p-1">{% trans "Aucun panneau trouv\u00e9." %}</div>';
        return;
    }
    panels.forEach(p => {
        const row = document.createElement('div');
        row.className = 'd-flex justify-content-between align-items-center p-1 border-bottom';
        row.style.fontSize = '.82rem';
        const alreadySel = !!p.selected;
        row.innerHTML = `
            <span>
                <span class="badge bg-secondary me-1">${escapeHtml(p.code || '\u2013')}</span>
                <span class="text-muted">${escapeHtml(p.panel_type || '')} \u2014 ${escapeHtml(p.street || '')}</span>
            </span>`;
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = `btn btn-sm ${alreadySel ? 'btn-outline-success disabled' : 'btn-outline-primary'}`;
        btn.disabled = alreadySel;
        btn.innerHTML = alreadySel ? '\u2713 {% trans "Associ\u00e9" %}' : '\uff0b {% trans "Ajouter" %}';
        if (!alreadySel) {
            btn.onclick = async () => {
                btn.disabled = true;
                btn.innerHTML = '<i class="bi bi-hourglass-split"></i>';
                await measurePanelToggle(articleId, p.id, section, null);
                btn.className = 'btn btn-sm btn-outline-success disabled';
                btn.innerHTML = '\u2713 {% trans "Associ\u00e9" %}';
                p.selected = true;
                await reloadMeasurePanels(articleId, section, linkedList, renderFn, wrapper);
            };
        }
        row.appendChild(btn);
        container.appendChild(row);
    });
}

async function measurePanelToggle(articleId, panelId, section) {
    if (!_measurePanelsToggleBase) return;
    try {
        const resp = await fetch(_measurePanelsToggleUrl(articleId), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            },
            body: JSON.stringify({ panel_id: panelId, section }),
        });
        const data = await resp.json();
        if (data.success && data.action === 'add') {
            loadAssociatedPanelsList(true);
        }
        return data;
    } catch(e) { console.error(e); }
}

async function reloadMeasurePanels(articleId, section, linkedList, renderFn, wrapper) {
    if (!_measurePanelsBase) return;
    try {
        const url = `${_measurePanelsUrl(articleId)}?section=${encodeURIComponent(section)}`;
        const resp = await fetch(url);
        const data = await resp.json();
        const linked = (data.panels || []).filter(p => p.selected);
        renderFn(linked);
        const mpBtnEl = wrapper ? wrapper.querySelector('.measure-panels-toggle-btn') : null;
        if (mpBtnEl) mpBtnEl.innerHTML = `\ud83d\udd32 ${linked.length > 0 ? linked.length : '+'}`;
    } catch(e) { console.error(e); }
}

// ── Flux 2: Panels \u2192 Measure suggestion ─────────────────────────────────────────

function enterPanelSelectMode(section) {
    // If clicking same section button again → toggle off
    if (_flux2Mode && _flux2ActiveSection === section) {
        exitPanelSelectMode();
        return;
    }
    // Deactivate abrogation mode if active
    if (_abrogationMode) {
        _abrogationMode = false;
        const abBtn = document.getElementById('btn-abrogation-mode');
        const banner = document.getElementById('abrogation-mode-banner');
        if (abBtn) { abBtn.style.background = ''; abBtn.style.color = ''; abBtn.style.borderColor = ''; abBtn.className = 'btn btn-sm btn-outline-secondary'; }
        if (banner) banner.style.display = 'none';
    }
    // Exit any currently active panel-select mode
    exitPanelSelectMode();
    // Enter new mode
    _flux2Mode = true;
    _flux2ActiveSection = section;
    // Update button styles
    const ndBtn = document.getElementById('btn-nd-panel-select');
    const abrogBtn = document.getElementById('btn-abrog-panel-select');
    if (ndBtn) ndBtn.className = section === 'nouvelle_disposition' ? 'btn btn-sm btn-info text-white' : 'btn btn-sm btn-outline-info';
    if (abrogBtn) abrogBtn.className = section === 'abrogation' ? 'btn btn-sm btn-warning text-dark' : 'btn btn-sm btn-outline-warning';
    // Show the relevant panel-select wrap
    const ndWrap = document.getElementById('nd-panel-select-wrap');
    const abrogWrap = document.getElementById('abrog-panel-select-wrap');
    if (ndWrap) ndWrap.style.display = section === 'nouvelle_disposition' ? '' : 'none';
    if (abrogWrap) abrogWrap.style.display = section === 'abrogation' ? '' : 'none';
    // Show map-level banner
    const bannerEl = document.getElementById('panel-select-mode-banner');
    const labelEl = document.getElementById('panel-select-mode-label');
    if (bannerEl) bannerEl.style.display = '';
    if (labelEl) labelEl.textContent = section === 'nouvelle_disposition'
        ? '{% trans "Mode sélection \u2014 Nouvelles dispositions" %}'
        : '{% trans "Mode sélection \u2014 Abrogations" %}';
    // Close any open article-search panels
    const asPanel = document.getElementById('article-search-panel');
    const absPanel = document.getElementById('abrogation-article-search-panel');
    if (asPanel) asPanel.style.display = 'none';
    if (absPanel) absPanel.style.display = 'none';
    renderFlux2Selection();
}

function exitPanelSelectMode() {
    _flux2Mode = false;
    _flux2ActiveSection = null;
    const ndBtn = document.getElementById('btn-nd-panel-select');
    const abrogBtn = document.getElementById('btn-abrog-panel-select');
    if (ndBtn) ndBtn.className = 'btn btn-sm btn-outline-info';
    if (abrogBtn) abrogBtn.className = 'btn btn-sm btn-outline-warning';
    const ndWrap = document.getElementById('nd-panel-select-wrap');
    const abrogWrap = document.getElementById('abrog-panel-select-wrap');
    if (ndWrap) ndWrap.style.display = 'none';
    if (abrogWrap) abrogWrap.style.display = 'none';
    const bannerEl = document.getElementById('panel-select-mode-banner');
    if (bannerEl) bannerEl.style.display = 'none';
}

function renderFlux2Selection() {
    const section = _flux2ActiveSection;
    const listId = section === 'nouvelle_disposition' ? 'nd-panel-select-list' : 'abrog-panel-select-list';
    const countId = section === 'nouvelle_disposition' ? 'nd-panel-count' : 'abrog-panel-count';
    const list = document.getElementById(listId);
    const countEl = document.getElementById(countId);
    if (!list) return;
    if (countEl) countEl.textContent = _flux2SelectedPanels.size;
    if (!_flux2SelectedPanels.size) {
        list.innerHTML = '<div class="text-muted small">{% trans "Cliquez sur des panneaux sur la carte ci-dessus." %}</div>';
        return;
    }
    list.innerHTML = '';
    _flux2SelectedPanels.forEach(p => {
        const chip = document.createElement('div');
        chip.className = 'measure-panel-chip';
        chip.innerHTML = `
            <span class="badge bg-info text-dark me-1">${escapeHtml(p.code || '–')}</span>
            <span class="text-muted small">${escapeHtml(p.panel_type || '')} ${escapeHtml(p.street || '')}</span>
            <button type="button" class="measure-panel-chip-remove" title="{% trans 'Retirer' %}">×</button>
        `;
        chip.querySelector('button').onclick = () => {
            _flux2SelectedPanels.delete(p.id);
            renderFlux2Selection();
        };
        list.appendChild(chip);
    });
}

function flux2ClearSelection() {
    _flux2SelectedPanels.clear();
    renderFlux2Selection();
    const ndResults = document.getElementById('nd-articles-results');
    const abrogResults = document.getElementById('abrog-articles-results');
    if (ndResults) ndResults.innerHTML = '';
    if (abrogResults) abrogResults.innerHTML = '';
}

async function flux2SuggestArticles(section) {
    const resultsId = section === 'nouvelle_disposition' ? 'nd-articles-results' : 'abrog-articles-results';
    const resultsDiv = document.getElementById(resultsId);
    if (!_measureSuggestArticlesUrl || !_flux2SelectedPanels.size) {
        if (resultsDiv) resultsDiv.innerHTML = "<div class=\"text-warning small p-1\">{% translate "Sélectionnez d'abord des panneaux sur la carte." %}</div>";
        return;
    }
    if (resultsDiv) resultsDiv.innerHTML = '<div class="text-muted small p-1"><i class="bi bi-hourglass-split me-1"></i>{% trans "Calcul…" %}</div>';
    try {
        const resp = await fetch(_measureSuggestArticlesUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            },
            body: JSON.stringify({
                panel_ids: Array.from(_flux2SelectedPanels.keys()),
                section,
            }),
        });
        const data = await resp.json();
        renderFlux2Articles(data.articles || [], section);
    } catch(e) {
        console.error(e);
        if (resultsDiv) resultsDiv.innerHTML = '<div class="text-danger small p-1">{% trans "Erreur lors de la suggestion." %}</div>';
    }
}

function renderFlux2Articles(articles, section) {
    const divId = section === 'nouvelle_disposition' ? 'nd-articles-results' : 'abrog-articles-results';
    const div = document.getElementById(divId);
    if (!div) return;
    if (!articles.length) {
        div.innerHTML = '<div class="text-muted small p-1">{% trans "Aucune mesure trouv\u00e9e pour ces panneaux." %}</div>';
        return;
    }
    div.innerHTML = '<div class="small fw-semibold mb-1 text-success"><i class="bi bi-list-check me-1"></i>{% trans "Mesures applicables \u2014 cliquez pour sélectionner et associer les panneaux :" %}</div>';
    articles.forEach(art => {
        const item = document.createElement('div');
        item.className = 'd-flex align-items-start gap-2 p-1 border-bottom';
        item.style.fontSize = '.83rem';

        const badge = document.createElement('span');
        badge.className = 'badge bg-success text-nowrap flex-shrink-0';
        badge.style.marginTop = '2px';
        badge.textContent = art.article_id;

        const texts = document.createElement('div');
        texts.style.flex = '1';
        const fr = document.createElement('div');
        fr.textContent = (art.text_fr || '').slice(0, 120) + ((art.text_fr || '').length > 120 ? '\u2026' : '');
        texts.appendChild(fr);

        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'btn btn-sm btn-success flex-shrink-0';
        btn.innerHTML = '\uff0b {% trans "Sélectionner" %}';
        btn.onclick = async () => {
            btn.disabled = true;
            btn.innerHTML = '<i class="bi bi-hourglass-split"></i>';
            try {
                const panelIds = Array.from(_flux2SelectedPanels.keys());
                const resp = await fetch(_measurePanelsSaveUrl(art.id), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                    },
                    body: JSON.stringify({ panel_ids: panelIds, section }),
                });
                const result = await resp.json();
                if (result.success) {
                    btn.className = 'btn btn-sm btn-outline-success disabled';
                    btn.innerHTML = `\u2713 ${result.count}`;
                    // Reload article tree to show newly added articles + sub-articles
                    loadArticleTree();
                    loadAssociatedPanelsList(true);
                    if (regulationMap && regulationMap.getZoom() >= MIN_ZOOM_TO_LOAD) loadPanelsData();
                    const nodeWrapper = document.querySelector(`.article-node[data-pk="${art.id}"]`);
                    if (nodeWrapper) {
                        const mpBtnEl = nodeWrapper.querySelector('.measure-panels-toggle-btn');
                        if (mpBtnEl) mpBtnEl.innerHTML = `\ud83d\udd32 ${result.count > 0 ? result.count : '+'}`;
                    }
                } else {
                    btn.disabled = false;
                    btn.innerHTML = '\uff0b {% trans "Sélectionner" %}';
                }
            } catch(e) {
                console.error(e);
                btn.disabled = false;
                btn.innerHTML = '\uff0b {% trans "Sélectionner" %}';
            }
        };
        item.appendChild(badge);
        item.appendChild(texts);
        item.appendChild(btn);
        div.appendChild(item);
    });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    initializeMap();
    loadArticleTree();
    loadAbrogationArticleTree();

    // Resize map when switching to the Mesures tab
    const tabMesuresBtn = document.getElementById('tab-mesures-btn');
    if (tabMesuresBtn) {
        tabMesuresBtn.addEventListener('shown.bs.tab', function() {
            if (regulationMap) regulationMap.resize();
        });
    }
});
</script>


{# ── Suggest text modal ────────────────────────────────────────────────────── #}
<div class="modal fade" id="suggestTextModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title fw-semibold">{% trans "Texte suggéré via les panneaux" %}</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="suggest-modal-loading" class="text-muted small fst-italic">{% trans "Chargement…" %}</div>
        <div id="suggest-modal-empty" class="text-muted small fst-italic" style="display:none;">{% trans "Aucune suggestion disponible pour cet article." %}</div>
        <div id="suggest-modal-content" style="display:none;">
          <div class="mb-2">
            <div class="fw-semibold small text-secondary mb-1">FR</div>
            <div id="suggest-modal-fr" class="border rounded p-2 bg-light small"></div>
          </div>
          <div>
            <div class="fw-semibold small text-secondary mb-1">NL</div>
            <div id="suggest-modal-nl" class="border rounded p-2 bg-light small"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% trans "Annuler" %}</button>
        <button type="button" class="btn btn-primary btn-sm" id="suggest-modal-confirm" disabled>{% trans "Utiliser ce texte" %}</button>
      </div>
    </div>
  </div>
</div>

{% endblock main %}