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

{% block head %}
<link rel="stylesheet" href="{% static 'maps/concrete_blocks.css' %}">
{% endblock head %}

{% block main %}
<!-- No sidebar – full-width split layout identical to the sign view -->
<div id="cb-main" class="d-flex">
<div class="cb-container">

    <!-- ══════════════════════════════════════════════════════════════
         LEFT PANEL  (1/3)
    ══════════════════════════════════════════════════════════════════ -->
    <div class="cb-panel">
        <div class="panel-header">
            <ul class="nav nav-tabs" id="cbPanelTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active"
                            id="legend-tab" data-bs-toggle="tab" data-bs-target="#legend-panel"
                            type="button" role="tab" aria-selected="true">
                        <i class="bi bi-palette me-1"></i>{% translate "Légende" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="filters-tab" data-bs-toggle="tab" data-bs-target="#filters-panel"
                            type="button" role="tab" aria-selected="false">
                        <i class="bi bi-funnel me-1"></i>{% translate "Filtres" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="detail-tab" data-bs-toggle="tab" data-bs-target="#detail-panel"
                            type="button" role="tab" aria-selected="false">
                        <i class="bi bi-info-circle me-1"></i>{% translate "Détail" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="projects-tab" data-bs-toggle="tab" data-bs-target="#projects-panel"
                            type="button" role="tab" aria-selected="false">
                        <i class="bi bi-kanban me-1"></i>{% translate "Projets" %}
                    </button>
                </li>
                {% if can_edit or can_create %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit-panel"
                            type="button" role="tab" aria-selected="false">
                        <i class="bi bi-pencil-square me-1"></i>{% translate "Édition" %}
                    </button>
                </li>
                {% endif %}
            </ul>
        </div><!-- /panel-header -->

        <div class="tab-content panel-content" id="cbPanelContent">

            <!-- ── Légende ───────────────────────────────────────── -->
            <div class="tab-pane fade show active" id="legend-panel" role="tabpanel">
                <div class="p-3">
                    <h6 class="mb-3">{% translate "Représentation des couleurs" %}</h6>

                    <p class="small text-muted mb-2">{% translate "Par fonction" %}</p>

                    <!-- Colour items rendered by JS -->
                    <div id="legend-items" class="mb-4"></div>

                    <!-- Ring-size legend -->
                    <h6 class="mb-2">{% translate "Nombre de blocs" %}</h6>
                    {% with sq="display:inline-block;width:11px;height:11px;background:#546e7a;border:1px solid #fff;border-radius:1px;" %}
                    <div class="d-flex align-items-center mb-2">
                        <span style="flex-shrink:0;width:52px;display:flex;align-items:center;gap:1px;">
                            <span style="{{ sq }}"></span>
                        </span>
                        <span class="small ms-1">{% translate "< 3 blocs" %}</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                        <span style="flex-shrink:0;width:52px;display:flex;align-items:center;gap:1px;">
                            <span style="{{ sq }}"></span>
                            <span style="{{ sq }}"></span>
                        </span>
                        <span class="small ms-1">{% translate "3 – 10 blocs" %}</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                        <span style="flex-shrink:0;width:52px;display:flex;align-items:center;gap:1px;">
                            <span style="{{ sq }}"></span>
                            <span style="{{ sq }}"></span>
                            <span style="{{ sq }}"></span>
                        </span>
                        <span class="small ms-1">{% translate "> 10 blocs" %}</span>
                    </div>
                    {% endwith %}

                    <!-- Stats counter -->
                    <div class="mt-3 text-muted small">
                        <div><i class="bi bi-pin-map me-1"></i><span id="cb-stats">—</span></div>
                        <div class="mt-1"><i class="bi bi-boxes me-1"></i><span id="cb-stats-blocks">—</span></div>
                    </div>

                    <!-- Projects new-jersey layer toggle + legend -->
                    <div class="mt-3 pt-2 border-top">
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" id="toggle-nj-projects" checked>
                            <label class="form-check-label fw-semibold" for="toggle-nj-projects">
                                {% translate "Projets New-Jersey" %}
                            </label>
                        </div>
                        <div id="nj-legend-items" class="ps-1"></div>
                    </div>

                    <!-- Export CSV -->
                    <div class="mt-3 pt-2 border-top">
                        <button type="button" id="cb-export-csv"
                                class="btn btn-outline-secondary btn-sm w-100">
                            <i class="bi bi-download me-1"></i>{% translate "Exporter en CSV" %}
                        </button>
                    </div>
                </div>
            </div><!-- /legend-panel -->

            <!-- ── Filtres ───────────────────────────────────────── -->
            <div class="tab-pane fade" id="filters-panel" role="tabpanel">
                <div class="p-3">
                    <h6 class="mb-3">{% translate "Filtres" %}</h6>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">{% translate "Fonction" %}</label>
                        {% for key, label, color in function_entries %}
                        <div class="form-check">
                            <input class="form-check-input filter-function" type="checkbox"
                                   id="fn-{{ key }}" value="{{ key }}">
                            <label class="form-check-label" for="fn-{{ key }}">
                                <span style="display:inline-block;width:12px;height:12px;border-radius:50%;
                                             background:{{ color }};margin-right:5px;vertical-align:middle;"></span>
                                {{ label }}
                            </label>
                        </div>
                        {% endfor %}
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">{% translate "Statut" %}</label>
                        {% for key, label in status_choices %}
                        <div class="form-check">
                            <input class="form-check-input filter-status" type="checkbox"
                                   id="st-{{ key }}" value="{{ key }}">
                            <label class="form-check-label" for="st-{{ key }}">{{ label }}</label>
                        </div>
                        {% endfor %}
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">{% translate "Nombre de blocs" %}</label>
                        <div class="d-flex align-items-center gap-2">
                            <input type="number" id="filter-min-blocks" class="form-control form-control-sm"
                                   min="0" placeholder="{% translate 'Min' %}" style="width:80px;">
                            <span class="text-muted">–</span>
                            <input type="number" id="filter-max-blocks" class="form-control form-control-sm"
                                   min="0" placeholder="{% translate 'Max' %}" style="width:80px;">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">{% translate "Priorité" %}</label>
                        <div class="d-flex align-items-center gap-2">
                            <input type="number" id="filter-min-priority" class="form-control form-control-sm"
                                   min="0" placeholder="{% translate 'Min' %}" style="width:80px;">
                            <span class="text-muted">–</span>
                            <input type="number" id="filter-max-priority" class="form-control form-control-sm"
                                   min="0" placeholder="{% translate 'Max' %}" style="width:80px;">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">{% translate "Action recommandée" %}</label>
                        {% for key, label in action_choices %}
                        <div class="form-check">
                            <input class="form-check-input filter-action" type="checkbox"
                                   id="ac-{{ key }}" value="{{ key }}">
                            <label class="form-check-label" for="ac-{{ key }}">{{ label }}</label>
                        </div>
                        {% endfor %}
                    </div>

                    <div class="d-flex gap-2">
                        <button type="button" id="cb-apply-filters" class="btn btn-primary btn-sm">
                            <i class="bi bi-funnel me-1"></i>{% translate "Appliquer" %}
                        </button>
                        <button type="button" id="cb-reset-filters" class="btn btn-secondary btn-sm">
                            <i class="bi bi-x-circle me-1"></i>{% translate "Réinitialiser" %}
                        </button>
                    </div>
                </div>
            </div><!-- /filters-panel -->

            <!-- ── Détail ────────────────────────────────────────── -->
            <div class="tab-pane fade" id="detail-panel" role="tabpanel">
                <div class="p-3">
                    <h6 class="mb-3">{% translate "Détail du set de blocs" %}</h6>
                    <div id="cb-detail-content">
                        <div class="text-muted text-center py-4">
                            <i class="bi bi-cursor" style="font-size:2rem;"></i>
                            <p class="mt-2">{% translate "Cliquez sur un point de la carte pour voir les détails." %}</p>
                        </div>
                    </div>
                </div>
            </div><!-- /detail-panel -->

            <!-- ── Projets NJ ─────────────────────────────────────── -->
            <div class="tab-pane fade" id="projects-panel" role="tabpanel">
                <div class="p-3">

                    <div class="input-group input-group-sm mb-3">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                        <input type="text" id="nj-search" class="form-control border-start-0"
                               placeholder="{% translate 'N° projet, PMO, Osiris, description…' %}">
                    </div>

                    <div class="mb-2">
                        <p class="fw-semibold small mb-1">{% translate "Statut" %}</p>
                        <div id="nj-status-filters"></div>
                    </div>

                    <div class="mb-3">
                        <p class="fw-semibold small mb-1">{% translate "Période" %}</p>
                        <div class="d-flex align-items-center gap-2">
                            <input type="date" id="nj-date-from" class="form-control form-control-sm"
                                   title="{% translate 'Début à partir du' %}">
                            <span class="text-muted small">–</span>
                            <input type="date" id="nj-date-to" class="form-control form-control-sm"
                                   title="{% translate 'Fin avant le' %}">
                        </div>
                    </div>

                    <div class="text-muted small mb-2" id="nj-projects-count"></div>

                    <div id="nj-projects-list">
                        <div class="text-muted text-center py-4 small">
                            <i class="bi bi-kanban" style="font-size:1.5rem;"></i>
                            <p class="mt-2">{% translate "Cliquez sur l'onglet pour charger les projets." %}</p>
                        </div>
                    </div>

                    <!-- Export Excel -->
                    <div class="mt-3 pt-2 border-top">
                        <button type="button" id="nj-export-excel"
                                class="btn btn-outline-secondary btn-sm w-100">
                            <i class="bi bi-file-earmark-excel me-1"></i>{% translate "Exporter en Excel" %}
                        </button>
                    </div>

                </div>
            </div><!-- /projects-panel -->

            {% if can_edit or can_create %}
            <!-- ── Édition ────────────────────────────────────────── -->
            <div class="tab-pane fade" id="edit-panel" role="tabpanel">
                <!-- Toolbar -->
                <div class="cb-edit-toolbar px-3 pt-3 pb-2 border-bottom">
                    <div class="d-flex gap-2 flex-wrap align-items-center">
                        {% if can_create %}
                        <button type="button" id="cb-btn-add"
                                class="btn btn-primary btn-sm">
                            <i class="bi bi-plus-circle me-1"></i>{% translate "Ajouter" %}
                        </button>
                        {% endif %}
                        {% if can_edit %}
                        <button type="button" id="cb-btn-select-mode"
                                class="btn btn-outline-secondary btn-sm" title="{% translate 'Activer la sélection multiple' %}">
                            <i class="bi bi-bounding-box me-1"></i>{% translate "Multi-sélection" %}
                        </button>
                        {% endif %}
                    </div>
                    <div id="cb-selection-info" class="mt-2 small text-primary" style="display:none;">
                        <i class="bi bi-check2-square me-1"></i>
                        <span id="cb-selection-count">0</span> {% translate "asset(s) sélectionné(s)" %}
                        <button type="button" id="cb-btn-clear-selection"
                                class="btn btn-link btn-sm py-0 px-1 text-danger">
                            {% translate "Tout désélectionner" %}
                        </button>
                    </div>
                </div><!-- /toolbar -->

                <!-- Empty state -->
                <div id="cb-edit-empty" class="p-3 text-center text-muted py-5">
                    <i class="bi bi-pencil-square" style="font-size:2rem;"></i>
                    <p class="mt-2 small">{% translate "Cliquez sur un asset de la carte pour l'éditer, ou activez la multi-sélection." %}</p>
                </div>

                <!-- Single asset edit form -->
                <div id="cb-edit-single" class="p-3" style="display:none;">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <h6 class="mb-0">{% translate "Modifier l'asset" %} <small class="text-muted" id="cb-edit-code"></small></h6>
                        {% if can_delete %}
                        <button type="button" id="cb-btn-delete-asset"
                                class="btn btn-outline-danger btn-sm" title="{% translate 'Archiver cet asset' %}">
                            <i class="bi bi-trash3"></i>
                        </button>
                        {% endif %}
                    </div>
                    <form id="cb-form-single" novalidate>
                        <input type="hidden" id="cb-edit-asset-id">
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Adresse" %}</label>
                            <input type="text" id="cb-edit-address" class="form-control form-control-sm">
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Statut" %}</label>
                            <select id="cb-edit-status" class="form-select form-select-sm">
                                {% for key, label in status_choices %}
                                <option value="{{ key }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Fonction principale" %}</label>
                            <select id="cb-edit-main-function" class="form-select form-select-sm">
                                <option value="">—</option>
                                {% for key, label in function_choices %}
                                <option value="{{ key }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Fonctions secondaires" %}</label>
                            <div id="cb-edit-secondary-functions" class="cb-checkbox-group border rounded p-2">
                                {% for key, label in function_choices %}
                                <div class="form-check form-check-sm mb-1">
                                    <input class="form-check-input cb-sec-fn" type="checkbox"
                                           id="sec-fn-{{ key }}" value="{{ key }}">
                                    <label class="form-check-label small" for="sec-fn-{{ key }}">{{ label }}</label>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <label class="form-label fw-semibold small mb-1">{% translate "Nb. blocs" %}</label>
                                <input type="number" id="cb-edit-nb-blocks" class="form-control form-control-sm" min="0">
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-semibold small mb-1">{% translate "Longueur (m)" %}</label>
                                <input type="number" id="cb-edit-length" class="form-control form-control-sm" min="0" step="0.1">
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Action recommandée" %}</label>
                            <select id="cb-edit-action" class="form-select form-select-sm">
                                <option value="">—</option>
                                {% for key, label in action_choices %}
                                <option value="{{ key }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <label class="form-label fw-semibold small mb-1">{% translate "Priorité" %}</label>
                                <input type="number" id="cb-edit-priority" class="form-control form-control-sm" min="0">
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-semibold small mb-1">{% translate "Date cible" %}</label>
                                <input type="date" id="cb-edit-target-date" class="form-control form-control-sm">
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Date d'enlèvement" %}</label>
                            <input type="date" id="cb-edit-removal-date" class="form-control form-control-sm">
                        </div>
                        <!-- Observation source (read-only link) -->
                        <div class="mb-2" id="cb-observation-source-container">
                            <label class="form-label fw-semibold small mb-1">{% translate "Observation source" %}</label>
                            <div id="cb-edit-observation-link"
                                 class="form-control-plaintext form-control-sm small ps-1 text-truncate">—</div>
                        </div>
                        <!-- Position -->
                        <div class="mb-2 p-2 bg-light rounded border">
                            <label class="form-label fw-semibold small mb-1">
                                <i class="bi bi-geo-alt me-1"></i>{% translate "Position (glisser le marqueur)" %}
                            </label>
                            <div class="row g-2">
                                <div class="col-6">
                                    <input type="number" id="cb-edit-lon" class="form-control form-control-sm"
                                           step="any" placeholder="{% translate 'Lon.' %}">
                                </div>
                                <div class="col-6">
                                    <input type="number" id="cb-edit-lat" class="form-control form-control-sm"
                                           step="any" placeholder="{% translate 'Lat.' %}">
                                </div>
                            </div>
                            <div class="mt-1">
                                <button type="button" id="cb-btn-pick-position"
                                        class="btn btn-outline-secondary btn-sm w-100">
                                    <i class="bi bi-cursor me-1"></i>{% translate "Cliquer sur la carte pour positionner" %}
                                </button>
                            </div>
                        </div>
                        <div class="d-flex gap-2 mt-3">
                            <button type="submit" class="btn btn-primary btn-sm flex-grow-1">
                                <i class="bi bi-check2 me-1"></i>{% translate "Enregistrer" %}
                            </button>
                            <button type="button" id="cb-btn-cancel-edit" class="btn btn-secondary btn-sm">
                                {% translate "Annuler" %}
                            </button>
                        </div>
                        <div id="cb-edit-single-feedback" class="mt-2" style="display:none;"></div>
                    </form>
                </div><!-- /cb-edit-single -->

                <!-- Bulk edit form -->
                <div id="cb-edit-bulk" class="p-3" style="display:none;">
                    <h6 class="mb-1">{% translate "Modifier en lot" %}</h6>
                    <p class="small text-muted mb-3">
                        {% translate "Seuls les champs renseignés seront mis à jour. Les champs vides sont ignorés." %}
                    </p>
                    <form id="cb-form-bulk" novalidate>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Statut" %}</label>
                            <select id="cb-bulk-status" class="form-select form-select-sm">
                                <option value="">— {% translate "Ne pas modifier" %} —</option>
                                {% for key, label in status_choices %}
                                <option value="{{ key }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Fonction principale" %}</label>
                            <select id="cb-bulk-main-function" class="form-select form-select-sm">
                                <option value="">— {% translate "Ne pas modifier" %} —</option>
                                {% for key, label in function_choices %}
                                <option value="{{ key }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Action recommandée" %}</label>
                            <select id="cb-bulk-action" class="form-select form-select-sm">
                                <option value="">— {% translate "Ne pas modifier" %} —</option>
                                {% for key, label in action_choices %}
                                <option value="{{ key }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <label class="form-label fw-semibold small mb-1">{% translate "Priorité" %}</label>
                                <input type="number" id="cb-bulk-priority" class="form-control form-control-sm"
                                       min="0" placeholder="{% translate 'Laisser vide' %}">
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-semibold small mb-1">{% translate "Date cible" %}</label>
                                <input type="date" id="cb-bulk-target-date" class="form-control form-control-sm">
                            </div>
                        </div>
                        <div class="d-flex gap-2 mt-3">
                            <button type="submit" class="btn btn-primary btn-sm flex-grow-1">
                                <i class="bi bi-check2-all me-1"></i>{% translate "Appliquer au lot" %}
                            </button>
                            <button type="button" id="cb-btn-cancel-bulk" class="btn btn-secondary btn-sm">
                                {% translate "Annuler" %}
                            </button>
                        </div>
                        <div id="cb-edit-bulk-feedback" class="mt-2" style="display:none;"></div>
                    </form>
                </div><!-- /cb-edit-bulk -->

                <!-- Create form -->
                <div id="cb-create-form" class="p-3" style="display:none;">
                    <h6 class="mb-3">{% translate "Nouvel asset" %}</h6>
                    <form id="cb-form-create" novalidate>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">
                                {% translate "Code" %} <span class="text-muted fw-normal">({% translate "auto si vide" %})</span>
                            </label>
                            <input type="text" id="cb-create-code" class="form-control form-control-sm"
                                   placeholder="NJB-YYYYMMDD-001">
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Adresse" %}</label>
                            <input type="text" id="cb-create-address" class="form-control form-control-sm">
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Fonction principale" %}</label>
                            <select id="cb-create-main-function" class="form-select form-select-sm">
                                <option value="">—</option>
                                {% for key, label in function_choices %}
                                <option value="{{ key }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Fonctions secondaires" %}</label>
                            <div class="cb-checkbox-group border rounded p-2">
                                {% for key, label in function_choices %}
                                <div class="form-check form-check-sm mb-1">
                                    <input class="form-check-input cb-create-sec-fn" type="checkbox"
                                           id="csec-fn-{{ key }}" value="{{ key }}">
                                    <label class="form-check-label small" for="csec-fn-{{ key }}">{{ label }}</label>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <label class="form-label fw-semibold small mb-1">{% translate "Nb. blocs" %}</label>
                                <input type="number" id="cb-create-nb-blocks" class="form-control form-control-sm" min="0">
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-semibold small mb-1">{% translate "Longueur (m)" %}</label>
                                <input type="number" id="cb-create-length" class="form-control form-control-sm" min="0" step="0.1">
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold small mb-1">{% translate "Action recommandée" %}</label>
                            <select id="cb-create-action" class="form-select form-select-sm">
                                <option value="">—</option>
                                {% for key, label in action_choices %}
                                <option value="{{ key }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <label class="form-label fw-semibold small mb-1">{% translate "Priorité" %}</label>
                                <input type="number" id="cb-create-priority" class="form-control form-control-sm" min="0">
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-semibold small mb-1">{% translate "Date cible" %}</label>
                                <input type="date" id="cb-create-target-date" class="form-control form-control-sm">
                            </div>
                        </div>
                        <!-- Position -->
                        <div class="mb-2 p-2 bg-light rounded border">
                            <label class="form-label fw-semibold small mb-1">
                                <i class="bi bi-geo-alt me-1"></i>{% translate "Position" %}
                            </label>
                            <div class="row g-2">
                                <div class="col-6">
                                    <input type="number" id="cb-create-lon" class="form-control form-control-sm"
                                           step="any" placeholder="{% translate 'Lon.' %}">
                                </div>
                                <div class="col-6">
                                    <input type="number" id="cb-create-lat" class="form-control form-control-sm"
                                           step="any" placeholder="{% translate 'Lat.' %}">
                                </div>
                            </div>
                            <div class="mt-1">
                                <button type="button" id="cb-btn-pick-create-position"
                                        class="btn btn-outline-secondary btn-sm w-100">
                                    <i class="bi bi-cursor me-1"></i>{% translate "Cliquer sur la carte pour positionner" %}
                                </button>
                            </div>
                        </div>
                        <div class="d-flex gap-2 mt-3">
                            <button type="submit" class="btn btn-success btn-sm flex-grow-1">
                                <i class="bi bi-plus-circle me-1"></i>{% translate "Créer" %}
                            </button>
                            <button type="button" id="cb-btn-cancel-create" class="btn btn-secondary btn-sm">
                                {% translate "Annuler" %}
                            </button>
                        </div>
                        <div id="cb-create-feedback" class="mt-2" style="display:none;"></div>
                    </form>
                </div><!-- /cb-create-form -->

            </div><!-- /edit-panel -->
            {% endif %}

        </div><!-- /tab-content -->
    </div><!-- /cb-panel -->

    <!-- ══════════════════════════════════════════════════════════════
         MAP PANEL  (2/3)
    ══════════════════════════════════════════════════════════════════ -->
    <div class="cb-map-container">
        <div id="cb-map-header">{% translate "Opération New Jersey" %}</div>
        <div id="cb-map"></div>
        <!-- Rubber-band selection overlay – must be inside the positioned container -->
        <div id="cb-rubber-band" style="display:none;position:absolute;border:2px dashed #0d6efd;background:rgba(13,110,253,0.08);pointer-events:none;z-index:10;"></div>
    </div>

