{% load document_viewer_tags i18n interventions_tags short_name tz %}
        <div id="section-notes" class="card mb-4 mt-4" data-intervention-id="{{ intervention.id }}">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0 d-flex align-items-center flex-wrap gap-2">
                    <i class="bi bi-journal-text me-1 text-primary"></i>{% translate "Notes et documents" %}
                    {% if total_items_count %}
                        <span class="badge bg-secondary" style="font-size:0.75rem;">
                            {{ total_documents_count }} {% if total_documents_count > 1 %}{% translate "docs" %}{% else %}{% translate "doc" %}{% endif %} &bull; {{ total_notes_count }} {% if total_notes_count > 1 %}{% translate "notes" %}{% else %}{% translate "note" %}{% endif %}
                        </span>
                    {% endif %}
                    {% if photos_required %}
                        <span class="badge bg-warning text-dark ms-2" style="font-size:0.75rem;">
                            <i class="bi bi-camera-fill me-1"></i>{% translate "Photos obligatoires" %}
                        </span>
                    {% endif %}
                </h4>
                <div class="d-flex align-items-center gap-1">
                    {% if can_edit_notes %}
                        <button class="btn btn-light border-0 cms-add-note-btn" title="{% translate 'Ajouter une note' %}">
                            <i class="bi bi-sticky text-primary me-1"></i><span class="d-none d-lg-inline small">{% translate "Note" %}</span>
                        </button>
                    {% endif %}
                    {% if 'documents' in allowed_update_fields %}
                        <button class="btn btn-light border-0" title="{% translate 'Ajouter des documents' %}" data-bs-toggle="modal" data-bs-target="#addDocumentModal">
                            <i class="bi bi-file-earmark-plus text-primary me-1"></i><span class="d-none d-lg-inline small">{% translate "Doc" %}</span>
                        </button>
                    {% endif %}
                </div>
            </div>
            <div class="card-body" id="notesContainer">
                <div id="notesAlertContainer" class="m-1"></div>
                <div id="documentsAlertContainer" class="m-1"></div>

                <!-- New note form (hidden by default, shown in CMS edit mode when clicking +) -->
                {% if can_edit_notes %}
                <div class="new-note-editor mb-3 p-3 border rounded" style="display: none;" data-is-new="true">
                    <div class="mb-2">
                        <label class="form-label small fw-bold">{% translate "Type de note" %}</label>
                        <select class="form-select form-select-sm new-note-type">
                            {% for value, label in add_note_type_choices %}
                                <option value="{{ value }}"{% if value == default_note_type %} selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label small fw-bold">{% translate "Contenu" %}</label>
                        <textarea class="form-control new-note-content" rows="3" placeholder="{% translate 'Saisir le contenu de la note...' %}"></textarea>
                    </div>
                </div>
                {% endif %}

                <div id="documentsContainer">
                    {% if total_items_count == 0 %}
                        <div class="text-center text-muted py-4">
                            <i class="bi bi-journal-text fs-2 d-block mb-2 text-secondary opacity-50"></i>
                            <p class="mb-0">{% translate "Aucun document ou note pour cette intervention." %}</p>
                        </div>
                    {% else %}
                        {% for block in sequenced_blocks %}
                            {% if block.has_items %}
                            <div class="document-block mb-4 p-3 rounded bg-light border">
                                <!-- En-tête du bloc -->
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        <span class="badge {{ block.badge_class }} py-1 px-2" style="font-size: 0.85rem;">
                                            <i class="bi {{ block.icon }} me-1"></i>{{ block.title }}
                                        </span>
                                        <span class="text-secondary small fw-medium">
                                            {% if block.documents_count > 0 %}{{ block.documents_count }} {% if block.documents_count > 1 %}{% translate "fichiers" %}{% else %}{% translate "fichier" %}{% endif %}{% endif %}
                                            {% if block.documents_count > 0 and block.notes_count > 0 %}&bull;{% endif %}
                                            {% if block.notes_count > 0 %}{{ block.notes_count }} {% if block.notes_count > 1 %}{% translate "notes" %}{% else %}{% translate "note" %}{% endif %}{% endif %}
                                        </span>
                                    </div>
                                    {% if block.period_display %}
                                    <span class="text-muted small">
                                        <i class="bi bi-clock me-1"></i>{{ block.period_display }}
                                    </span>
                                    {% endif %}
                                </div>

                                <!-- Documents du bloc -->
                                {% if block.documents %}
                                    <div class="mb-3">
                                        {% render_document_viewer block.documents modal_id="interventionDocViewerModal" grid_only=True allow_delete=can_delete_documents delete_always_visible=can_delete_documents allow_copy=can_copy_documents %}
                                    </div>
                                {% endif %}

                                <!-- Notes du bloc -->
                                {% if block.notes %}
                                    <div class="notes-list {% if block.documents %}border-top pt-3{% endif %}">
                                        {% for note in block.notes %}
                                            <div id="note-container-{{ note.id }}"
                                                class="note-item py-2 {% if not forloop.last %}border-bottom{% endif %} {% if note.id in editable_note_ids %}editable-note{% endif %}"
                                                data-note-id="{{ note.id }}"
                                                data-note-content="{{ note.content|urlencode }}"
                                                data-note-author-id="{{ note.note_author_id }}"
                                                data-note-author-display="{{ note.note_author|short_name|escapejs }}"
                                                data-note-type="{{ note.note_type }}"
                                                data-note-priority="{{ note.type_priority_order|default:note.type_priority_value }}"
                                                data-note-time="{{ note.note_time|date:'c' }}"
                                                data-note-type-display="{{ note.get_note_type_display }}"
                                                data-note-badge-class="{{ note.type_badge_class }}"
                                                data-note-icon-class="{{ note.type_icon_class }}">

                                                <!-- Display mode -->
                                                <div class="note-display">
                                                    <div class="d-flex justify-content-between align-items-start gap-2">
                                                        <div class="note-content flex-grow-1">
                                                            <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                                                                <span class="badge note-type-badge d-inline-flex align-items-center gap-1 {{ note.type_badge_class }}">
                                                                    <i class="bi {{ note.type_icon_class }}"></i>
                                                                    {{ note.get_note_type_display }}
                                                                </span>
                                                                <span class="note-metadata text-muted small">
                                                                    {{ note.note_time|timezone:"Europe/Paris"|date:"d-m-Y H:i" }} - {{ note.note_author|short_name }}
                                                                    {% if note.updated_at %}
                                                                        ({% translate "Mis à jour le" %} {{ note.updated_at|timezone:"Europe/Paris"|date:"d/m/Y H:i" }}
                                                                        {% translate "par " %}{{ note.updated_by|short_name }})
                                                                    {% endif %}
                                                                </span>
                                                            </div>
                                                            <p class="mb-0">{{ note.content|linebreaksbr }}</p>
                                                        </div>
                                                        {% if note.id in editable_note_ids %}
                                                        <div class="note-actions ms-auto d-flex align-items-center gap-2 flex-shrink-0">
                                                            <button type="button" class="btn btn-link text-primary p-0 edit-note-btn" data-note-id="{{ note.id }}" title="{% translate 'Modifier la note' %}" aria-label="{% translate 'Modifier la note' %}">
                                                                <i class="bi bi-pencil fs-6"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-link text-danger p-0 delete-note-btn" data-note-id="{{ note.id }}" title="{% translate 'Supprimer la note' %}" aria-label="{% translate 'Supprimer la note' %}">
                                                                <i class="bi bi-trash fs-6"></i>
                                                            </button>
                                                        </div>
                                                        {% endif %}
                                                    </div>
                                                </div>

                                                <!-- Edit mode (shown only in CMS edit mode for editable notes) -->
                                                {% if note.id in editable_note_ids %}
                                                <div class="note-edit" style="display: none;">
                                                    <div class="mb-2">
                                                        <label class="form-label small fw-bold">{% translate "Type de note" %}</label>
                                                        <select class="form-select form-select-sm edit-note-type">
                                                            {% for value, label in note_type_choices %}
                                                                {% if value != 'origin' or note.note_type == 'origin' %}
                                                                <option value="{{ value }}" {% if value == note.note_type %}selected{% endif %}>{{ label }}</option>
                                                                {% endif %}
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <div class="mb-2">
                                                        <label class="form-label small fw-bold">{% translate "Contenu" %}</label>
                                                        <textarea class="form-control edit-note-content" rows="3">{{ note.content }}</textarea>
                                                    </div>
                                                </div>
                                                {% endif %}
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}

                    {% if all_sequenced_documents %}
                        {% render_document_viewer all_sequenced_documents modal_id="interventionDocViewerModal" modal_only=True allow_delete=can_delete_documents delete_always_visible=can_delete_documents allow_copy=can_copy_documents %}
                    {% endif %}
                </div>
            </div>
        </div>

        {% if 'documents' in allowed_update_fields %}
            <div class="modal fade" id="deleteDocumentModal" tabindex="-1" aria-labelledby="deleteDocumentModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="deleteDocumentModalLabel">{% translate "Supprimer le document" %}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-1">{% translate "Voulez-vous supprimer ce document ?" %}</p>
                            <p class="fw-semibold mb-0" id="documentNameToDelete"></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                            <button type="button" class="btn btn-danger" id="confirmDeleteDocument">{% translate "Supprimer" %}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="addDocumentModal" tabindex="-1" aria-labelledby="addDocumentModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title">{% translate "Ajouter des documents" %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <form id="addDocumentForm" method="post" enctype="multipart/form-data" action="{% url 'interventions:intervention_add_document' intervention.id %}">
                                {% csrf_token %}
                                {{ add_document_form.as_p }}
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary" id="documentSubmitButton">
                                        {% translate "Ajouter" %}
                                        <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true" id="documentSubmitSpinner"></span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            {# ── Copy-document modal ── #}
            <div class="modal fade" id="copyDocumentModal" tabindex="-1" aria-labelledby="copyDocumentModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="copyDocumentModalLabel">
                                <i class="bi bi-copy me-2"></i>{% translate "Copier le document vers…" %}
                            </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-3" id="copyDocModalDocName"></p>

                            <div class="mb-3">
                                <label for="copyDocTargetSelect" class="form-label fw-medium">{% translate "Cible" %}</label>
                                <select class="form-select" id="copyDocTargetSelect">
                                    <option value="">{% translate "— Choisir une localisation ou un asset —" %}</option>
                                </select>
                            </div>

                            <div id="copyDocTagsSection" class="d-none mb-3">
                                <label class="form-label fw-medium">{% translate "Tags" %}</label>
                                <div id="copyDocTagsList" class="d-flex flex-wrap gap-2"></div>
                                <p class="text-muted small mt-2 mb-0 d-none" id="copyDocNoTagsMsg">
                                    <i class="bi bi-info-circle me-1"></i>{% translate "Aucun tag disponible pour ce type de cible." %}
                                </p>
                            </div>

                            <div id="copyDocTagsLoading" class="d-none text-muted small">
                                <span class="spinner-border spinner-border-sm me-1" role="status"></span>{% translate "Chargement des tags…" %}
                            </div>

                            <div id="copyDocModalAlert" class="alert d-none mt-3 mb-0" role="alert"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                            <button type="button" class="btn btn-primary" id="copyDocSubmitBtn" disabled>
                                <i class="bi bi-copy me-1"></i>{% translate "Copier" %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {# Copy-targets JSON for JS #}
            <script id="copyDocTargetsData" type="application/json">{{ copy_targets_json|safe }}</script>

            <script>
            (function () {
                'use strict';

                // Detect active language from <html lang="…">
                var _lang = (document.documentElement.lang || 'fr').split('-')[0].toLowerCase();
                function _pick(obj, frKey, nlKey) {
                    if (_lang === 'nl' && obj[nlKey]) return obj[nlKey];
                    return obj[frKey] || '';
                }

                var copyTargets = [];
                try {
                    var _el = document.getElementById('copyDocTargetsData');
                    if (_el) copyTargets = JSON.parse(_el.textContent || '[]');
                } catch (_) {}

                var copyDocModal  = document.getElementById('copyDocumentModal');
                var targetSelect  = document.getElementById('copyDocTargetSelect');
                var tagsSection   = document.getElementById('copyDocTagsSection');
                var tagsLoading   = document.getElementById('copyDocTagsLoading');
                var tagsList      = document.getElementById('copyDocTagsList');
                var noTagsMsg     = document.getElementById('copyDocNoTagsMsg');
                var submitBtn     = document.getElementById('copyDocSubmitBtn');
                var docNameEl     = document.getElementById('copyDocModalDocName');
                var alertEl       = document.getElementById('copyDocModalAlert');

                if (!copyDocModal) return;

                // Populate target dropdown
                copyTargets.forEach(function (t) {
                    var opt = document.createElement('option');
                    opt.value = JSON.stringify({ct_id: t.ct_id, obj_id: t.obj_id});
                    opt.textContent = t.label;
                    targetSelect.appendChild(opt);
                });

                // URL templates
                var copyTagsBaseUrl = "{% url 'interventions:intervention_get_copy_target_tags' intervention.id %}";
                var copyDocBaseUrl  = "{% url 'interventions:intervention_copy_document' intervention.id 0 %}";

                var currentDocId = null;

                // Wire copy buttons
                document.addEventListener('click', function (e) {
                    var btn = e.target.closest('.copy-document-btn');
                    if (!btn) return;
                    currentDocId = btn.dataset.documentId;
                    if (docNameEl) docNameEl.textContent = btn.dataset.documentName || '';
                });

                // Reset modal on close
                copyDocModal.addEventListener('hidden.bs.modal', function () {
                    currentDocId = null;
                    targetSelect.value = '';
                    tagsList.innerHTML = '';
                    tagsSection.classList.add('d-none');
                    noTagsMsg.classList.add('d-none');
                    tagsLoading.classList.add('d-none');
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="bi bi-copy me-1"></i>' + gettext('Copier');
                    alertEl.className = 'alert d-none mt-3 mb-0';
                    alertEl.textContent = '';
                });

                // Build tag rows with optional extra-param fields
                function _buildTagRow(tag) {
                    var wrapper = document.createElement('div');
                    wrapper.className = 'border rounded p-2 mb-1';

                    // Checkbox + label row
                    var cbLabel = document.createElement('label');
                    cbLabel.className = 'form-check d-flex align-items-center mb-0';
                    cbLabel.style.cursor = 'pointer';

                    var cb = document.createElement('input');
                    cb.type = 'checkbox';
                    cb.className = 'form-check-input copy-doc-tag-cb me-2';
                    cb.value = tag.id;
                    cb.dataset.tagId = String(tag.id);

                    var span = document.createElement('span');
                    span.className = 'form-check-label';
                    span.textContent = tag.name;

                    cbLabel.appendChild(cb);
                    cbLabel.appendChild(span);
                    wrapper.appendChild(cbLabel);

                    // Extra params section (hidden until checked)
                    var schema = tag.extra_params_schema || [];
                    if (schema.length > 0) {
                        var extraDiv = document.createElement('div');
                        extraDiv.className = 'mt-2 ps-3 d-none copy-doc-extra-params';
                        extraDiv.dataset.tagId = String(tag.id);

                        schema.forEach(function (param) {
                            var fieldDiv = document.createElement('div');
                            fieldDiv.className = 'mb-2';

                            var lbl = document.createElement('label');
                            lbl.className = 'form-label small mb-1';
                            lbl.textContent = _pick(param, 'label_fr', 'label_nl') || param.key;
                            var inputId = 'ep_field_' + tag.id + '_' + param.key;
                            lbl.htmlFor = inputId;
                            if (param.required) {
                                var req = document.createElement('span');
                                req.className = 'text-danger ms-1';
                                req.textContent = '*';
                                lbl.appendChild(req);
                            }

                            var input;
                            if (param.type === 'select' && Array.isArray(param.options)) {
                                input = document.createElement('select');
                                input.className = 'form-select form-select-sm';
                                if (!param.required) {
                                    var emptyOpt = document.createElement('option');
                                    emptyOpt.value = '';
                                    emptyOpt.textContent = '—';
                                    input.appendChild(emptyOpt);
                                }
                                param.options.forEach(function (opt) {
                                    var o = document.createElement('option');
                                    o.value = opt.value;
                                    o.textContent = _pick(opt, 'label_fr', 'label_nl') || opt.value;
                                    input.appendChild(o);
                                });
                            } else if (param.type === 'textarea') {
                                input = document.createElement('textarea');
                                input.className = 'form-control form-control-sm';
                                input.rows = 2;
                            } else {
                                input = document.createElement('input');
                                input.type = param.type === 'number' ? 'number' : 'text';
                                input.className = 'form-control form-control-sm';
                            }
                            input.id = inputId;
                            // POST key: ep_{tag_id}_{param_key}
                            input.name = 'ep_' + tag.id + '_' + param.key;
                            if (param.required) input.required = true;
                            var ph = _pick(param, 'placeholder_fr', 'placeholder_nl');
                            if (ph) input.placeholder = ph;

                            fieldDiv.appendChild(lbl);
                            fieldDiv.appendChild(input);
                            extraDiv.appendChild(fieldDiv);
                        });

                        wrapper.appendChild(extraDiv);

                        cb.addEventListener('change', function () {
                            extraDiv.classList.toggle('d-none', !this.checked);
                        });
                    }

                    return wrapper;
                }

                // Load tags when a target is selected
                targetSelect.addEventListener('change', async function () {
                    tagsList.innerHTML = '';
                    tagsSection.classList.add('d-none');
                    noTagsMsg.classList.add('d-none');
                    submitBtn.disabled = true;
                    alertEl.className = 'alert d-none mt-3 mb-0';

                    if (!this.value) return;

                    var target = JSON.parse(this.value);
                    tagsLoading.classList.remove('d-none');

                    try {
                        var url = copyTagsBaseUrl + '?ct_id=' + encodeURIComponent(target.ct_id) + '&obj_id=' + encodeURIComponent(target.obj_id);
                        var resp = await fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}});
                        var data = await resp.json();
                        var tags = data.tags || [];

                        tagsLoading.classList.add('d-none');
                        tagsSection.classList.remove('d-none');

                        if (tags.length === 0) {
                            noTagsMsg.classList.remove('d-none');
                        } else {
                            noTagsMsg.classList.add('d-none');
                            // Change flex-wrap to flex-column to accommodate extra param blocks
                            tagsList.className = 'd-flex flex-column';
                            tags.forEach(function (tag) {
                                tagsList.appendChild(_buildTagRow(tag));
                            });
                        }
                        submitBtn.disabled = false;
                    } catch (err) {
                        tagsLoading.classList.add('d-none');
                        tagsSection.classList.add('d-none');
                        submitBtn.disabled = false;
                    }
                });

                // Submit
                submitBtn.addEventListener('click', async function () {
                    if (!currentDocId || !targetSelect.value) return;

                    var target = JSON.parse(targetSelect.value);
                    var tagIds = Array.from(
                        tagsList.querySelectorAll('.copy-doc-tag-cb:checked')
                    ).map(function (cb) { return cb.value; });

                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span>' + gettext('Copie…');

                    var formData = new FormData();
                    formData.append('ct_id', target.ct_id);
                    formData.append('obj_id', target.obj_id);
                    tagIds.forEach(function (id) { formData.append('tag_ids', id); });

                    // Collect extra params for checked tags
                    tagsList.querySelectorAll('.copy-doc-extra-params').forEach(function (extraDiv) {
                        var tId = extraDiv.dataset.tagId;
                        var cb = tagsList.querySelector('.copy-doc-tag-cb[data-tag-id="' + tId + '"]');
                        if (!cb || !cb.checked) return;
                        extraDiv.querySelectorAll('input[name], select[name], textarea[name]').forEach(function (inp) {
                            if (inp.value !== '') formData.append(inp.name, inp.value);
                        });
                    });

                    var copyUrl = copyDocBaseUrl.replace('/0/', '/' + currentDocId + '/');

                    try {
                        var resp = await fetch(copyUrl, {
                            method: 'POST',
                            headers: {'X-CSRFToken': _getCsrfToken()},
                            body: formData,
                        });
                        var data = await resp.json();
                        if (!resp.ok || !data.success) throw new Error(data.error || 'Erreur');

                        var bsModal = bootstrap.Modal.getInstance(copyDocModal);
                        if (bsModal) bsModal.hide();

                        var container = document.getElementById('documentsAlertContainer');
                        if (container) {
                            container.innerHTML = '<div class="alert alert-success alert-dismissible" role="alert">' +
                                gettext('Document copié avec succès') +
                                '<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>';
                            setTimeout(function () { container.innerHTML = ''; }, 4000);
                        }
                    } catch (err) {
                        alertEl.className = 'alert alert-danger mt-3 mb-0';
                        alertEl.textContent = err.message;
                        alertEl.classList.remove('d-none');
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = '<i class="bi bi-copy me-1"></i>' + gettext('Copier');
                    }
                });

                function _getCsrfToken() {
                    var m = document.cookie.match(/csrftoken=([^;]+)/);
                    return m ? m[1] : '';
                }
            })();
            </script>
        {% endif %}