{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load observation_tags %}
{% load short_name %}
{% load mention_tags %}

{% block head %}
<style>
    .photo-thumbnail {
        width: 100px;
        height: 100px;
        object-fit: cover;
        cursor: pointer;
        border-radius: 4px;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .photo-thumbnail:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
    
    .info-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .badge {
        font-size: 0.9rem;
        min-width: 100px;
    }
    
    .choice-badge {
        transition: all 0.2s ease;
        opacity: 0.7;
        border: 2px solid transparent;
    }
    
    .choice-badge.active {
        opacity: 1;
        border-color: rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(1.05);
    }
    
    .choice-badge:hover {
        opacity: 0.9;
        transform: scale(1.02);
    }
    /* jQuery UI autocomplete au-dessus des modales Bootstrap */
    .ui-autocomplete { z-index: 2000 !important; }

    /* Popup des observations voisines */
    .obs-popup-header {
        padding: 6px 10px;
        color: #fff;
        font-weight: 600;
        font-size: 0.85rem;
        border-radius: 6px 6px 0 0;
    }
    .obs-popup-body {
        padding: 8px 10px;
        font-size: 0.82rem;
    }
    .obs-popup-type { color: #555; margin-bottom: 4px; }
    .obs-popup-desc { margin-bottom: 6px; color: #333; }
    .obs-popup-btn {
        display: inline-block;
        margin-top: 4px;
        font-size: 0.8rem;
        color: #0d6efd;
        text-decoration: none;
    }
    .obs-popup-btn:hover { text-decoration: underline; }

    /* Popup des interventions récentes */
    .interv-popup-header {
        padding: 6px 10px;
        color: #fff;
        font-weight: 600;
        font-size: 0.85rem;
        border-radius: 6px 6px 0 0;
    }
    .interv-popup-body {
        padding: 8px 10px;
        font-size: 0.82rem;
    }
    .interv-popup-code { color: #555; margin-bottom: 4px; font-weight: 600; }
    .interv-popup-title { margin-bottom: 6px; color: #333; }
    .interv-popup-btn {
        display: inline-block;
        margin-top: 4px;
        font-size: 0.8rem;
        color: #0d6efd;
        text-decoration: none;
    }
    .interv-popup-btn:hover { text-decoration: underline; }
</style>
<link rel="stylesheet" href="{% static 'common/jquery-ui.min.css' %}">
{% endblock head %}

{% block content %}

<div class="container-fluid mt-3">
    {% if messages %}
        {% for message in messages %}
            <div class="alert {% if message.tags == 'success' %}alert-success{% elif message.tags == 'error' %}alert-danger{% else %}alert-{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{% translate 'Fermer' %}"></button>
            </div>
        {% endfor %}
    {% endif %}

    <div class="row">
        <!-- Left column - Details -->
        <div class="col-md-6">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4>{% translate "Détail de l'observation" %}</h4>
                <div class="d-flex gap-2">
                    <a href="{% url 'observations:observations_index' %}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
                    </a>
                </div>
            </div>

            <!-- Summary badges -->
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <span class="badge bg-light text-dark me-1">{{ observation.code }}</span>
                    <!-- Modifier / Supprimer -->
                    {% if can_edit or can_delete %}
                    <div class="d-flex flex-wrap gap-2 pt-1">
                        {% if can_edit %}
                            {% if observation.status == 'in_preparation' or observation.status == 'to_process' or observation.status == 'to_redirect' or observation.status == 'needs_info' %}
                            <a href="{% url 'observations:observation_edit' observation.id %}" class="btn btn-outline-secondary btn-sm" style="width:150px">
                                <i class="bi bi-pencil"></i> {% translate "Modifier" %}
                            </a>
                            {% endif %}
                        {% endif %}
                        {% if can_delete %}
                        <button type="button" class="btn btn-outline-danger btn-sm" style="width:150px"
                                data-bs-toggle="modal" data-bs-target="#deleteObservationModal">
                            <i class="bi bi-trash"></i> {% translate "Supprimer" %}
                        </button>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
                <div class="d-flex flex-column align-items-end gap-1">
                    <span class="badge {% if observation.observation_type == 'incident' %}bg-danger{% elif observation.observation_type == 'inventory' %}bg-secondary{% elif observation.observation_type == 'remark' %}bg-info{% endif %}">
                        {% if observation.observation_type == 'incident' %}<i class="bi bi-exclamation-triangle me-1"></i>
                        {% elif observation.observation_type == 'inventory' %}<i class="bi bi-clipboard-check me-1"></i>
                        {% elif observation.observation_type == 'remark' %}<i class="bi bi-chat-dots me-1"></i>
                        {% else %}<i class="bi bi-clipboard-check me-1"></i>{% endif %}
                        {{ observation.get_observation_type_display }}
                    </span>
                    {% if observation.status == 'in_preparation' %}
                        <span class="badge bg-secondary"><i class="bi bi-hourglass-split me-1"></i>{{ observation.get_status_display }}</span>
                    {% elif observation.status == 'to_process' %}
                        <span class="badge bg-danger"><i class="bi bi-clock-history me-1"></i>{{ observation.get_status_display }}</span>
                    {% elif observation.status == 'needs_info' %}
                        <span class="badge bg-warning text-dark"><i class="bi bi-question-circle me-1"></i>{{ observation.get_status_display }}</span>
                    {% elif observation.status == 'in_progress' %}
                        <span class="badge bg-warning text-dark"><i class="bi bi-hourglass-split me-1"></i>{{ observation.get_status_display }}</span>
                    {% elif observation.status == 'processed' %}
                        <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>{{ observation.get_status_display }}</span>
                    {% elif observation.status == 'not_relevant' %}
                        <span class="badge bg-secondary"><i class="bi bi-slash-circle me-1"></i>{{ observation.get_status_display }}</span>
                    {% elif observation.status == 'to_redirect' %}
                        <span class="badge bg-warning text-dark"><i class="bi bi-reply-all me-1"></i>{{ observation.get_status_display }}</span>
                    {% elif observation.status == 'duplicate' %}
                        <span class="badge bg-info text-dark"><i class="bi bi-files me-1"></i>{{ observation.get_status_display }}</span>
                    {% elif observation.status == 'closed' %}
                        <span class="badge bg-dark"><i class="bi bi-check-circle-fill me-1"></i>{{ observation.get_status_display }}</span>
                    {% elif observation.status == 'archived' %}
                        <span class="badge bg-dark"><i class="bi bi-archive me-1"></i>{{ observation.get_status_display }}</span>
                    {% endif %}
                </div>
            </div>
            
            {% if observation.status == 'needs_info' %}
            <div class="alert alert-warning d-flex align-items-start gap-2 mb-3" role="alert">
                <i class="bi bi-question-circle-fill fs-5 flex-shrink-0 mt-1"></i>
                <div class="w-100">
                    <h6 class="alert-heading mb-1">{% translate "Informations complémentaires demandées" %}</h6>
                    <p class="mb-2 small">
                        {% if is_creator %}
                            {% translate "Des informations complémentaires sont nécessaires pour traiter votre observation. Vous pouvez modifier la fiche pour corriger/compléter les données (photos, checklist, description) ou répondre directement ci-dessous dans la discussion." %}
                        {% else %}
                            {% translate "Cette observation est en attente d'informations complémentaires de la part de l'observateur." %}
                        {% endif %}
                    </p>
                    {% if is_creator %}
                    <div class="d-flex gap-2">
                        {% if can_edit %}
                        <a href="{% url 'observations:observation_edit' observation.id %}" class="btn btn-warning btn-sm">
                            <i class="bi bi-pencil"></i> {% translate "Modifier la fiche" %}
                        </a>
                        {% endif %}
                        <a href="#discussion" class="btn btn-outline-dark btn-sm">
                            <i class="bi bi-chat-dots"></i> {% translate "Répondre dans la discussion" %}
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Description -->
            <div class="info-section">
                <h5>{% translate "Description" %}</h5>
                <p>{{ observation.description|default:"-" }}</p>
            </div>
            
            <!-- Location -->
            {% if observation.address %}
            <div class="info-section">
                <h5><i class="bi bi-geo-alt"></i> {% translate "Adresse" %}</h5>
                <p>{{ observation.address }}</p>
            </div>
            {% endif %}
            
            <!-- Thematic and Category -->
            <div class="info-section">
                <div class="row">
                    <div class="col-md-6">
                        <h6>{% translate "Thématique" %}</h6>
                        <p>
                            {% if observation.thematic %}
                            <span class="badge bg-light text-dark">
                                <i class="bi {{ observation.thematic.icon }} me-1"></i>
                                {{ observation.thematic.name }}
                            {% else %}
                            -
                            {% endif %}
                        </p>
                    </div>
                    <div class="col-md-6">
                        <h6>{% translate "Catégorie" %}</h6>
                        <p>
                            {% if observation.category %}
                            <span class="badge bg-light text-dark">
                                {% if observation.category.parent %}
                                    {{ observation.category.parent.get_name }} - {{ observation.category.get_name }}
                                {% else %}
                                    {{ observation.category.get_name }}
                                {% endif %}
                            </span>
                            {% else %}
                            -
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Symptom -->
            {% if observation.symptom %}
            <div class="info-section">
                <h5>{% translate "Symptôme" %}</h5>
                <p>
                    <span class="badge text-danger">{{ observation.symptom }}</span>
                </p>
            </div>
            {% endif %}

            <!-- Checklist -->
            {% if checklist_template and checklist_items_with_responses %}
            <div class="info-section">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">
                        <i class="bi bi-clipboard-check me-2"></i>
                        {{ checklist_template.get_name }}
                    </h5>
                </div>
                
                <!-- Display mode -->
                <div id="checklistDisplay">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{% translate "Élément" %}</th>
                                <th class="text-center" style="width: 150px;">{% translate "Valeur" %}</th>
                                <th style="width: 200px;">{% translate "Commentaire" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item_data in checklist_items_with_responses %}
                            <tr>
                                <td>
                                    <div class="fw-medium">{{ item_data.item.get_name }}</div>
                                    {% if item_data.item.get_description %}
                                    <small class="text-muted">{{ item_data.item.get_description }}</small>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    {% if item_data.response %}
                                        {% if item_data.item.item_type == 'boolean' %}
                                            {% if item_data.response.value_boolean %}
                                                <span class="badge bg-success"><i class="bi bi-check-lg"></i> {% translate "Oui" %}</span>
                                            {% elif item_data.response.value_boolean == False %}
                                                <span class="badge bg-danger"><i class="bi bi-x-lg"></i> {% translate "Non" %}</span>
                                            {% else %}
                                                <span class="badge bg-secondary">-</span>
                                            {% endif %}
                                        {% elif item_data.item.item_type == 'text' %}
                                            <span class="text-dark">{{ item_data.response.value_text|default:"-"|truncatewords:10 }}</span>
                                        {% elif item_data.item.item_type == 'number' %}
                                            <span class="text-dark">{{ item_data.response.value_number|default:"-" }}</span>
                                        {% elif item_data.item.item_type == 'choice' %}
                                            {% display_choice_value item_data.item item_data.response.value_choice %}
                                        {% elif item_data.item.item_type == 'choice_multiple' %}
                                            {% display_choice_value item_data.item item_data.response.value_choices %}
                                        {% endif %}
                                    {% else %}
                                        <span class="badge bg-secondary">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if item_data.response and item_data.response.comment %}
                                    <small class="text-muted">{{ item_data.response.comment }}</small>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}

            <!-- Linked interventions -->
            {% if visible_interventions %}
            <div class="info-section">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5 class="mb-0">
                        <i class="bi bi-tools me-1"></i>
                        {% if visible_interventions|length > 1 %}
                            {% translate "Interventions associées" %}
                        {% else %}
                            {% translate "Intervention liée" %}
                        {% endif %}
                        <span class="badge bg-secondary ms-1">{{ visible_interventions|length }}</span>
                    </h5>
                    {% if can_link and observation.intervention %}
                    <form method="post" action="{% url 'observations:link_observation_to_intervention' observation.id %}" class="d-inline">
                        {% csrf_token %}
                        <input type="hidden" name="intervention_id" value="">
                        <button type="submit" class="btn btn-sm btn-outline-danger" title="{% translate 'Délier' %}">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </form>
                    {% endif %}
                </div>
                <div class="d-flex flex-column gap-2">
                    {% for item in visible_interventions %}
                    {% with itv=item.intervention %}
                    <div class="d-flex align-items-center justify-content-between p-2 rounded bg-light border">
                        <div class="d-flex align-items-center gap-2 text-truncate">
                            {% if item.can_view_detail %}
                                <a class="fw-semibold text-decoration-none" href="{% url 'interventions:intervention_detail' itv.id %}">
                                    <i class="bi bi-link-45deg"></i> {{ itv.code|default:itv.id }}
                                </a>
                            {% else %}
                                <span class="fw-semibold text-muted">{{ itv.code|default:itv.id }}</span>
                            {% endif %}
                            <span class="text-truncate small text-muted" style="max-width: 250px;" title="{{ itv.title }}">– {{ itv.title }}</span>
                        </div>
                        <div class="d-flex align-items-center gap-2 flex-shrink-0 ms-2">
                            <span class="badge bg-{{ itv.get_status_color }} status-{{ itv.status }}">
                                {{ itv.get_status_display }}
                            </span>
                            {% if item.can_view_summary %}
                                <button type="button"
                                        class="btn btn-sm btn-outline-secondary py-0 px-1"
                                        data-bs-toggle="modal"
                                        data-bs-target="#interventionSummaryModal"
                                        data-summary-url="{% url 'interventions:intervention_summary_modal' itv.id %}"
                                        data-summary-title="{{ itv.code }}"
                                        title="{% translate 'Voir le résumé' %}">
                                    <i class="bi bi-eye"></i>
                                </button>
                            {% endif %}
                        </div>
                    </div>
                    {% endwith %}
                    {% endfor %}
                </div>
            </div>
            {% elif observation.intervention %}
            <div class="info-section">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <h5 class="mb-0">{% translate "Intervention liée" %}</h5>
                    {% if can_link %}
                    <form method="post" action="{% url 'observations:link_observation_to_intervention' observation.id %}" class="d-inline">
                        {% csrf_token %}
                        <input type="hidden" name="intervention_id" value="">
                        <button type="submit" class="btn btn-sm btn-outline-danger" title="{% translate 'Délier' %}">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </form>
                    {% endif %}
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-{{ observation.intervention.get_status_color }} status-{{ observation.intervention.status }}">
                        {{ observation.intervention.get_status_display }}
                    </span>
                    {% if can_view_intervention_summary_modal %}
                        <button type="button"
                                class="btn btn-sm btn-outline-secondary"
                                data-bs-toggle="modal"
                                data-bs-target="#interventionSummaryModal"
                                data-summary-url="{% url 'interventions:intervention_summary_modal' observation.intervention.id %}"
                                data-summary-title="{{ observation.intervention.code }}"
                                title="{% translate 'Voir le résumé' %}">
                            <i class="bi bi-eye"></i>
                        </button>
                    {% endif %}
                    {% if can_view_intervention_detail %}
                        <a class="btn btn-outline-primary btn-sm" href="{% url 'interventions:intervention_detail' observation.intervention.id %}">
                            <i class="bi bi-link-45deg"></i> {{ observation.intervention.code|default:observation.intervention.id }}
                        </a>
                    {% else %}
                        <span class="text-muted">{{ observation.intervention.code|default:observation.intervention.id }}</span>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Linked project -->
            {% if observation.project %}
            <div class="info-section">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <h5 class="mb-0">{% translate "Projet lié" %}</h5>
                    {% if can_link %}
                    <form method="post" action="{% url 'observations:link_observation_to_project' observation.id %}" class="d-inline">
                        {% csrf_token %}
                        <input type="hidden" name="project_id" value="">
                        <button type="submit" class="btn btn-sm btn-outline-danger" title="{% translate 'Délier' %}">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </form>
                    {% endif %}
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-secondary">{{ observation.project.get_status_display }}</span>
                    <a class="btn btn-outline-primary btn-sm" href="{{ observation.project.get_absolute_url }}">
                        <i class="bi bi-diagram-3"></i> {{ observation.project.code }} – {{ observation.project.name }}
                    </a>
                </div>
            </div>
            {% endif %}
            
            <!-- Created info -->
            <div class="info-section">
                <div class="row">
                    <div class="col-md-6">
                        <h6>{% translate "Créé le" %}</h6>
                        <p>{{ observation.created_at|date:"d/m/Y H:i" }}</p>
                    </div>
                    <div class="col-md-6">
                        <h6>{% translate "Créé par" %}</h6>
                        <p>
                            {% if observation.created_by %}
                            {{ observation.created_by|short_name }}{% with comp=observation.created_by|user_company %}{% if comp %} ({{ comp }}){% endif %}{% endwith %}
                            {% else %}
                            -
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- Photos -->
            {% if photos %}
            <div class="info-section">
                <h5>{% translate "Photos" %} ({{ photos|length }})</h5>
                <div class="d-flex flex-wrap gap-2">
                    {% for photo in photos %}
                    {% private_file_url photo 'photo' as photo_url %}
                    {% private_file_url photo 'thumbnail' as thumb_url %}
                    <img src="{{ thumb_url|default:photo_url }}"
                         alt="Photo"
                         class="photo-thumbnail"
                         data-bs-toggle="modal"
                         data-bs-target="#photoLightboxModal"
                         onclick="openPhotoLightbox({{ forloop.counter0 }})">
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Comments -->
            <div class="info-section">
                <h5>{% translate "Commentaires" %}</h5>
                {% if comments %}
                    <div class="list-group list-group-flush">
                        {% for c in comments %}
                        <div class="list-group-item px-0">
                            <div class="d-flex justify-content-between">
                                <div class="fw-semibold small">
                                    {{ c.author|short_name }}{% with comp=c.author|user_company %}{% if comp %} ({{ comp }}){% endif %}{% endwith %}
                                </div>
                                <div class="text-muted small">{{ c.created_at|date:"d/m/Y H:i" }}</div>
                            </div>
                            <div class="mt-1">{{ c.comment|linebreaksbr }}</div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-muted mb-0">{% translate "Aucun commentaire." %}</p>
                {% endif %}
            </div>

            <!-- Modal : confirmation changement de statut (avec commentaire optionnel) -->
            <div class="modal fade" id="actionStatusModal" tabindex="-1" aria-labelledby="actionStatusModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <form method="post" action="{% url 'observations:observation_change_status' observation.id %}" id="actionStatusForm">
                            {% csrf_token %}
                            <input type="hidden" name="new_status" id="actionStatusValue">
                            <input type="hidden" name="symptom_id" id="actionStatusSymptomId">
                            <div class="modal-header">
                                <h5 class="modal-title" id="actionStatusModalLabel"></h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                            </div>
                            <div class="modal-body">
                                <!-- Section choix (uniquement pour "à rediriger") -->
                                <div id="redirectChoiceSection" style="display:none;" class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="redirectChoice" id="redirectChoiceAuthor" value="author" checked>
                                        <label class="form-check-label" for="redirectChoiceAuthor">
                                            {% translate "Demander une redirection à l'auteur de l'observation" %}
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="redirectChoice" id="redirectChoiceSymptom" value="symptom">
                                        <label class="form-check-label" for="redirectChoiceSymptom">
                                            {% translate "Choisir un nouveau symptôme" %}
                                        </label>
                                    </div>
                                </div>
                                <!-- Section autocomplete symptôme (uniquement si choix "nouveau symptôme") -->
                                <div id="redirectSymptomSection" style="display:none;" class="mb-2">
                                    <label for="redirectSymptomSearch" class="form-label small">{% translate "Symptôme" %} <span class="text-danger">*</span></label>
                                    <div class="position-relative">
                                        <span class="position-absolute top-50 translate-middle-y ms-2" style="left:0;pointer-events:none;color:#6c757d;"><i class="bi bi-search"></i></span>
                                        <input type="text" id="redirectSymptomSearch" class="form-control"
                                               style="padding-left:2rem;"
                                               placeholder="{% translate 'Saisir le nom du symptôme...' %}" autocomplete="off">
                                    </div>
                                    <div id="redirectSymptomDisplay" class="mt-1 p-2 rounded bg-light small" style="display:none;"></div>
                                </div>
                                <!-- Section commentaire (par défaut pour tous les statuts) -->
                                <div id="redirectCommentSection" class="mb-2">
                                    <label for="actionStatusComment" class="form-label small text-muted">{% translate "Commentaire" %} <span class="text-muted fst-italic">({% translate "optionnel" %})</span></label>
                                    <textarea id="actionStatusComment" name="comment" class="form-control" rows="3" placeholder="{% translate 'Ajoutez un commentaire...' %}"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">
                                    {% translate "Annuler" %}
                                </button>
                                <button type="submit" id="actionStatusSubmitBtn" class="btn btn-sm"></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Right column - Map + Messages -->
        <div class="col-md-6">
            <!-- Card Actions -->
            <div class="card shadow-sm mb-3">
                <div class="card-header py-2 d-flex align-items-center gap-2">
                    <i class="bi bi-lightning-charge-fill text-warning"></i>
                    <strong>{% translate "Actions" %}</strong>
                </div>
                <div class="card-body p-3 d-flex flex-column gap-3">

                    {% if observation.intervention and observation.intervention.status == 'canceled' %}
                    <div class="alert alert-warning d-flex align-items-center gap-2 mb-0" role="alert">
                        <i class="bi bi-exclamation-triangle-fill text-warning fs-5 flex-shrink-0"></i>
                        <div>
                            <strong>{% translate "Attention :" %}</strong>
                            {% translate "Une intervention liée à cette observation a été annulée" %}
                            {% if observation.intervention.cancellation_type %}
                                ({{ observation.intervention.get_cancellation_type_display }})
                            {% endif %}
                            :
                            {% if can_view_intervention_detail %}
                                <a href="{% url 'interventions:intervention_detail' observation.intervention.id %}" class="alert-link">
                                    {{ observation.intervention.code }}
                                </a>
                            {% else %}
                                <strong>{{ observation.intervention.code }}</strong>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}

                    {% if can_take_action and observation.status == 'to_process' %}
                    <!-- Deux colonnes : Intervention/Projet | Statut -->
                    <div class="d-flex flex-wrap gap-3 align-items-start">
                        <!-- Colonne 1 : Actions intervention (primary) -->
                        <div class="d-flex flex-column gap-1">
                            {% if observation.observation_type == 'inventory' or observation.observation_type == 'remark' %}
                            <button type="button" class="btn btn-outline-primary btn-sm text-nowrap" style="width:230px"
                                    data-bs-toggle="modal" data-bs-target="#modalChoixTypeIntervention">
                                <i class="bi bi-tools"></i> {% translate "Créer une intervention" %}
                            </button>
                            {% else %}
                            <form method="post" action="{% url 'observations:create_intervention_from_observation' observation.id %}">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-outline-primary btn-sm text-nowrap" style="width:230px">
                                    <i class="bi bi-tools"></i> {% translate "Créer une intervention" %}
                                </button>
                            </form>
                            {% endif %}
                            {% if not observation.intervention %}
                            <button type="button" class="btn btn-outline-primary btn-sm text-nowrap" style="width:230px"
                                    data-bs-toggle="modal" data-bs-target="#modalLierIntervention">
                                <i class="bi bi-link-45deg"></i> {% translate "Lier à une intervention" %}
                            </button>
                            {% endif %}
                            {% if not observation.project %}
                            <button type="button" class="btn btn-outline-primary btn-sm text-nowrap" style="width:230px"
                                    data-bs-toggle="modal" data-bs-target="#modalLierProjet">
                                <i class="bi bi-diagram-3"></i> {% translate "Lier à un projet" %}
                            </button>
                            {% endif %}
                        </div>
                        <!-- Colonne 2 : Actions statut -->
                        <div class="d-flex flex-column gap-1">
                            <button type="button" class="btn btn-outline-success btn-sm text-nowrap" style="width:230px"
                                    data-bs-toggle="modal" data-bs-target="#actionStatusModal"
                                    data-status="processed"
                                    data-label="{% translate 'Marquer comme traitée' %}"
                                    data-icon="bi-check2-circle" data-btn-class="btn-success">
                                <i class="bi bi-check2-circle"></i> {% translate "Marquer comme traitée" %}
                            </button>
                            <button type="button" class="btn btn-outline-warning btn-sm text-nowrap" style="width:230px"
                                    data-bs-toggle="modal" data-bs-target="#actionStatusModal"
                                    data-status="needs_info"
                                    data-label="{% translate 'Demander un complément' %}"
                                    data-icon="bi-question-circle" data-btn-class="btn-warning">
                                <i class="bi bi-question-circle"></i> {% translate "Demander un complément" %}
                            </button>
                            <button type="button" class="btn btn-outline-info btn-sm text-nowrap" style="width:230px"
                                    data-bs-toggle="modal" data-bs-target="#actionStatusModal"
                                    data-status="duplicate"
                                    data-label="{% translate 'Doublon' %}"
                                    data-icon="bi-files" data-btn-class="btn-info">
                                <i class="bi bi-files"></i> {% translate "Doublon" %}
                            </button>
                            <button type="button" class="btn btn-outline-warning btn-sm text-nowrap" style="width:230px"
                                    data-bs-toggle="modal" data-bs-target="#actionStatusModal"
                                    data-status="to_redirect"
                                    data-label="{% translate 'À rediriger' %}"
                                    data-icon="bi-reply-all" data-btn-class="btn-warning">
                                <i class="bi bi-reply-all"></i> {% translate "À rediriger" %}
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm text-nowrap" style="width:230px"
                                    data-bs-toggle="modal" data-bs-target="#actionStatusModal"
                                    data-status="not_relevant"
                                    data-label="{% translate 'Non relevant' %}"
                                    data-icon="bi-slash-circle" data-btn-class="btn-secondary">
                                <i class="bi bi-slash-circle"></i> {% translate "Non relevant" %}
                            </button>
                        </div>
                    </div>
                    {% endif %}

                    <!-- Renvoyer / Compléments fournis (needs_info → to_process) -->
                    {% if is_creator or can_take_action %}
                    {% if observation.status == 'needs_info' %}
                    <div class="d-flex flex-wrap gap-2">
                        <form method="post" action="{% url 'observations:observation_change_status' observation.id %}" class="d-inline">
                            {% csrf_token %}
                            <input type="hidden" name="new_status" value="to_process">
                            <button type="submit" class="btn btn-success btn-sm text-nowrap" style="width:230px">
                                <i class="bi bi-send-check"></i> {% translate "Compléments fournis" %}
                            </button>
                        </form>
                        {% if can_take_action %}
                        <button type="button" class="btn btn-outline-secondary btn-sm text-nowrap" style="width:230px"
                                data-bs-toggle="modal" data-bs-target="#actionStatusModal"
                                data-status="not_relevant"
                                data-label="{% translate 'Non relevant / Sans suite' %}"
                                data-icon="bi-slash-circle" data-btn-class="btn-secondary">
                            <i class="bi bi-slash-circle"></i> {% translate "Classer sans suite" %}
                        </button>
                        {% endif %}
                    </div>
                    {% endif %}
                    {% endif %}

                    <!-- Envoyer (in_preparation → to_process) -->
                    {% if is_creator or 'admin' in user_roles %}
                    {% if observation.status == 'in_preparation' or not observation.status %}
                    <div>
                        <form method="post" action="{% url 'observations:observation_change_status' observation.id %}" class="d-inline">
                            {% csrf_token %}
                            <input type="hidden" name="new_status" value="to_process">
                            <button type="submit" class="btn btn-outline-primary btn-sm text-nowrap" style="width:230px">
                                <i class="bi bi-send"></i> {% translate "Envoyer" %}
                            </button>
                        </form>
                    </div>
                    {% endif %}
                    {% endif %}

                    <!-- Archiver -->
                    {% if 'admin' in user_roles %}
                    {% if observation.status == 'processed' or observation.status == 'not_relevant' or observation.status == 'to_redirect' or observation.status == 'duplicate' or observation.status == 'needs_info' %}
                    <div>
                        <form method="post" action="{% url 'observations:observation_change_status' observation.id %}" class="d-inline">
                            {% csrf_token %}
                            <input type="hidden" name="new_status" value="archived">
                            <button type="submit" class="btn btn-outline-secondary btn-sm text-nowrap" style="width:230px">
                                <i class="bi bi-archive"></i> {% translate "Archiver" %}
                            </button>
                        </form>
                    </div>
                    {% endif %}
                    {% endif %}

                    

                </div>
            </div>
            
            <div id="map" style="width: 100%; height: 400px;" class="mb-1"></div>
            {% if observation.thematic and observation.category and observation.latitude and observation.longitude %}
            <div class="d-flex align-items-center gap-2 mb-3 flex-wrap" id="nearby-obs-bar">
                <button type="button" id="toggle-nearby-obs" class="btn btn-sm btn-secondary"
                        title="{% translate 'Afficher/masquer les observations similaires à proximité' %}">
                    <i class="bi bi-layers-fill"></i> {% translate "Observations similaires" %}
                </button>
                <span class="small text-muted" id="nearby-obs-count"></span>
                <button type="button" id="toggle-nearby-interventions" class="btn btn-sm btn-secondary"
                        title="{% translate 'Afficher/masquer les interventions récentes de la même catégorie' %}">
                    <i class="bi bi-tools"></i> {% translate "Interventions récentes" %}
                </button>
                <span class="small text-muted" id="nearby-interv-count"></span>
            </div>
            {% endif %}

<!-- Modal lightbox carrousel -->
<div class="modal fade" id="photoLightboxModal" tabindex="-1" aria-labelledby="photoLightboxLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-dark border-0">
            <div class="modal-header border-0 pb-1 px-3 d-flex justify-content-between align-items-center">
                <span id="photoLightboxCounter" class="text-white-50 small"></span>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body text-center p-0 position-relative" style="min-height: 200px;">
                <button type="button" id="photoPrevBtn"
                        class="btn btn-dark opacity-75 position-absolute start-0 top-50 translate-middle-y ms-2"
                        style="z-index:10; border-radius:50%; width:40px; height:40px; padding:0;"
                        onclick="lightboxNav(-1)">
                    <i class="bi bi-chevron-left"></i>
                </button>
                <img id="photoLightboxImage" src="" alt=""
                     class="img-fluid rounded px-5"
                     style="max-height: 80vh; object-fit: contain;">
                <button type="button" id="photoNextBtn"
                        class="btn btn-dark opacity-75 position-absolute end-0 top-50 translate-middle-y me-2"
                        style="z-index:10; border-radius:50%; width:40px; height:40px; padding:0;"
                        onclick="lightboxNav(1)">
                    <i class="bi bi-chevron-right"></i>
                </button>
            </div>
            <div class="modal-footer border-0 pt-1 justify-content-center">
                <a id="photoLightboxLink" href="#" target="_blank" class="btn btn-sm btn-outline-light">
                    <i class="bi bi-box-arrow-up-right me-1"></i>{% translate "Ouvrir en plein écran" %}
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Modale résumé intervention -->
{% if observation.intervention and can_view_intervention_summary_modal %}
<div class="modal fade" id="interventionSummaryModal" tabindex="-1" aria-labelledby="interventionSummaryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="interventionSummaryModalLabel" data-base-title="{% translate 'Résumé intervention' %}">{% translate 'Résumé intervention' %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body" id="interventionSummaryModalBody"></div>
        </div>
    </div>
</div>
{% endif %}

{% if geom_geojson %}
{{ geom_geojson|json_script:"geom-data" }}
{% endif %}

<!-- Modal choix type intervention (correctif / amélioratif) — affiché pour les observations de type inventaire ou remarque -->
<div class="modal fade" id="modalChoixTypeIntervention" tabindex="-1" aria-labelledby="modalChoixTypeInterventionLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalChoixTypeInterventionLabel">
                    <i class="bi bi-tools"></i> {% translate "Type d'intervention" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-4">{% translate "Quel type d'intervention souhaitez-vous créer à partir de cette observation ?" %}</p>
                <div class="d-flex gap-3 justify-content-center align-items-stretch">
                    <form method="post" action="{% url 'observations:create_intervention_from_observation' observation.id %}">
                        {% csrf_token %}
                        <input type="hidden" name="maintain_type" value="corrective">
                        <button type="submit" class="btn btn-outline-danger btn-lg px-3 d-flex flex-column align-items-center justify-content-center h-100" style="width:160px;">
                            <i class="bi bi-wrench-adjustable fs-2 mb-2"></i>
                            <strong>{% translate "Correctif" %}</strong>
                            <div class="small text-muted mt-1" style="white-space:normal;word-wrap:break-word;text-align:center;">{% translate "Remédier à un dysfonctionnement" %}</div>
                        </button>
                    </form>
                    <form method="post" action="{% url 'observations:create_intervention_from_observation' observation.id %}">
                        {% csrf_token %}
                        <input type="hidden" name="maintain_type" value="ameliorative">
                        <button type="submit" class="btn btn-outline-success btn-lg px-3 d-flex flex-column align-items-center justify-content-center h-100" style="width:160px;">
                            <i class="bi bi-graph-up-arrow fs-2 mb-2"></i>
                            <strong>{% translate "Amélioratif" %}</strong>
                            <div class="small text-muted mt-1" style="white-space:normal;word-wrap:break-word;text-align:center;">{% translate "Améliorer l'existant" %}</div>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal : Lier à une intervention existante -->
<div class="modal fade" id="modalLierIntervention" tabindex="-1" aria-labelledby="modalLierInterventionLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLierInterventionLabel">
                    <i class="bi bi-link-45deg"></i> {% translate "Lier à une intervention" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <form method="post" action="{% url 'observations:link_observation_to_intervention' observation.id %}">
                {% csrf_token %}
                <div class="modal-body">
                    <p class="text-muted mb-3">{% translate "Recherchez une intervention par code ou titre." %}</p>
                    <input type="text" class="form-control mb-2" id="searchInterventionInput"
                           placeholder="{% translate 'Code ou titre…' %}" autocomplete="off">
                    <div id="searchInterventionResults" class="list-group mb-2" style="max-height:240px;overflow-y:auto;"></div>
                    <input type="hidden" name="intervention_id" id="selectedInterventionId">
                    <div id="selectedInterventionDisplay" class="d-none alert alert-info py-2 px-3 small mb-0"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-primary btn-sm" id="btnConfirmLierIntervention" disabled>
                        <i class="bi bi-link-45deg"></i> {% translate "Confirmer" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal : Lier à un projet existant -->
<div class="modal fade" id="modalLierProjet" tabindex="-1" aria-labelledby="modalLierProjetLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLierProjetLabel">
                    <i class="bi bi-diagram-3"></i> {% translate "Lier à un projet" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <form method="post" action="{% url 'observations:link_observation_to_project' observation.id %}">
                {% csrf_token %}
                <div class="modal-body">
                    <p class="text-muted mb-3">{% translate "Recherchez un projet par code ou nom." %}</p>
                    <input type="text" class="form-control mb-2" id="searchProjetInput"
                           placeholder="{% translate 'Code ou nom…' %}" autocomplete="off">
                    <div id="searchProjetResults" class="list-group mb-2" style="max-height:240px;overflow-y:auto;"></div>
                    <input type="hidden" name="project_id" id="selectedProjetId">
                    <div id="selectedProjetDisplay" class="d-none alert alert-info py-2 px-3 small mb-0"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-primary btn-sm" id="btnConfirmLierProjet" disabled>
                        <i class="bi bi-diagram-3"></i> {% translate "Confirmer" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Messages -->
<div id="discussion" class="mt-3">
    <div class="card shadow-sm">
        <div class="card-header d-flex align-items-center justify-content-between py-2">
            <h5 class="mb-0 d-flex align-items-center gap-2">
                <i class="bi bi-chat-dots text-primary"></i>
                {% translate "Messages" %}
            </h5>
            {% if discussion %}
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-secondary py-0 px-2 rounded-pill d-flex align-items-center gap-1 dropdown-toggle"
                        type="button" id="obsDiscussionFlagBtn" data-bs-toggle="dropdown" aria-expanded="false" style="font-size: 0.75rem;">
                    <span id="obs-flag-icon-display" class="d-inline-flex align-items-center">
                        {% if discussion.flag == 'red' %}
                            <i class="bi bi-flag-fill text-danger"></i>
                        {% elif discussion.flag == 'orange' %}
                            <i class="bi bi-flag-fill" style="color: #fd7e14;"></i>
                        {% elif discussion.flag == 'green' %}
                            <i class="bi bi-flag-fill text-success"></i>
                        {% else %}
                            <i class="bi bi-flag text-muted"></i>
                        {% endif %}
                    </span>
                    <span id="obs-flag-label-display">
                        {{ discussion.flag_info.label|default:_("Statut") }}
                    </span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="obsDiscussionFlagBtn" style="font-size: 0.8rem;">
                    <li><h6 class="dropdown-header small text-muted py-1">{% translate "Statut de suivi" %}</h6></li>
                    <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 obs-flag-opt" data-flag="red"><i class="bi bi-flag-fill text-danger"></i> {% translate "Important / À traiter" %}</button></li>
                    <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 obs-flag-opt" data-flag="orange"><i class="bi bi-flag-fill" style="color: #fd7e14;"></i> {% translate "En cours" %}</button></li>
                    <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 obs-flag-opt" data-flag="green"><i class="bi bi-flag-fill text-success"></i> {% translate "Traité / Fait" %}</button></li>
                    <li><hr class="dropdown-divider my-1"></li>
                    <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 obs-flag-opt text-muted" data-flag=""><i class="bi bi-flag"></i> {% translate "Aucun drapeau" %}</button></li>
                </ul>
            </div>
            {% endif %}
        </div>
        <div class="card-body p-3">

            <!-- Fil de messages -->
            {% if discussion_messages %}
            <div class="d-flex flex-column gap-3 mb-3" id="discussion-thread"
                 style="max-height:380px; overflow-y:auto; padding-right:4px;">
                {% for msg in discussion_messages %}
                {% if msg.is_system %}
                <div class="d-flex justify-content-center my-1">
                    <span class="badge bg-light text-secondary border px-2.5 py-1 rounded-pill d-inline-flex align-items-center" style="font-size: 0.75rem; font-weight: 500;">
                        {{ msg.content|safe }}
                    </span>
                </div>
                {% else %}
                <div class="d-flex {% if msg.author == request.user %}justify-content-end{% endif %}">
                    {% if msg.author != request.user %}
                    <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center me-2 flex-shrink-0"
                         style="width:34px;height:34px;font-size:0.8rem;">
                        {{ msg.author|short_name|first|upper|default:msg.author.username|first|upper }}
                    </div>
                    {% endif %}
                    <div style="max-width:75%;">
                        {% if msg.author != request.user %}
                        <div class="small text-muted mb-1">
                            <strong>{{ msg.author|short_name }}{% with comp=msg.author|user_company %}{% if comp %} ({{ comp }}){% endif %}{% endwith %}</strong>
                            · {{ msg.created_at|date:"d/m/Y H:i" }}
                        </div>
                        {% else %}
                        <div class="small text-muted mb-1 text-end">{{ msg.created_at|date:"d/m/Y H:i" }}</div>
                        {% endif %}
                        <div class="p-2 rounded
                            {% if msg.author == request.user %}{% else %}bg-light{% endif %}"
                            style="{% if msg.author == request.user %}background:#e7ebff;{% endif %}
                                   border-radius:12px; word-break:break-word; display:inline-block; text-align:left;">
                            {{ msg.content|render_mentions }}
                            {% if msg.attachments.exists %}
                            <div class="mt-2 d-flex flex-wrap gap-1">
                                {% for att in msg.attachments.all %}
                                {% if att.is_image %}
                                <a href="{{ att.file.url }}" target="_blank">
                                    <img src="{{ att.file.url }}" style="width:56px;height:56px;object-fit:cover;border-radius:6px;" alt="{{ att.name }}">
                                </a>
                                {% else %}
                                <a href="{{ att.file.url }}" target="_blank"
                                   class="btn btn-sm {% if msg.author == request.user %}btn-outline-light{% else %}btn-outline-secondary{% endif %}">
                                    <i class="bi bi-paperclip me-1"></i>{{ att.name|truncatechars:20 }}
                                </a>
                                {% endif %}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
            </div>
            {% else %}
            <p class="text-muted small text-center py-2 mb-2">
                <i class="bi bi-chat-square me-1"></i>{% translate "Aucun message." %}
            </p>
            {% endif %}

            {% if can_post_discussion_message %}
            <!-- Formulaire de réponse -->
            <form method="post"
                  action="{% url 'observations:observation_add_message' observation.id %}"
                  enctype="multipart/form-data"
                  id="msg-form">
                {% csrf_token %}
                <!-- Champ caché contenant le contenu réel avec les marqueurs @mention -->
                <input type="hidden" name="content" id="msg-content-real">
                <div class="d-flex gap-2 align-items-stretch">
                    <div class="flex-grow-1 position-relative">
                        <!-- Textarea d'affichage : montre "@Jean D." sans les marqueurs internes -->
                        <textarea id="msg-content" class="form-control form-control-sm"
                                  style="height:100%;resize:none;" placeholder="{% translate 'Écrire un message… (@ pour mentionner)' %}"></textarea>
                        <!-- Dropdown @mention -->
                        <div id="mention-dropdown"
                             class="list-group shadow"
                             style="display:none; position:absolute; bottom:100%; left:0; right:0; z-index:1050; max-height:200px; overflow-y:auto; margin-bottom:2px;">
                        </div>
                    </div>
                    <div class="d-flex flex-column gap-1">
                        <button type="submit" class="btn btn-primary btn-sm" title="{% translate 'Envoyer' %}">
                            <i class="bi bi-send"></i>
                        </button>
                        <label class="btn btn-outline-secondary btn-sm mb-0" title="{% translate 'Joindre un fichier' %}">
                            <i class="bi bi-paperclip"></i>
                            <input type="file" name="attachments" multiple class="d-none" id="msg-file-input">
                        </label>
                    </div>
                </div>
                <!-- Aperçu des fichiers joints -->
                <div id="msg-file-preview" class="d-flex flex-wrap gap-2 mt-2" style="display:none !important;"></div>
            </form>
            {% endif %}

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


{% if can_delete %}
<div class="modal fade" id="deleteObservationModal" tabindex="-1" aria-labelledby="deleteObservationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteObservationModalLabel"><i class="bi bi-trash me-2 text-danger"></i>{% translate "Supprimer l'observation" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {% blocktranslate with code=observation.code %}Voulez-vous vraiment supprimer l'observation <strong>{{ code }}</strong> ? Cette action est irréversible.{% endblocktranslate %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                <form method="post" action="{% url 'observations:observation_delete' observation.id %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger"><i class="bi bi-trash me-1"></i>{% translate "Supprimer" %}</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock content %}

{% block script %}
<script src="{% static 'common/layer-switcher-control.js' %}"></script>
<script src="{% static 'interventions/status_colors.js' %}"></script>

<script>
// ---- Carrousel lightbox photos ----
const _obsPhotoUrls = [
    {% for photo in photos %}
    {% private_file_url photo 'photo' as photo_url %}
    "{{ photo_url|safe }}"{% if not forloop.last %},{% endif %}
    {% endfor %}
];
let _currentPhotoIdx = 0;

function _lightboxShow(index) {
    if (!_obsPhotoUrls.length) return;
    _currentPhotoIdx = ((index % _obsPhotoUrls.length) + _obsPhotoUrls.length) % _obsPhotoUrls.length;
    const url = _obsPhotoUrls[_currentPhotoIdx];
    document.getElementById('photoLightboxImage').src = url;
    document.getElementById('photoLightboxLink').href = url;
    document.getElementById('photoLightboxCounter').textContent =
        (_currentPhotoIdx + 1) + ' / ' + _obsPhotoUrls.length;
    const showNav = _obsPhotoUrls.length > 1;
    document.getElementById('photoPrevBtn').style.display = showNav ? '' : 'none';
    document.getElementById('photoNextBtn').style.display = showNav ? '' : 'none';
}

function openPhotoLightbox(index) { _lightboxShow(index); }
function lightboxNav(dir) { _lightboxShow(_currentPhotoIdx + dir); }

document.getElementById('photoLightboxModal').addEventListener('keydown', function(e) {
    if (e.key === 'ArrowLeft')  lightboxNav(-1);
    if (e.key === 'ArrowRight') lightboxNav(1);
});
// ---- fin carrousel ----

document.addEventListener('DOMContentLoaded', function() {
    // Gestion de la modale de changement de statut
    const actionStatusModal = document.getElementById('actionStatusModal');
    if (actionStatusModal) {
        // Autocomplete symptôme pour la redirection
        const DETAIL_SYMPTOM_DATA = JSON.parse(document.getElementById('detail-symptoms-list').textContent);
        const _normalizeStr = s => (s || "").normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();

        $("#redirectSymptomSearch").autocomplete({
            source: function(request, response) {
                const term = _normalizeStr(request.term);
                const items = DETAIL_SYMPTOM_DATA.filter(o => _normalizeStr(o.value).includes(term));
                response(items.slice(0, 20));
            },
            minLength: 0,
            delay: 100,
            focus: function(event, ui) {
                $("#redirectSymptomSearch").val(ui.item.value);
                return false;
            },
            select: function(event, ui) {
                event.preventDefault();
                $("#redirectSymptomSearch").val(ui.item.value);
                document.getElementById('actionStatusSymptomId').value = ui.item.id;
                const display = document.getElementById('redirectSymptomDisplay');
                display.textContent = ui.item.label;
                display.style.display = '';
            }
        });

        function _updateRedirectSections() {
            const isSymptom = document.getElementById('redirectChoiceSymptom') &&
                              document.getElementById('redirectChoiceSymptom').checked;
            document.getElementById('redirectSymptomSection').style.display = isSymptom ? '' : 'none';
            document.getElementById('redirectCommentSection').style.display = isSymptom ? 'none' : '';
        }

        document.querySelectorAll('input[name="redirectChoice"]').forEach(function(radio) {
            radio.addEventListener('change', _updateRedirectSections);
        });

        // Validation avant soumission : si choix symptôme, vérifier qu'un symptôme est sélectionné
        document.getElementById('actionStatusForm').addEventListener('submit', function(e) {
            const status = document.getElementById('actionStatusValue').value;
            if (status === 'to_redirect') {
                const isSymptom = document.getElementById('redirectChoiceSymptom').checked;
                if (isSymptom && !document.getElementById('actionStatusSymptomId').value) {
                    e.preventDefault();
                    document.getElementById('redirectSymptomSearch').classList.add('is-invalid');
                    document.getElementById('redirectSymptomSearch').focus();
                    return;
                }
                // Si choix auteur, ne pas envoyer de symptom_id
                if (!isSymptom) {
                    document.getElementById('actionStatusSymptomId').value = '';
                }
            } else if (status === 'needs_info') {
                const comment = document.getElementById('actionStatusComment').value.trim();
                if (!comment) {
                    e.preventDefault();
                    document.getElementById('actionStatusComment').classList.add('is-invalid');
                    document.getElementById('actionStatusComment').focus();
                    return;
                }
            }
        });

        actionStatusModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const status = button.getAttribute('data-status');
            const label = button.getAttribute('data-label');
            const icon = button.getAttribute('data-icon');
            const btnClass = button.getAttribute('data-btn-class') || 'btn-primary';
            document.getElementById('actionStatusValue').value = status;
            document.getElementById('actionStatusModalLabel').textContent = label;
            const submitBtn = document.getElementById('actionStatusSubmitBtn');
            submitBtn.className = 'btn btn-sm ' + btnClass;
            submitBtn.innerHTML = '<i class="bi ' + icon + '"></i> {% translate "Confirmer" %}';
            // Réinitialiser les champs
            document.getElementById('actionStatusComment').value = '';
            document.getElementById('actionStatusSymptomId').value = '';
            document.getElementById('redirectSymptomSearch').value = '';
            document.getElementById('redirectSymptomDisplay').style.display = 'none';
            document.getElementById('redirectSymptomDisplay').textContent = '';
            document.getElementById('redirectSymptomSearch').classList.remove('is-invalid');
            document.getElementById('actionStatusComment').classList.remove('is-invalid');

            // Adapter le label du commentaire si needs_info
            const isNeedsInfo = status === 'needs_info';
            const commentLabel = document.querySelector('label[for="actionStatusComment"]');
            if (commentLabel) {
                if (isNeedsInfo) {
                    commentLabel.innerHTML = '{% translate "Précisez les informations demandées" %} <span class="text-danger">*</span>';
                } else {
                    commentLabel.innerHTML = '{% translate "Commentaire" %} <span class="text-muted fst-italic">({% translate "optionnel" %})</span>';
                }
            }
            document.getElementById('actionStatusComment').placeholder = isNeedsInfo ?
                '{% translate "Indiquez ici les détails ou photos attendus..." %}' :
                '{% translate "Ajoutez un commentaire..." %}';

            // Afficher/masquer la section choix selon le statut
            const isToRedirect = status === 'to_redirect';
            document.getElementById('redirectChoiceSection').style.display = isToRedirect ? '' : 'none';
            // Réinitialiser sur "auteur" par défaut
            document.getElementById('redirectChoiceAuthor').checked = true;
            // Mettre à jour les sous-sections
            document.getElementById('redirectSymptomSection').style.display = 'none';
            document.getElementById('redirectCommentSection').style.display = '';
        });
    }
    
    // Carte
    const mapEl = document.getElementById('map');
    const geomDataEl = document.getElementById('geom-data');
    
    if (!geomDataEl) {
        mapEl.innerHTML = '<div class="alert alert-info m-3">{% translate "Aucune localisation disponible" %}</div>';
        return;
    }

    const geojson = JSON.parse(geomDataEl.textContent);

    // Initialize map with MapLibre
    const map = new maplibregl.Map({
        container: 'map',
        style: window.MAP_STYLE_STANDARD,
        center: [4.3517, 50.8503], // Brussels
        zoom: 12
    });

    map.on('load', function() {
        // --- Couche des voiries régionales ---
        map.addSource('regional_roads', {
            type: 'geojson',
            data: '{% url "common:get_regional_roads_geojson" %}'
        });
        map.addLayer({
            'id': 'regional_roads',
            type: 'line',
            source: 'regional_roads',
            paint: {
                'line-color': '#FF5733',
                'line-width': 1.5,
                'line-opacity': 0.8
            }
        });

        map.addSource('observation', {
            type: 'geojson',
            data: geojson
        });

        // Add marker for point or polygon for area
        const feature = geojson.features[0];
        if (feature.geometry.type === 'Point') {
            // Add a marker at the observation location
            const marker = new maplibregl.Marker({ color: '#007cbf' })
                .setLngLat(feature.geometry.coordinates)
                .addTo(map);

            // Add popup
            const popup = new maplibregl.Popup({ offset: 25 })
                .setHTML(`<strong>${feature.properties.description || 'Observation'}</strong><br>${feature.properties.address || ''}`);
            marker.setPopup(popup);
            
            // Center on point
            map.flyTo({ center: feature.geometry.coordinates, zoom: 16 });
        } else {
            map.addLayer({
                id: 'observation-fill',
                type: 'fill',
                source: 'observation',
                paint: {
                    'fill-color': '#007cbf',
                    'fill-opacity': 0.3
                }
            });

            map.addLayer({
                id: 'observation-outline',
                type: 'line',
                source: 'observation',
                paint: {
                    'line-color': '#007cbf',
                    'line-width': 2
                }
            });

            // Fit to bounds
            const bounds = new maplibregl.LngLatBounds();
            feature.geometry.coordinates[0].forEach(coord => bounds.extend(coord));
            map.fitBounds(bounds, { padding: 50 });
        }

        {% if observation.thematic and observation.category and observation.latitude and observation.longitude %}
        // --- Observations similaires à proximité ---
        const _nearbyStatusColors = {
            'in_preparation': '#6c757d',
            'to_process':     '#dc3545',
            'needs_info':     '#fd7e14',
            'in_progress':    '#ffc107',
            'processed':      '#28a745',
            'not_relevant':   '#6c757d',
            'to_redirect':    '#fd7e14',
            'duplicate':      '#0dcaf0',
            'closed':         '#343a40',
            'archived':       '#212529',
        };

        const _nearbyThematicId    = '{{ observation.thematic.id }}';
        const _nearbyCategoryId    = '{{ observation.category.id }}';
        const _nearbyExcludeId     = '{{ observation.id }}';
        const _nearbyObsType       = '{{ observation.observation_type }}';

        map.addSource('nearby-observations', {
            type: 'geojson',
            data: { type: 'FeatureCollection', features: [] }
        });

        map.addLayer({
            id: 'nearby-observations-circle',
            type: 'circle',
            source: 'nearby-observations',
            paint: {
                'circle-radius': [
                    'interpolate', ['linear'], ['zoom'],
                    10, 5, 15, 9, 20, 13
                ],
                'circle-color': [
                    'match', ['get', 'status'],
                    'in_preparation', '#6c757d',
                    'to_process',     '#dc3545',
                    'needs_info',     '#fd7e14',
                    'in_progress',    '#ffc107',
                    'processed',      '#28a745',
                    'not_relevant',   '#6c757d',
                    'to_redirect',    '#fd7e14',
                    'duplicate',      '#0dcaf0',
                    'closed',         '#343a40',
                    'archived',       '#212529',
                    '#999999'
                ],
                'circle-stroke-width': 2,
                'circle-stroke-color': '#ffffff',
                'circle-opacity': 0.75,
            }
        });

        map.on('mouseenter', 'nearby-observations-circle', () => { map.getCanvas().style.cursor = 'pointer'; });
        map.on('mouseleave', 'nearby-observations-circle', () => { map.getCanvas().style.cursor = ''; });

        map.on('click', 'nearby-observations-circle', function(e) {
            const props = e.features[0].properties;
            const statusColor = _nearbyStatusColors[props.status] || '#6c757d';
            const descBlock = props.description
                ? `<div class="obs-popup-desc">${props.description}</div>` : '';
            const detailUrl = `/observations/${props.id}/`;
            new maplibregl.Popup({ offset: 12 })
                .setLngLat(e.features[0].geometry.coordinates)
                .setHTML(`
                    <div class="obs-popup-header" style="background:${statusColor};">
                        ${props.status_label}
                    </div>
                    <div class="obs-popup-body">
                        <div class="obs-popup-type">
                            <i class="bi bi-tag-fill" style="opacity:.6;"></i>
                            ${props.observation_type}
                        </div>
                        ${descBlock}
                        <a href="${detailUrl}" class="obs-popup-btn">
                            <i class="bi bi-arrow-right-circle"></i> {% translate "Voir le détail" %}
                        </a>
                    </div>
                `)
                .addTo(map);
        });

        function loadNearbyObservations() {
            const bounds = map.getBounds();
            const buffer = 0.005;
            const params = new URLSearchParams({
                thematic:         _nearbyThematicId,
                category:         _nearbyCategoryId,
                exclude_id:       _nearbyExcludeId,
                observation_type: _nearbyObsType,
                west:  bounds.getWest() - buffer,
                south: bounds.getSouth() - buffer,
                east:  bounds.getEast() + buffer,
                north: bounds.getNorth() + buffer,
            });
            fetch('{% url "observations:observations_nearby_geojson" %}?' + params.toString())
                .then(r => r.json())
                .then(data => {
                    if (map.getSource('nearby-observations')) {
                        map.getSource('nearby-observations').setData(data);
                        const count = (data.features || []).length;
                        const countEl = document.getElementById('nearby-obs-count');
                        if (countEl) {
                            countEl.textContent = count > 0
                                ? `${count} {% translate "observations à proximité" %}`
                                : '{% translate "Aucune observation similaire à proximité" %}';
                        }
                    }
                })
                .catch(() => {});
        }

        loadNearbyObservations();

        let _nearbyMoveTimer;
        map.on('moveend', function() {
            clearTimeout(_nearbyMoveTimer);
            _nearbyMoveTimer = setTimeout(loadNearbyObservations, 300);
        });

        document.getElementById('toggle-nearby-obs')?.addEventListener('click', function() {
            const vis = map.getLayoutProperty('nearby-observations-circle', 'visibility') !== 'none';
            map.setLayoutProperty('nearby-observations-circle', 'visibility', vis ? 'none' : 'visible');
            this.classList.toggle('btn-secondary',         !vis);
            this.classList.toggle('btn-outline-secondary',  vis);
        });
        // --- Fin observations similaires ---
        {% endif %}

        {% if observation.category and observation.latitude and observation.longitude %}
        // --- Interventions récentes (même catégorie, 3 derniers mois) ---
        const _intervCategoryId = '{{ observation.category.id }}';

        // Créer une icône triangle SDF pour colorisation dynamique
        (function() {
            const sz = 36;
            const pad = 5;
            // Image de remplissage
            const canvas = document.createElement('canvas');
            canvas.width = sz; canvas.height = sz;
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, sz, sz);
            ctx.fillStyle = '#000000';
            ctx.beginPath();
            ctx.moveTo(sz / 2, pad);
            ctx.lineTo(sz - pad, sz - pad);
            ctx.lineTo(pad, sz - pad);
            ctx.closePath();
            ctx.fill();
            map.addImage('triangle-sdf', { width: sz, height: sz, data: ctx.getImageData(0, 0, sz, sz).data }, { sdf: true });
            // Image de bord (contour strokeé, épaisseur uniforme)
            const bc = document.createElement('canvas');
            bc.width = sz; bc.height = sz;
            const bctx = bc.getContext('2d');
            bctx.clearRect(0, 0, sz, sz);
            bctx.strokeStyle = '#000000';
            bctx.lineWidth = 6;
            bctx.lineJoin = 'round';
            bctx.beginPath();
            bctx.moveTo(sz / 2, pad);
            bctx.lineTo(sz - pad, sz - pad);
            bctx.lineTo(pad, sz - pad);
            bctx.closePath();
            bctx.stroke();
            map.addImage('triangle-sdf-border', { width: sz, height: sz, data: bctx.getImageData(0, 0, sz, sz).data }, { sdf: true });
        })();

        map.addSource('nearby-interventions', {
            type: 'geojson',
            data: { type: 'FeatureCollection', features: [] }
        });

        map.addLayer({
            id: 'nearby-interventions-border',
            type: 'symbol',
            source: 'nearby-interventions',
            layout: {
                'icon-image': 'triangle-sdf-border',
                'icon-size': ['interpolate', ['linear'], ['zoom'], 10, 0.35, 14, 0.65, 18, 1.0],
                'icon-allow-overlap': true,
                'icon-ignore-placement': true,
            },
            paint: {
                'icon-color': '#ffffff',
            }
        });

        map.addLayer({
            id: 'nearby-interventions-symbol',
            type: 'symbol',
            source: 'nearby-interventions',
            layout: {
                'icon-image': 'triangle-sdf',
                'icon-size': ['interpolate', ['linear'], ['zoom'], 10, 0.35, 14, 0.65, 18, 1.0],
                'icon-allow-overlap': true,
                'icon-ignore-placement': true,
            },
            paint: {
                'icon-color': INTERVENTION_STATUS_COLOR_EXPR,
            }
        });

        map.on('mouseenter', 'nearby-interventions-symbol', () => { map.getCanvas().style.cursor = 'pointer'; });
        map.on('mouseleave', 'nearby-interventions-symbol', () => { map.getCanvas().style.cursor = ''; });

        map.on('click', 'nearby-interventions-symbol', function(e) {
            const lngLat = e.features[0].geometry.coordinates.slice();
            const cards = e.features.map(function(f) {
                const p = f.properties;
                const color = p.status_color || '#6c757d';
                const titleBlock = p.title
                    ? `<div class="interv-popup-title">${p.title}</div>` : '';
                return `
                    <div style="margin-bottom:6px;border:1px solid #dee2e6;border-radius:6px;overflow:hidden;">
                        <div class="interv-popup-header" style="background:${color};">
                            ${p.status_label}
                        </div>
                        <div class="interv-popup-body">
                            <div class="interv-popup-code">
                                <i class="bi bi-tools" style="opacity:.7;"></i> ${p.code}
                            </div>
                            ${titleBlock}
                            <a href="/interventions/${p.id}/" class="interv-popup-btn" target="_blank">
                                <i class="bi bi-arrow-right-circle"></i> {% translate "Voir l'intervention" %}
                            </a>
                        </div>
                    </div>`;
            }).join('');
            new maplibregl.Popup({ offset: 14, maxWidth: '260px' })
                .setLngLat(lngLat)
                .setHTML(`<div style="max-height:320px;overflow-y:auto;">${cards}</div>`)
                .addTo(map);
        });

        function loadNearbyInterventions() {
            const bounds = map.getBounds();
            const buffer = 0.005;
            const params = new URLSearchParams({
                category: _intervCategoryId,
                west:  bounds.getWest()  - buffer,
                south: bounds.getSouth() - buffer,
                east:  bounds.getEast()  + buffer,
                north: bounds.getNorth() + buffer,
            });
            fetch('{% url "observations:observations_nearby_interventions_geojson" %}?' + params.toString())
                .then(r => r.json())
                .then(data => {
                    if (map.getSource('nearby-interventions')) {
                        map.getSource('nearby-interventions').setData(data);
                        const count = (data.features || []).length;
                        const countEl = document.getElementById('nearby-interv-count');
                        if (countEl) {
                            countEl.textContent = count > 0
                                ? `${count} {% translate "intervention(s) proche(s) dans les 3 derniers mois" %}`
                                : '{% translate "Aucune intervention récente pour cette catégorie" %}';
                        }
                    }
                })
                .catch(() => {});
        }

        loadNearbyInterventions();

        let _intervMoveTimer;
        map.on('moveend', function() {
            clearTimeout(_intervMoveTimer);
            _intervMoveTimer = setTimeout(loadNearbyInterventions, 300);
        });

        document.getElementById('toggle-nearby-interventions')?.addEventListener('click', function() {
            const vis = map.getLayoutProperty('nearby-interventions-symbol', 'visibility') !== 'none';
            const newVis = vis ? 'none' : 'visible';
            map.setLayoutProperty('nearby-interventions-symbol', 'visibility', newVis);
            map.setLayoutProperty('nearby-interventions-border',  'visibility', newVis);
            this.classList.toggle('btn-secondary',         !vis);
            this.classList.toggle('btn-outline-secondary',  vis);
        });
        // --- Fin interventions récentes ---
        {% endif %}
    });

    // Contrôle photo aérienne (LayerSwitcherControl)
    if (typeof LayerSwitcherControl !== 'undefined') {
        const layerSwitcher = new LayerSwitcherControl({
            layers: [
                {
                    id: 'ortho',
                    name: 'Orthophotos',
                    icon: 'satellite',
                    group: 'ortho',
                    layer: {
                        type: 'raster',
                        paint: { 'raster-opacity': 1 }
                    },
                    sublayers: [
                        {
                            id: 'urbis',
                            name: window.MAP_ORTHO_WMS_NAME || 'Urbis (Bruxelles)',
                            default: true,
                            source: {
                                type: 'raster',
                                tiles: [
                                    window.MAP_ORTHO_WMS_URL || 'https://geoservices-urbis.irisnet.be/geoserver/urbisgrid/wms?service=WMS&version=1.3.0&request=GetMap&layers=Ortho&styles=&format=image/png&transparent=true&width=256&height=256&crs=EPSG:3857&bbox={bbox-epsg-3857}'
                                ],
                                tileSize: 256,
                                attribution: window.MAP_ORTHO_WMS_ATTRIBUTION || '© Brussels UrbIS'
                            }
                        },
                        {
                            id: 'vlaanderen',
                            name: 'Vlaanderen 2023',
                            source: {
                                type: 'raster',
                                tiles: [
                                    'https://geo.api.vlaanderen.be/OMW/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=omwrgb23vl&STYLE=&FORMAT=image/png&TILEMATRIXSET=GoogleMapsVL&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
                                ],
                                tileSize: 256,
                                attribution: '© Digitaal Vlaanderen - Orthofoto 2023'
                            }
                        }
                    ]
                }
            ]
        });
        map.addControl(layerSwitcher, 'top-left');
    }

    // Gestion de la modale de résumé d'intervention
    const summaryModal = document.getElementById('interventionSummaryModal');
    if (summaryModal) {
        const summaryModalBody = document.getElementById('interventionSummaryModalBody');
        const summaryModalLabel = document.getElementById('interventionSummaryModalLabel');

        summaryModal.addEventListener('show.bs.modal', function(event) {
            const trigger = event.relatedTarget;
            const summaryUrl = trigger?.getAttribute('data-summary-url');
            const summaryTitle = trigger?.getAttribute('data-summary-title');

            if (summaryModalLabel && summaryTitle) {
                summaryModalLabel.textContent = `${summaryModalLabel.dataset.baseTitle || summaryModalLabel.textContent} ${summaryTitle}`.trim();
            }

            summaryModalBody.innerHTML = `
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{% translate "Chargement..." %}</span>
                    </div>
                </div>
            `;

            if (!summaryUrl) {
                summaryModalBody.innerHTML = '<div class="alert alert-danger">{% translate "URL de résumé manquante" %}</div>';
                return;
            }

            fetch(summaryUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.text();
                })
                .then(html => {
                    summaryModalBody.innerHTML = html;
                })
                .catch(error => {
                    console.error('Error loading intervention summary:', error);
                    summaryModalBody.innerHTML = `<div class="alert alert-danger">{% translate "Erreur lors du chargement du résumé" %}</div>`;
                });
        });
    }

    // Auto-scroll du fil de discussion vers le bas
    const discussionThread = document.getElementById('discussion-thread');
    if (discussionThread) {
        discussionThread.scrollTop = discussionThread.scrollHeight;
    }
    // Si l'URL contient #discussion, scroll vers la section
    if (window.location.hash === '#discussion') {
        const section = document.getElementById('discussion');
        if (section) {
            setTimeout(() => section.scrollIntoView({ behavior: 'smooth', block: 'start' }), 200);
        }
    }

    // ---- Aperçu des pièces jointes avant envoi ----
    const fileInput   = document.getElementById('msg-file-input');
    const filePreview = document.getElementById('msg-file-preview');

    if (fileInput && filePreview) {
        fileInput.addEventListener('change', renderPreview);

        function renderPreview() {
            filePreview.innerHTML = '';
            const files = fileInput.files;
            if (!files || files.length === 0) {
                filePreview.style.display = 'none';
                return;
            }
            filePreview.style.display = 'flex';

            Array.from(files).forEach((file, idx) => {
                const isImage = file.type.startsWith('image/');
                const wrapper = document.createElement('div');
                wrapper.className = 'position-relative';
                wrapper.style.cssText = 'display:inline-block;';

                if (isImage) {
                    const img = document.createElement('img');
                    img.style.cssText = 'width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid #dee2e6;';
                    img.alt = file.name;
                    const reader = new FileReader();
                    reader.onload = e => { img.src = e.target.result; };
                    reader.readAsDataURL(file);
                    wrapper.appendChild(img);
                } else {
                    const chip = document.createElement('div');
                    chip.className = 'd-flex align-items-center gap-1 bg-light border rounded px-2 py-1 small';
                    chip.style.cssText = 'max-width:140px;';
                    chip.innerHTML = `<i class="bi bi-paperclip text-secondary"></i>
                        <span class="text-truncate" title="${file.name}">${file.name}</span>`;
                    wrapper.appendChild(chip);
                }

                // Bouton supprimer
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'btn btn-danger btn-sm position-absolute top-0 end-0 p-0 d-flex align-items-center justify-content-center';
                btn.style.cssText = 'width:18px;height:18px;font-size:10px;border-radius:50%;transform:translate(40%,-40%);line-height:1;';
                btn.innerHTML = '&times;';
                btn.title = '{% translate "Retirer" %}';
                btn.addEventListener('click', () => removeFile(idx));
                wrapper.appendChild(btn);

                filePreview.appendChild(wrapper);
            });
        }

        function removeFile(indexToRemove) {
            const dt = new DataTransfer();
            Array.from(fileInput.files).forEach((f, i) => {
                if (i !== indexToRemove) dt.items.add(f);
            });
            fileInput.files = dt.files;
            renderPreview();
        }

        // Vider l'aperçu après soumission
        document.getElementById('msg-form').addEventListener('submit', () => {
            filePreview.innerHTML = '';
            filePreview.style.display = 'none';
        });
    }
    // ---- fin aperçu pièces jointes ----
});

// ---- @mention autocomplete ----
(function () {
    const textarea   = document.getElementById('msg-content');
    const realInput  = document.getElementById('msg-content-real');
    const dropdown   = document.getElementById('mention-dropdown');
    const form       = document.getElementById('msg-form');
    if (!textarea || !dropdown || !realInput || !form) return;

    // Map des mentions insérées : position → {marker, display}
    // On stocke le contenu "réel" (avec marqueurs) séparément du contenu affiché.
    // Stratégie : textarea affiche "@Jean D." (texte court), realInput contient
    // le texte complet avec marqueurs @[Jean D.](u:5).
    //
    // Pour rester simple et robuste, on utilise une seule source de vérité :
    // - displayVal : ce que l'utilisateur voit et tape dans le textarea
    // - realVal    : identique sauf que chaque "@shortname" inséré via le dropdown
    //               est stocké comme "@[shortname](u:id)" dans realInput.
    //
    // On maintient un tableau de "plages" correspondant aux mentions insérées,
    // avec leur position dans displayVal et leur marqueur complet.

    let mentions = []; // [{start, end, marker}]  positions dans displayVal

    let mentionStart = -1;
    let mentionQuery = null;
    let searchTimer  = null;

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

    /** Recalcule realInput depuis displayVal + tableau mentions. */
    function syncReal() {
        const dv = textarea.value;
        if (!mentions.length) {
            realInput.value = dv;
            return;
        }
        let real = '';
        let pos  = 0;
        // Trier par position de départ
        const sorted = [...mentions].sort((a, b) => a.start - b.start);
        for (const m of sorted) {
            if (m.start > pos) real += dv.slice(pos, m.start);
            real += m.marker;
            pos = m.end;
        }
        real += dv.slice(pos);
        realInput.value = real;
    }

    /** Décale toutes les mentions dont le start >= fromPos de delta. */
    function shiftMentions(fromPos, delta) {
        for (const m of mentions) {
            if (m.start >= fromPos) {
                m.start += delta;
                m.end   += delta;
            }
        }
    }

    /** Supprime les mentions qui se chevauchent avec [start, end). */
    function removeMentionsIn(start, end) {
        mentions = mentions.filter(m => m.end <= start || m.start >= end);
    }

    function showDropdown(results) {
        dropdown.innerHTML = '';
        if (!results || !results.length) { hideDropdown(); return; }
        results.forEach(r => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'list-group-item list-group-item-action d-flex align-items-center gap-2 py-2 small';
            const icon     = r.type === 'user' ? 'bi-person-fill' : 'bi-people-fill';
            const badgeCls = r.type === 'user'
                ? 'badge bg-primary-subtle text-primary-emphasis border border-primary-subtle'
                : 'badge bg-info-subtle text-info-emphasis border border-info-subtle';
            btn.innerHTML = `<span class="${badgeCls}"><i class="bi ${icon}"></i></span><span>${escHtml(r.display)}</span>`;
            btn.addEventListener('mousedown', function (e) {
                e.preventDefault();
                insertMention(r);
            });
            dropdown.appendChild(btn);
        });
        dropdown.style.display = 'block';
    }

    function hideDropdown() {
        dropdown.style.display = 'none';
        dropdown.innerHTML = '';
        mentionStart = -1;
        mentionQuery = null;
    }

    function insertMention(r) {
        const shortTag = `@[${r.display}]`;
        const marker   = r.type === 'user'
            ? `@[${r.display}](u:${r.id})`
            : `@[${r.display}](t:${r.id})`;

        const dv     = textarea.value;
        const qLen   = mentionQuery ? mentionQuery.length : 0;
        const before = dv.slice(0, mentionStart);
        const after  = dv.slice(mentionStart + 1 + qLen);

        // Mettre à jour le textarea (display)
        textarea.value = before + shortTag + ' ' + after;

        // Enregistrer la mention
        removeMentionsIn(mentionStart, mentionStart + 1 + qLen);
        shiftMentions(mentionStart + 1 + qLen, shortTag.length + 1 - (1 + qLen));
        mentions.push({ start: mentionStart, end: mentionStart + shortTag.length, marker });

        syncReal();

        const pos = mentionStart + shortTag.length + 1;
        textarea.setSelectionRange(pos, pos);
        textarea.focus();
        hideDropdown();
    }

    function searchMentions(q) {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => {
            fetch(`{% url 'notifications:api_mention_search' %}?q=${encodeURIComponent(q)}`, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(resp => resp.json())
            .then(data => showDropdown(data.results))
            .catch(() => hideDropdown());
        }, 180);
    }

    textarea.addEventListener('input', function () {
        // Synchroniser realInput (frappe libre hors mention)
        syncReal();

        const cur    = this.selectionStart;
        const before = this.value.slice(0, cur);
        const match  = before.match(/@([^\s@]*)$/);
        if (!match) { hideDropdown(); return; }
        mentionStart = match.index;
        mentionQuery = match[1];
        searchMentions(mentionQuery);
    });

    // Validation avant soumission
    form.addEventListener('submit', function (e) {
        syncReal();
        if (!realInput.value.trim()) {
            e.preventDefault();
            textarea.setCustomValidity('{% translate "Le message ne peut pas être vide." %}');
            textarea.reportValidity();
        } else {
            textarea.setCustomValidity('');
        }
    });

    // Navigation clavier dans le dropdown
    textarea.addEventListener('keydown', function (e) {
        if (dropdown.style.display === 'none') return;
        const items  = Array.from(dropdown.querySelectorAll('.list-group-item'));
        const focused = document.activeElement;
        if (e.key === 'Escape') {
            e.stopPropagation();
            hideDropdown();
        } else if (e.key === 'ArrowDown') {
            e.preventDefault();
            const idx = items.indexOf(focused);
            (idx < 0 ? items[0] : items[idx + 1] || items[0])?.focus();
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            const idx = items.indexOf(focused);
            (idx > 0 ? items[idx - 1] : textarea).focus();
        }
    });

    dropdown.addEventListener('keydown', function (e) {
        const items = Array.from(dropdown.querySelectorAll('.list-group-item'));
        const idx   = items.indexOf(document.activeElement);
        if (e.key === 'Enter' && idx >= 0) {
            e.preventDefault();
            items[idx].dispatchEvent(new MouseEvent('mousedown'));
        } else if (e.key === 'ArrowDown') {
            e.preventDefault();
            (items[idx + 1] || items[0])?.focus();
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            idx > 0 ? items[idx - 1].focus() : textarea.focus();
        } else if (e.key === 'Escape') {
            hideDropdown();
            textarea.focus();
        }
    });

    document.addEventListener('click', function (e) {
        if (!dropdown.contains(e.target) && e.target !== textarea) {
            hideDropdown();
        }
    });

    // Vider après soumission réussie
    form.addEventListener('submit', function () {
        setTimeout(() => { textarea.value = ''; realInput.value = ''; mentions = []; }, 0);
    });
})();
// ---- fin @mention autocomplete ----

// ---- Changement de drapeau de la discussion (observation) ----
{% if discussion %}
(function() {
    document.querySelectorAll('.obs-flag-opt').forEach(btn => {
        btn.addEventListener('click', function() {
            const flag = this.getAttribute('data-flag');
            const url = "{% url 'notifications:discussion_set_flag' discussion.pk %}";
            const formData = new FormData();
            formData.append('flag', flag);
            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

            fetch(url, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.ok) {
                    const headerIcon = document.getElementById('obs-flag-icon-display');
                    const headerLabel = document.getElementById('obs-flag-label-display');

                    if (headerIcon) {
                        if (data.flag === 'red') headerIcon.innerHTML = '<i class="bi bi-flag-fill text-danger"></i>';
                        else if (data.flag === 'orange') headerIcon.innerHTML = '<i class="bi bi-flag-fill" style="color: #fd7e14;"></i>';
                        else if (data.flag === 'green') headerIcon.innerHTML = '<i class="bi bi-flag-fill text-success"></i>';
                        else headerIcon.innerHTML = '<i class="bi bi-flag text-muted"></i>';
                    }
                    if (headerLabel) {
                        headerLabel.textContent = data.flag_info.label || '{% translate "Statut" %}';
                    }

                    if (data.system_message) {
                        const thread = document.getElementById('discussion-thread');
                        if (thread) {
                            const sysDiv = document.createElement('div');
                            sysDiv.className = 'd-flex justify-content-center my-1';
                            sysDiv.innerHTML = `<span class="badge bg-light text-secondary border px-2.5 py-1 rounded-pill" style="font-size: 0.75rem; font-weight: 500;">
                                ${data.system_message.content}
                            </span>`;
                            thread.appendChild(sysDiv);
                            thread.scrollTop = thread.scrollHeight;
                        }
                    }
                }
            })
            .catch(err => console.error('Error changing observation discussion flag:', err));
        });
    });
})();
{% endif %}

// ---- Live-search modals : Lier à une intervention / un projet ----
(function () {
    function makeLiveSearch({ inputId, resultsId, hiddenId, displayId, confirmBtnId, searchUrl }) {
        const input   = document.getElementById(inputId);
        const results = document.getElementById(resultsId);
        const hidden  = document.getElementById(hiddenId);
        const display = document.getElementById(displayId);
        const confirm = document.getElementById(confirmBtnId);
        if (!input) return;

        let debounceTimer;

        input.addEventListener('input', function () {
            clearTimeout(debounceTimer);
            const q = this.value.trim();
            if (q.length < 2) { results.innerHTML = ''; return; }
            debounceTimer = setTimeout(() => {
                fetch(`${searchUrl}?q=${encodeURIComponent(q)}`)
                    .then(r => r.json())
                    .then(data => {
                        results.innerHTML = '';
                        if (!data.results.length) {
                            results.innerHTML = '<span class="list-group-item text-muted small">{% translate "Aucun résultat" %}</span>';
                            return;
                        }
                        data.results.forEach(item => {
                            const btn = document.createElement('button');
                            btn.type = 'button';
                            btn.className = 'list-group-item list-group-item-action small';
                            btn.textContent = item.text;
                            btn.addEventListener('click', () => {
                                hidden.value = item.id;
                                display.textContent = item.text;
                                display.classList.remove('d-none');
                                confirm.disabled = false;
                                results.innerHTML = '';
                                input.value = item.text;
                            });
                            results.appendChild(btn);
                        });
                    })
                    .catch(() => { results.innerHTML = ''; });
            }, 300);
        });
    }

    makeLiveSearch({
        inputId:    'searchInterventionInput',
        resultsId:  'searchInterventionResults',
        hiddenId:   'selectedInterventionId',
        displayId:  'selectedInterventionDisplay',
        confirmBtnId: 'btnConfirmLierIntervention',
        searchUrl:  '{% url "observations:api_search_interventions" %}',
    });

    makeLiveSearch({
        inputId:    'searchProjetInput',
        resultsId:  'searchProjetResults',
        hiddenId:   'selectedProjetId',
        displayId:  'selectedProjetDisplay',
        confirmBtnId: 'btnConfirmLierProjet',
        searchUrl:  '{% url "observations:api_search_projects" %}',
    });

    // Reset modals on close
    ['modalLierIntervention', 'modalLierProjet'].forEach(modalId => {
        const el = document.getElementById(modalId);
        if (!el) return;
        el.addEventListener('hidden.bs.modal', function () {
            el.querySelectorAll('input[type=text]').forEach(i => i.value = '');
            el.querySelectorAll('.list-group').forEach(r => r.innerHTML = '');
            el.querySelectorAll('input[type=hidden]').forEach(i => i.value = '');
            el.querySelectorAll('.alert').forEach(d => d.classList.add('d-none'));
            el.querySelectorAll('button[type=submit]').forEach(b => b.disabled = true);
        });
    });
})();
// ---- fin live-search modals ----
</script>
<script src="{% static 'common/jquery-ui.min.js' %}"></script>
{{ detail_symptoms_autocomplete|json_script:"detail-symptoms-list" }}
{% endblock script %}