{% load 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>{% translate "Notes" %}</h4>
                {% if can_edit_notes %}
                    <button class="btn btn-light border-0 cms-add-note-btn" title="{% translate 'Ajouter' %}">
                        <i class="bi bi-plus-circle text-primary"></i>
                    </button>
                {% endif %}
            </div>
            <div class="card-body" id="notesContainer">
                <div id="notesAlertContainer" 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 %}
                
                {% for note in notes %}
                    <div id="note-container-{{ note.id }}"
                        class="note-item py-3 {% 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-text">{{ note.content|safe|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>
        </div>

        <!-- Documents -->