{% extends "assets/detail_generic.html" %}
{% load i18n %}
{% load static %}

{% block script %}
{{ block.super }}
<script src="{% static 'assets/clean_litterbin_observations.js' %}"></script>
{% endblock script %}

{% block extra_blocks %}
{% with observations=asset.observations.all %}
<div class="card mb-3" id="observations-card"
     data-update-url="{% url 'assets:clean_update_litter_bin_observations' asset.id %}">

    {# ── Header ── #}
    <div class="card-header bg-light d-flex align-items-center justify-content-between">
        <h5 class="mb-0">
            <i class="bi bi-clipboard2-check me-2"></i>{% translate "Observations" %}
            <span class="badge bg-secondary ms-2" id="obs-count">{{ observations|length }}</span>
        </h5>
        {% if allowed_update_fields %}
        <button id="obs-add-btn" type="button" class="btn btn-outline-primary btn-sm d-none">
            <i class="bi bi-plus-lg me-1"></i>{% translate "Ajouter" %}
        </button>
        {% endif %}
    </div>

    {# ── Body ── #}
    <div class="card-body p-0">
        {% if not observations %}
        <p class="text-muted small px-3 py-2 mb-0" id="obs-empty-msg">{% translate "Aucune observation enregistrée." %}</p>
        {% endif %}

        <div class="accordion accordion-flush" id="observationsAccordion">

        {% for obs in observations %}
        <div class="accordion-item obs-item" data-obs-id="{{ obs.id }}">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed py-2 px-3 d-flex align-items-center gap-2"
                        type="button" data-bs-toggle="collapse" data-bs-target="#obs-c-{{ obs.id }}">
                    <span class="obs-header-date text-muted small fw-normal flex-shrink-0">
                        {% if obs.observation_datetime %}{{ obs.observation_datetime|date:"d/m/Y H:i" }}{% else %}<em>{% translate "Date inconnue" %}</em>{% endif %}
                    </span>
                    <span class="obs-header-note text-truncate flex-grow-1 small" style="max-width:400px;">
                        {{ obs.observer_note|default:""|truncatechars:80 }}
                    </span>
                    <span class="obs-delete-badge badge text-bg-danger d-none ms-auto flex-shrink-0">{% translate "Suppression" %}</span>
                </button>
            </h2>
            <div id="obs-c-{{ obs.id }}" class="accordion-collapse collapse">
                <div class="accordion-body px-3 pt-2 pb-3">

                    {# ════ VIEW PANEL ════ #}
                    <div class="obs-view-panel">

                        {# Note générale #}
                        {% if obs.observer_note %}
                        <p class="text-muted fst-italic small mb-3 border-start border-3 border-secondary ps-2">{{ obs.observer_note }}</p>
                        {% endif %}

                        <div class="d-flex flex-column flex-md-row gap-3">

                            {# ── Colonne Sol ── #}
                            <div style="flex:1;min-width:0">
                                <p class="text-uppercase text-secondary fw-semibold mb-2" style="font-size:.68rem;letter-spacing:.07em">{% translate "Sol" %}</p>
                                <table class="table table-sm table-borderless mb-0" style="font-size:.82rem">
                                    <tbody>
                                    {% with yes='<i class="bi bi-check-circle-fill text-success"></i>' no='<i class="bi bi-x-circle text-muted opacity-50"></i>' %}
                                    <tr>
                                        <td class="text-muted ps-0 py-1" style="width:60%">{% translate "Pente trop forte" %}</td>
                                        <td class="py-1">{% if obs.sol_pente_trop_forte %}<i class="bi bi-check-circle-fill text-warning"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Sol instable" %}</td>
                                        <td class="py-1">{% if obs.sol_instable %}<i class="bi bi-check-circle-fill text-warning"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Surface réfléchissante" %}</td>
                                        <td class="py-1">{% if obs.sol_reflechissant %}<i class="bi bi-check-circle-fill text-secondary"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Surface glissante" %}</td>
                                        <td class="py-1">{% if obs.sol_glissant %}<i class="bi bi-check-circle-fill text-warning"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Fissures" %}</td>
                                        <td class="py-1">{% if obs.sol_fentes %}<i class="bi bi-check-circle-fill text-warning"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Entrave" %}</td>
                                        <td class="py-1">{% if obs.sol_entrave %}<i class="bi bi-check-circle-fill text-danger"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Dalles podotactiles" %}</td>
                                        <td class="py-1">{% if obs.sol_dalles_podo %}<i class="bi bi-check-circle-fill text-info"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    {% endwith %}
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Pente transversale" %}</td>
                                        <td class="py-1">{% if obs.sol_pente_transversale is not None %}<span class="fw-medium">{{ obs.sol_pente_transversale|stringformat:"g" }}&thinsp;%</span>{% else %}<span class="text-muted">—</span>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Pente longitudinale" %}</td>
                                        <td class="py-1">{% if obs.sol_pente_longitudinale is not None %}<span class="fw-medium">{{ obs.sol_pente_longitudinale|stringformat:"g" }}&thinsp;%</span>{% else %}<span class="text-muted">—</span>{% endif %}</td>
                                    </tr>
                                    {% if obs.sol_remarque %}
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Remarque" %}</td>
                                        <td class="py-1 fst-italic">{{ obs.sol_remarque }}</td>
                                    </tr>
                                    {% endif %}
                                    </tbody>
                                </table>
                            </div>

                            {# ── Colonne Accessibilité ── #}
                            <div style="flex:1;min-width:0;border-left:1px solid var(--bs-border-color);padding-left:1rem">
                                <p class="text-uppercase text-secondary fw-semibold mb-2" style="font-size:.68rem;letter-spacing:.07em">{% translate "Accessibilité" %}</p>
                                <table class="table table-sm table-borderless mb-0" style="font-size:.82rem">
                                    <tbody>
                                    <tr>
                                        <td class="text-muted ps-0 py-1" style="width:60%">{% translate "Type de quartier" %}</td>
                                        <td class="py-1">{% if obs.acc_type_quartier %}<span class="fw-medium">{{ obs.get_acc_type_quartier_display }}</span>{% else %}<span class="text-muted">—</span>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Densité flux piéton" %}</td>
                                        <td class="py-1">{% if obs.acc_densite_flux_pieton %}<span class="fw-medium">{{ obs.get_acc_densite_flux_pieton_display }}</span>{% else %}<span class="text-muted">—</span>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Approche 2 m dégagée" %}</td>
                                        <td class="py-1">{% if obs.acc_approche_2m %}<i class="bi bi-check-circle-fill text-success"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Voirie à traverser" %}</td>
                                        <td class="py-1">{% if obs.acc_voirie_a_traverser %}<i class="bi bi-check-circle-fill text-warning"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Poubelle isolée" %}</td>
                                        <td class="py-1">{% if obs.acc_poubelle_isolee %}<i class="bi bi-check-circle-fill text-secondary"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Gêne flux routier" %}</td>
                                        <td class="py-1">{% if obs.acc_gene_flux_routier %}<i class="bi bi-check-circle-fill text-danger"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Gêne flux piéton" %}</td>
                                        <td class="py-1">{% if obs.acc_gene_flux_pieton %}<i class="bi bi-check-circle-fill text-danger"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Itinéraire logique" %}</td>
                                        <td class="py-1">{% if obs.acc_chemin_logique %}<i class="bi bi-check-circle-fill text-success"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Contraste visuel" %}</td>
                                        <td class="py-1">{% if obs.acc_contraste %}<i class="bi bi-check-circle-fill text-info"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Indicateurs de tri" %}</td>
                                        <td class="py-1">{% if obs.acc_indications_tri %}<i class="bi bi-check-circle-fill text-info"></i>{% else %}<i class="bi bi-x-circle text-muted opacity-50"></i>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Accès agent (véhicule)" %}</td>
                                        <td class="py-1">
                                            {% if obs.acc_agent_vehicule %}
                                                {% if obs.acc_agent_vehicule == "normal"     %}<span class="text-success fw-medium">{% translate "Normal" %}</span>
                                                {% elif obs.acc_agent_vehicule == "difficult" %}<span class="text-warning fw-medium">{% translate "Difficile" %}</span>
                                                {% else %}<span class="text-danger fw-medium">{% translate "Impossible" %}</span>{% endif %}
                                            {% else %}<span class="text-muted">—</span>{% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Accès agent (pied)" %}</td>
                                        <td class="py-1">
                                            {% if obs.acc_agent_pied %}
                                                {% if obs.acc_agent_pied == "normal"     %}<span class="text-success fw-medium">{% translate "Normal" %}</span>
                                                {% elif obs.acc_agent_pied == "difficult" %}<span class="text-warning fw-medium">{% translate "Difficile" %}</span>
                                                {% else %}<span class="text-danger fw-medium">{% translate "Impossible" %}</span>{% endif %}
                                            {% else %}<span class="text-muted">—</span>{% endif %}
                                        </td>
                                    </tr>
                                    {% if obs.acc_point_interet %}
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Points d'intérêt" %}</td>
                                        <td class="py-1">
                                            <div class="d-flex flex-wrap gap-1">
                                                {% for poi in obs.acc_point_interet %}<span class="badge rounded-pill border border-secondary-subtle text-secondary-emphasis small">{{ poi }}</span>{% endfor %}
                                                {% if obs.acc_point_interet_autre %}<span class="badge rounded-pill border border-secondary-subtle text-secondary-emphasis small">{{ obs.acc_point_interet_autre }}</span>{% endif %}
                                            </div>
                                        </td>
                                    </tr>
                                    {% endif %}
                                    {% if obs.acc_remarque %}
                                    <tr>
                                        <td class="text-muted ps-0 py-1">{% translate "Remarque" %}</td>
                                        <td class="py-1 fst-italic">{{ obs.acc_remarque }}</td>
                                    </tr>
                                    {% endif %}
                                    </tbody>
                                </table>
                            </div>

                        </div>{# /flex #}
                    </div>{# /obs-view-panel #}

                    {# ════ EDIT PANEL ════ #}
                    <div class="obs-edit-panel d-none">

                        <p class="text-uppercase text-secondary mb-1 mt-1" style="font-size:.72rem;letter-spacing:.05em">{% translate "Général" %}</p>
                        <div class="row g-2 mb-3">
                            <div class="col-md-4">
                                <label class="form-label small mb-1" for="obs-{{ obs.id }}-dt">{% translate "Date / heure" %}</label>
                                <input type="datetime-local" id="obs-{{ obs.id }}-dt" class="form-control form-control-sm"
                                       name="observation_datetime" value="{{ obs.observation_datetime|date:'Y-m-d\TH:i'|default:'' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label small mb-1" for="obs-{{ obs.id }}-note">{% translate "Note" %}</label>
                                <textarea id="obs-{{ obs.id }}-note" class="form-control form-control-sm" name="observer_note" rows="2">{{ obs.observer_note|default:"" }}</textarea>
                            </div>
                        </div>

                        <p class="text-uppercase text-secondary mb-1" style="font-size:.72rem;letter-spacing:.05em">{% translate "Sol" %}</p>
                        <div class="row g-2 mb-3">
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-sol1" name="sol_pente_trop_forte" {% if obs.sol_pente_trop_forte %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-sol1">{% translate "Pente trop forte" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-sol2" name="sol_instable" {% if obs.sol_instable %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-sol2">{% translate "Sol instable" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-sol3" name="sol_reflechissant" {% if obs.sol_reflechissant %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-sol3">{% translate "Surface réfléchissante" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-sol4" name="sol_glissant" {% if obs.sol_glissant %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-sol4">{% translate "Surface glissante" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-sol5" name="sol_fentes" {% if obs.sol_fentes %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-sol5">{% translate "Fissures" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-sol6" name="sol_entrave" {% if obs.sol_entrave %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-sol6">{% translate "Entrave" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-sol7" name="sol_dalles_podo" {% if obs.sol_dalles_podo %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-sol7">{% translate "Dalles podotactiles" %}</label></div></div>
                            <div class="col-6 col-md-3">
                                <label class="form-label small mb-1" for="obs-{{ obs.id }}-pt">{% translate "Pente transversale (%)" %}</label>
                                <input type="number" step="0.1" id="obs-{{ obs.id }}-pt" class="form-control form-control-sm" name="sol_pente_transversale" value="{% if obs.sol_pente_transversale is not None %}{{ obs.sol_pente_transversale|stringformat:"g" }}{% endif %}">
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="form-label small mb-1" for="obs-{{ obs.id }}-pl">{% translate "Pente longitudinale (%)" %}</label>
                                <input type="number" step="0.1" id="obs-{{ obs.id }}-pl" class="form-control form-control-sm" name="sol_pente_longitudinale" value="{% if obs.sol_pente_longitudinale is not None %}{{ obs.sol_pente_longitudinale|stringformat:"g" }}{% endif %}">
                            </div>
                            <div class="col-12">
                                <label class="form-label small mb-1" for="obs-{{ obs.id }}-sr">{% translate "Remarque sol" %}</label>
                                <textarea id="obs-{{ obs.id }}-sr" class="form-control form-control-sm" name="sol_remarque" rows="2">{{ obs.sol_remarque|default:"" }}</textarea>
                            </div>
                        </div>

                        <p class="text-uppercase text-secondary mb-1" style="font-size:.72rem;letter-spacing:.05em">{% translate "Accessibilité" %}</p>
                        <div class="row g-2 mb-3">
                            <div class="col-md-4">
                                <label class="form-label small mb-1">{% translate "Type de quartier" %}</label>
                                <select name="acc_type_quartier" class="form-select form-select-sm">
                                    <option value="">—</option>
                                    <option value="importante_ponctuelle" {% if obs.acc_type_quartier == "importante_ponctuelle" %}selected{% endif %}>{% translate "Important – ponctuel" %}</option>
                                    <option value="importante_continue"   {% if obs.acc_type_quartier == "importante_continue"   %}selected{% endif %}>{% translate "Important – continu" %}</option>
                                    <option value="faible"                {% if obs.acc_type_quartier == "faible"                %}selected{% endif %}>{% translate "Faible" %}</option>
                                    <option value="autre"                 {% if obs.acc_type_quartier == "autre"                 %}selected{% endif %}>{% translate "Autre" %}</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small mb-1">{% translate "Densité flux piéton" %}</label>
                                <select name="acc_densite_flux_pieton" class="form-select form-select-sm">
                                    <option value="">—</option>
                                    <option value="high"   {% if obs.acc_densite_flux_pieton == "high"   %}selected{% endif %}>{% translate "Élevée" %}</option>
                                    <option value="medium" {% if obs.acc_densite_flux_pieton == "medium" %}selected{% endif %}>{% translate "Moyenne" %}</option>
                                    <option value="low"    {% if obs.acc_densite_flux_pieton == "low"    %}selected{% endif %}>{% translate "Faible" %}</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small mb-1">{% translate "Accès agent (véhicule)" %}</label>
                                <select name="acc_agent_vehicule" class="form-select form-select-sm">
                                    <option value="">—</option>
                                    <option value="normal"     {% if obs.acc_agent_vehicule == "normal"     %}selected{% endif %}>{% translate "Normal" %}</option>
                                    <option value="difficult"  {% if obs.acc_agent_vehicule == "difficult"  %}selected{% endif %}>{% translate "Difficile" %}</option>
                                    <option value="impossible" {% if obs.acc_agent_vehicule == "impossible" %}selected{% endif %}>{% translate "Impossible" %}</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small mb-1">{% translate "Accès agent (pied)" %}</label>
                                <select name="acc_agent_pied" class="form-select form-select-sm">
                                    <option value="">—</option>
                                    <option value="normal"     {% if obs.acc_agent_pied == "normal"     %}selected{% endif %}>{% translate "Normal" %}</option>
                                    <option value="difficult"  {% if obs.acc_agent_pied == "difficult"  %}selected{% endif %}>{% translate "Difficile" %}</option>
                                    <option value="impossible" {% if obs.acc_agent_pied == "impossible" %}selected{% endif %}>{% translate "Impossible" %}</option>
                                </select>
                            </div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-a1" name="acc_approche_2m"       {% if obs.acc_approche_2m       %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-a1">{% translate "Approche 2 m dégagée" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-a2" name="acc_voirie_a_traverser" {% if obs.acc_voirie_a_traverser %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-a2">{% translate "Voirie à traverser" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-a3" name="acc_poubelle_isolee"    {% if obs.acc_poubelle_isolee    %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-a3">{% translate "Poubelle isolée" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-a4" name="acc_gene_flux_routier"  {% if obs.acc_gene_flux_routier  %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-a4">{% translate "Gêne flux routier" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-a5" name="acc_gene_flux_pieton"   {% if obs.acc_gene_flux_pieton   %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-a5">{% translate "Gêne flux piéton" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-a6" name="acc_chemin_logique"     {% if obs.acc_chemin_logique     %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-a6">{% translate "Itinéraire logique" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-a7" name="acc_contraste"          {% if obs.acc_contraste          %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-a7">{% translate "Contraste visuel" %}</label></div></div>
                            <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-{{ obs.id }}-a8" name="acc_indications_tri"    {% if obs.acc_indications_tri    %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-a8">{% translate "Indicateurs de tri" %}</label></div></div>
                            <div class="col-12">
                                <label class="form-label small mb-1">{% translate "Points d'intérêt" %}</label>
                                <div class="d-flex flex-wrap gap-3">
                                    {% with poi=obs.acc_point_interet %}
                                    <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="bus_stop"            id="obs-{{ obs.id }}-p1" {% if "bus_stop"            in poi %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-p1">{% translate "Arrêt Bus/Tram" %}</label></div>
                                    <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="park"                id="obs-{{ obs.id }}-p2" {% if "park"                in poi %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-p2">{% translate "Parc" %}</label></div>
                                    <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="school"              id="obs-{{ obs.id }}-p3" {% if "school"              in poi %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-p3">{% translate "École" %}</label></div>
                                    <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="commerce"            id="obs-{{ obs.id }}-p4" {% if "commerce"            in poi %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-p4">{% translate "Commerce" %}</label></div>
                                    <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="monument"            id="obs-{{ obs.id }}-p5" {% if "monument"            in poi %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-p5">{% translate "Monument" %}</label></div>
                                    <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="pedestrian_crossing" id="obs-{{ obs.id }}-p6" {% if "pedestrian_crossing" in poi %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-p6">{% translate "Passage piéton" %}</label></div>
                                    <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="place"               id="obs-{{ obs.id }}-p7" {% if "place"               in poi %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-p7">{% translate "Place" %}</label></div>
                                    <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="none"                id="obs-{{ obs.id }}-p8" {% if "none"                in poi %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-p8">{% translate "Aucun" %}</label></div>
                                    <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="other"               id="obs-{{ obs.id }}-p9" {% if "other"               in poi %}checked{% endif %}><label class="form-check-label small" for="obs-{{ obs.id }}-p9">{% translate "Autre" %}</label></div>
                                    {% endwith %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small mb-1" for="obs-{{ obs.id }}-pia">{% translate "Autre point d'intérêt" %}</label>
                                <input type="text" id="obs-{{ obs.id }}-pia" class="form-control form-control-sm" name="acc_point_interet_autre" value="{{ obs.acc_point_interet_autre|default:'' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label small mb-1" for="obs-{{ obs.id }}-ar">{% translate "Remarque accessibilité" %}</label>
                                <textarea id="obs-{{ obs.id }}-ar" class="form-control form-control-sm" name="acc_remarque" rows="2">{{ obs.acc_remarque|default:"" }}</textarea>
                            </div>
                        </div>

                        {% if allowed_update_fields %}
                        <button type="button" class="btn btn-outline-danger btn-sm obs-mark-delete-btn">
                            <i class="bi bi-trash me-1"></i>{% translate "Supprimer cette observation" %}
                        </button>
                        {% endif %}

                    </div>{# /obs-edit-panel #}

                </div>
            </div>
        </div>
        {% endfor %}

        </div>{# /accordion #}
    </div>{# /card-body #}
</div>{# /card #}

{# ── Template for NEW observations ── #}
{% if allowed_update_fields %}
<template id="obs-new-item-template">
    <div class="accordion-item obs-item obs-new-item" data-obs-id="">
        <h2 class="accordion-header">
            <button class="accordion-button py-2 px-3 d-flex align-items-center gap-2"
                    type="button" data-bs-toggle="collapse" data-bs-target="#obs-c-_NEWID_">
                <span class="obs-header-date text-muted small fw-normal flex-shrink-0">—</span>
                <span class="obs-header-note text-truncate flex-grow-1 small" style="max-width:400px;"></span>
                <span class="obs-delete-badge badge text-bg-danger d-none ms-auto flex-shrink-0">{% translate "Suppression" %}</span>
            </button>
        </h2>
        <div id="obs-c-_NEWID_" class="accordion-collapse show">
            <div class="accordion-body px-3 pt-2 pb-3">
                <div class="obs-edit-panel">

                    <p class="text-uppercase text-secondary mb-1 mt-1" style="font-size:.72rem;letter-spacing:.05em">{% translate "Général" %}</p>
                    <div class="row g-2 mb-3">
                        <div class="col-md-4">
                            <label class="form-label small mb-1" for="obs-_NEWID_-dt">{% translate "Date / heure" %}</label>
                            <input type="datetime-local" id="obs-_NEWID_-dt" class="form-control form-control-sm" name="observation_datetime" value="">
                        </div>
                        <div class="col-12">
                            <label class="form-label small mb-1" for="obs-_NEWID_-note">{% translate "Note" %}</label>
                            <textarea id="obs-_NEWID_-note" class="form-control form-control-sm" name="observer_note" rows="2"></textarea>
                        </div>
                    </div>

                    <p class="text-uppercase text-secondary mb-1" style="font-size:.72rem;letter-spacing:.05em">{% translate "Sol" %}</p>
                    <div class="row g-2 mb-3">
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-sol1" name="sol_pente_trop_forte"><label class="form-check-label small" for="obs-_NEWID_-sol1">{% translate "Pente trop forte" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-sol2" name="sol_instable"><label class="form-check-label small" for="obs-_NEWID_-sol2">{% translate "Sol instable" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-sol3" name="sol_reflechissant"><label class="form-check-label small" for="obs-_NEWID_-sol3">{% translate "Surface réfléchissante" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-sol4" name="sol_glissant"><label class="form-check-label small" for="obs-_NEWID_-sol4">{% translate "Surface glissante" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-sol5" name="sol_fentes"><label class="form-check-label small" for="obs-_NEWID_-sol5">{% translate "Fissures" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-sol6" name="sol_entrave"><label class="form-check-label small" for="obs-_NEWID_-sol6">{% translate "Entrave" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-sol7" name="sol_dalles_podo"><label class="form-check-label small" for="obs-_NEWID_-sol7">{% translate "Dalles podotactiles" %}</label></div></div>
                        <div class="col-6 col-md-3"><label class="form-label small mb-1" for="obs-_NEWID_-pt">{% translate "Pente transversale (%)" %}</label><input type="number" step="0.1" id="obs-_NEWID_-pt" class="form-control form-control-sm" name="sol_pente_transversale" value=""></div>
                        <div class="col-6 col-md-3"><label class="form-label small mb-1" for="obs-_NEWID_-pl">{% translate "Pente longitudinale (%)" %}</label><input type="number" step="0.1" id="obs-_NEWID_-pl" class="form-control form-control-sm" name="sol_pente_longitudinale" value=""></div>
                        <div class="col-12"><label class="form-label small mb-1" for="obs-_NEWID_-sr">{% translate "Remarque sol" %}</label><textarea id="obs-_NEWID_-sr" class="form-control form-control-sm" name="sol_remarque" rows="2"></textarea></div>
                    </div>

                    <p class="text-uppercase text-secondary mb-1" style="font-size:.72rem;letter-spacing:.05em">{% translate "Accessibilité" %}</p>
                    <div class="row g-2 mb-3">
                        <div class="col-md-4"><label class="form-label small mb-1">{% translate "Type de quartier" %}</label><select name="acc_type_quartier" class="form-select form-select-sm"><option value="">—</option><option value="importante_ponctuelle">{% translate "Important – ponctuel" %}</option><option value="importante_continue">{% translate "Important – continu" %}</option><option value="faible">{% translate "Faible" %}</option><option value="autre">{% translate "Autre" %}</option></select></div>
                        <div class="col-md-4"><label class="form-label small mb-1">{% translate "Densité flux piéton" %}</label><select name="acc_densite_flux_pieton" class="form-select form-select-sm"><option value="">—</option><option value="high">{% translate "Élevée" %}</option><option value="medium">{% translate "Moyenne" %}</option><option value="low">{% translate "Faible" %}</option></select></div>
                        <div class="col-md-4"><label class="form-label small mb-1">{% translate "Accès agent (véhicule)" %}</label><select name="acc_agent_vehicule" class="form-select form-select-sm"><option value="">—</option><option value="normal">{% translate "Normal" %}</option><option value="difficult">{% translate "Difficile" %}</option><option value="impossible">{% translate "Impossible" %}</option></select></div>
                        <div class="col-md-4"><label class="form-label small mb-1">{% translate "Accès agent (pied)" %}</label><select name="acc_agent_pied" class="form-select form-select-sm"><option value="">—</option><option value="normal">{% translate "Normal" %}</option><option value="difficult">{% translate "Difficile" %}</option><option value="impossible">{% translate "Impossible" %}</option></select></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-a1" name="acc_approche_2m"><label       class="form-check-label small" for="obs-_NEWID_-a1">{% translate "Approche 2 m dégagée" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-a2" name="acc_voirie_a_traverser"><label  class="form-check-label small" for="obs-_NEWID_-a2">{% translate "Voirie à traverser" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-a3" name="acc_poubelle_isolee"><label     class="form-check-label small" for="obs-_NEWID_-a3">{% translate "Poubelle isolée" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-a4" name="acc_gene_flux_routier"><label   class="form-check-label small" for="obs-_NEWID_-a4">{% translate "Gêne flux routier" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-a5" name="acc_gene_flux_pieton"><label    class="form-check-label small" for="obs-_NEWID_-a5">{% translate "Gêne flux piéton" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-a6" name="acc_chemin_logique"><label      class="form-check-label small" for="obs-_NEWID_-a6">{% translate "Itinéraire logique" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-a7" name="acc_contraste"><label           class="form-check-label small" for="obs-_NEWID_-a7">{% translate "Contraste visuel" %}</label></div></div>
                        <div class="col-6 col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="obs-_NEWID_-a8" name="acc_indications_tri"><label     class="form-check-label small" for="obs-_NEWID_-a8">{% translate "Indicateurs de tri" %}</label></div></div>
                        <div class="col-12">
                            <label class="form-label small mb-1">{% translate "Points d'intérêt" %}</label>
                            <div class="d-flex flex-wrap gap-3">
                                <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="bus_stop"            id="obs-_NEWID_-p1"><label class="form-check-label small" for="obs-_NEWID_-p1">{% translate "Arrêt Bus/Tram" %}</label></div>
                                <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="park"                id="obs-_NEWID_-p2"><label class="form-check-label small" for="obs-_NEWID_-p2">{% translate "Parc" %}</label></div>
                                <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="school"              id="obs-_NEWID_-p3"><label class="form-check-label small" for="obs-_NEWID_-p3">{% translate "École" %}</label></div>
                                <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="commerce"            id="obs-_NEWID_-p4"><label class="form-check-label small" for="obs-_NEWID_-p4">{% translate "Commerce" %}</label></div>
                                <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="monument"            id="obs-_NEWID_-p5"><label class="form-check-label small" for="obs-_NEWID_-p5">{% translate "Monument" %}</label></div>
                                <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="pedestrian_crossing" id="obs-_NEWID_-p6"><label class="form-check-label small" for="obs-_NEWID_-p6">{% translate "Passage piéton" %}</label></div>
                                <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="place"               id="obs-_NEWID_-p7"><label class="form-check-label small" for="obs-_NEWID_-p7">{% translate "Place" %}</label></div>
                                <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="none"                id="obs-_NEWID_-p8"><label class="form-check-label small" for="obs-_NEWID_-p8">{% translate "Aucun" %}</label></div>
                                <div class="form-check"><input class="form-check-input" type="checkbox" name="acc_point_interet" value="other"               id="obs-_NEWID_-p9"><label class="form-check-label small" for="obs-_NEWID_-p9">{% translate "Autre" %}</label></div>
                            </div>
                        </div>
                        <div class="col-md-6"><label class="form-label small mb-1" for="obs-_NEWID_-pia">{% translate "Autre point d'intérêt" %}</label><input type="text" id="obs-_NEWID_-pia" class="form-control form-control-sm" name="acc_point_interet_autre" value=""></div>
                        <div class="col-12"><label class="form-label small mb-1" for="obs-_NEWID_-ar">{% translate "Remarque accessibilité" %}</label><textarea id="obs-_NEWID_-ar" class="form-control form-control-sm" name="acc_remarque" rows="2"></textarea></div>
                    </div>

                    <button type="button" class="btn btn-outline-danger btn-sm obs-mark-delete-btn">
                        <i class="bi bi-trash me-1"></i>{% translate "Supprimer cette observation" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
{% endif %}

{% endwith %}
{% endblock extra_blocks %}