</div><!-- /cb-container -->
</div><!-- /cb-main -->

<!-- Photo carousel modal -->
<div class="modal fade" id="cbPhotoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-dark border-0">
            <div class="modal-header border-0 py-2">
                <button type="button" class="btn-close btn-close-white ms-auto"
                        data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body p-0">
                <div id="cbPhotoCarousel" class="carousel slide" data-bs-interval="false">
                    <div class="carousel-inner" id="cbPhotoCarouselInner"></div>
                    <button class="carousel-control-prev" type="button"
                            data-bs-target="#cbPhotoCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>
                    <button class="carousel-control-next" type="button"
                            data-bs-target="#cbPhotoCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock main %}

{% block script %}
<script>
    window.CB_GEOJSON_URL            = "{% url 'maps:concrete_blocks_geojson' %}";
    window.CB_ASSET_PHOTOS_BASE_URL  = "{% url 'maps:concrete_blocks_asset_photos' asset_id=0 %}";
    window.CB_REGIONAL_ROADS_URL     = "{% url 'common:get_regional_roads_geojson' %}";
    window.CB_PROJECTS_NJ_URL        = "{% url 'maps:projects_new_jersey_geojson' %}";
    window.CB_PROJECTS_NJ_LIST_URL   = "{% url 'maps:projects_new_jersey_list' %}";
    window.CB_PROJECTS_NJ_EXPORT_EXCEL_URL = "{% url 'maps:projects_new_jersey_export_excel' %}";
    window.CB_FUNCTION_COLORS  = {{ function_colors_json|safe }};
    window.FUNCTION_LABELS     = {{ function_labels_json|safe }};
    // Edit API URLs
    window.CB_ASSET_DETAIL_BASE_URL  = "{% url 'maps:concrete_blocks_asset_detail' asset_id=0 %}";
    window.CB_ASSET_UPDATE_BASE_URL  = "{% url 'maps:concrete_blocks_asset_update' asset_id=0 %}";
    window.CB_ASSET_DELETE_BASE_URL  = "{% url 'maps:concrete_blocks_asset_delete' asset_id=0 %}";
    window.CB_ASSET_CREATE_URL       = "{% url 'maps:concrete_blocks_asset_create' %}";
    window.CB_BULK_UPDATE_URL        = "{% url 'maps:concrete_blocks_bulk_update' %}";
    window.CB_OBSERVATION_BASE_URL   = "{% url 'observations:observation_detail' observation_id=0 %}";
    window.CB_CAN_EDIT    = {{ can_edit|yesno:"true,false" }};
    window.CB_CAN_CREATE  = {{ can_create|yesno:"true,false" }};
    window.CB_CAN_DELETE  = {{ can_delete|yesno:"true,false" }};
    window.CB_CSRF_TOKEN  = "{{ csrf_token }}";
</script>
<script src="{% url 'javascript-catalog' %}"></script>
<script src="{% static 'maps/concrete_blocks.js' %}"></script>
{% endblock script %}