{% load i18n interventions_tags tz %}
        <div class="row sticky-top bg-white border-bottom border-3">
            <!-- Main information -->
            <div class="mb-1 ms-2">
                <div class="d-flex align-items-start justify-content-between">

                <!-- Zone centre : Titre (prend l’espace restant et wrap propre) -->
                <div class="m-0 flex-grow-1 pt-1 editable-field" data-field="title" data-can-edit="{% if 'title' in allowed_update_fields %}true{% else %}false{% endif %}">
                    <h4 class="m-0 field-display" style="color: #0f172a;">
                        <i class="bi {{ intervention.thematic.icon }}" style="color: #475569; font-size: 1.5rem;"></i>
                        {% translate "Intervention" %} {{ intervention.code }}
                        {% if intervention.contract.needs_checking and intervention.status in 'to_be_approved,to_be_processed' %}
                        {% if can_check_intervention %}
                        <label id="is-checked-badge"
                               for="is-checked-cb"
                               class="badge ms-3 align-middle {% if intervention.is_checked %}bg-success{% else %}bg-secondary{% endif %}"
                               style="display: inline-flex; align-items: center; width: fit-content; font-size: 0.8rem; font-weight: 500; cursor: pointer;"
                               title="{% if intervention.is_checked %}{% translate 'Annuler la vérification' %}{% else %}{% translate 'Marquer comme vérifiée' %}{% endif %}">
                            <input type="checkbox" id="is-checked-cb"
                                   {% if intervention.is_checked %}checked{% endif %}
                                   onchange="toggleInterventionChecked({{ intervention.id }}, this)"
                                   style="cursor: inherit; margin-right: 4px; vertical-align: -1px;">
                            <span id="is-checked-text">{% if intervention.is_checked %}{% translate "Vérifiée" %}{% else %}{% translate "Non vérifiée" %}{% endif %}</span>
                        </label>
                        {% else %}
                        <span class="badge ms-3 align-middle {% if intervention.is_checked %}bg-success{% else %}bg-secondary{% endif %}"
                              style="font-size: 0.8rem; font-weight: 500;"
                              title="{% translate 'Vérification requise' %}">
                            {% if intervention.is_checked %}{% translate "Vérifiée" %}{% else %}{% translate "Non vérifiée" %}{% endif %}
                        </span>
                        {% endif %}
                        {% endif %}
                        <span class="field-value" style="color: #0f172a;">{{ intervention.title }}</span>
                        {% if intervention.show_contract_blocked_warning %}
                        <span class="badge bg-danger text-white ms-2" title="{% translate 'Marché temporairement bloqué pour raisons budgétaires' %}">
                            <i class="bi bi-slash-circle"></i> {% translate "Marché bloqué" %}
                        </span>
                        {% endif %}
                        {% if show_created_by_provider_badge %}
                        <span class="badge bg-warning text-dark ms-2" title="{% translate 'Cette intervention a été créée par le prestataire' %}">
                            <i class="bi bi-person-badge"></i> {% translate "Créée par le prestataire" %}
                        </span>
                        {% endif %}
                    </h4>
                    <div class="field-edit d-none">
                        <div class="d-flex align-items-center gap-2">
                            <span style="color: #0f172a; font-weight: bold;">{% translate "Intervention" %} {{ intervention.code }} -</span>
                            <input type="text" class="form-control form-control-sm" value="{{ intervention.title }}" style="flex: 1;" />
                        </div>
                    </div>
                </div>

                </div>
            </div>

            <!-- Status timeline (inchangée) -->
            <div class="d-flex justify-content-between align-items-center px-3 py-1 border-top">
                <div class="timeline flex-grow-1" id="statusTimeline"></div>
                {% if intervention.status == 'on_pause' and intervention.pause_reason %}
                <div class="ms-3 text-end flex-shrink-0">
                    <small class="text-muted">
                    <label>{% translate "En pause - Motif :" %}</label>
                    {{ intervention.get_pause_reason_display }}
                    {% if intervention.pause_reason_other %} - {{ intervention.pause_reason_other }} {% endif %}
                    </small>
                </div>
                {% endif %}

            </div>

            <!-- Preparation order status indicator -->
            {% if intervention.prep_state and intervention.prep_state != "none" %}
            <div class="px-3 py-1 border-top bg-light">
                {% if intervention.prep_state == "processed" %}
                    <span class="badge bg-success">
                        <i class="bi bi-box me-1"></i>{% translate "Stock prêt" %}
                    </span>
                {% elif intervention.prep_state == "not_processed" %}
                    <span class="badge bg-danger">
                        <i class="bi bi-box me-1"></i>{% translate "Stock en attente" %}
                    </span>
                {% endif %}
            </div>
            {% endif %}
        </div>

        {% if intervention.show_contract_blocked_warning %}
        <div class="alert alert-danger d-flex align-items-center mt-3 mb-2 py-2 px-3 shadow-sm border-danger" role="alert">
            <i class="bi bi-slash-circle-fill fs-4 me-2 text-danger"></i>
            <div>
                <strong>{% translate "Marché temporairement bloqué" %} :</strong>
                {% translate "Cette intervention est retenue pour des raisons budgétaires. Aucun envoi de fiche ni contact téléphonique avec le prestataire ne doit être effectué." %}
                {% if intervention.contract.blocked_reason %}
                    <br><small class="text-muted"><em>{% translate "Motif" %} : {{ intervention.contract.blocked_reason }}</em></small>
                {% endif %}
            </div>
        </div>
        {% endif %}


            

            <!-- Recommandations -->
            <div id="section-recommandations" class="card mt-4 mb-2 border-info 
                        {% if intervention.status != 'in_preparation' or intervention.maintain_type != 'corrective' %} d-none {% endif %}">
                <div class="card-header bg-info">
                    <h4>{% translate "Recommandations" %}</h4>
                </div>
                <div class="card-body">
                    {% if intervention.show_contract_blocked_warning %}
                        <div class="alert alert-warning d-flex align-items-center mb-3 py-2 px-3">
                            <i class="bi bi-telephone-x-fill fs-4 me-2 text-danger"></i>
                            <div>
                                <strong>{% translate "Attention" %} :</strong>
                                {% translate "Le marché associé à cette intervention est bloqué. Ne pas appeler le prestataire." %}
                            </div>
                        </div>
                    {% endif %}
                    <ul class="list-group list-group-flush">
                        {% for recommendation in intervention.symptom.recommendations.all %}
                            <li class="list-group-item list-group-item-info d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="bi {{recommendation.icon}} me-2"></i>
                                    {% if intervention.show_contract_blocked_warning and recommendation.confirm_call %}
                                        <span class="text-decoration-line-through text-muted">
                                            {% render_recommendation recommendation intervention.contract as rendered_text %}
                                            {{ rendered_text|safe }}
                                        </span>
                                        <span class="badge bg-danger ms-2">{% translate "Appel interdit (marché bloqué)" %}</span>
                                    {% else %}
                                        {% render_recommendation recommendation intervention.contract as rendered_text %}
                                        {{ rendered_text|safe }}
                                    {% endif %}
                                </div>
                                {% if recommendation.confirm_call and not intervention.show_contract_blocked_warning %}
                                    <button class="btn btn-outline-success btn-sm confirm-call"
                                        data-call-id="{{recommendation.order_number}}"
                                        data-confirmed-at="{{ intervention.init_call_confirmed_time|date:'c' }}"
                                        {% if intervention.init_call_confirmed_time %}
                                            data-call-received="{{ intervention.init_call_received|yesno:'true,false' }}"
                                        {% endif %}>
                                        {% translate "Confirmer l'appel" %}
                                    </button>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            
            <div class="mt-3">
                <div class="modal fade" id="confirmCallModal" tabindex="-1" aria-labelledby="confirmCallModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <form id="confirmCallForm">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="confirmCallModalLabel">{% translate "Confirmer l'appel" %}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate "Fermer" %}"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="hidden" name="call_id" id="callRecommendationId">
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" id="callReceivedInput" name="call_received" checked>
                                        <label class="form-check-label" for="callReceivedInput">{% translate "L'appel a été réceptionné" %}</label>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label" for="callDateTimeInput">{% translate "Date et heure de l'appel" %}</label>
                                        <input type="datetime-local" class="form-control" id="callDateTimeInput" name="call_datetime" required>
                                        <div class="form-text">{% translate "Par défaut, la date et l'heure actuelles sont proposées." %}</div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                                    <button type="submit" class="btn btn-primary">
                                        <span class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true" id="confirmCallSpinner"></span>
                                        {% translate "Confirmer" %}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- Modal de confirmation d'annulation de l'intervention -->
                <div class="modal fade" id="cancelConfirmModal" tabindex="-1" aria-labelledby="cancelConfirmLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                    <div class="modal-header bg-light">
                        <h5 class="modal-title " id="cancelConfirmLabel">{% translate "Confirmer l'annulation" %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>
                    <div class="modal-body">
                        <p>{% translate "Êtes-vous sûr de vouloir annuler cette intervention ?" %}</p>
                        <div class="mt-3">
                            <label class="form-label" for="cancellationTypeSelect">{% translate "Type d'annulation" %} <span class="text-danger">*</span></label>
                            <select class="form-select" id="cancellationTypeSelect" required>
                                <option value="" selected disabled>{% translate "Choisissez un type" %}</option>
                                <option value="duplicate">{% translate "Doublon" %}</option>
                                <option value="to_redirect">{% translate "A rediriger" %}</option>
                                <option value="not_our_assets">{% translate "Pas sous notre gestion" %}</option>
                                <option value="non_relevant">{% translate "Non-relevant" %}</option>
                                <option value="other">{% translate "Autre" %}</option>
                            </select>
                        </div>
                        <div class="mt-3">
                            <label class="form-label" for="cancellationReasonInput">{% translate "Commentaire" %} <span class="text-danger d-none" id="cancellationReasonRequired">*</span></label>
                            <textarea class="form-control" id="cancellationReasonInput" rows="3" maxlength="1000" placeholder="{% translate 'Commentaire libre...' %}"></textarea>
                            <small class="form-text text-muted" id="cancellationReasonHint">{% translate "Obligatoire pour le motif \"Autre\". Sinon, le motif choisi sera enregistré comme note." %}</small>
                        </div>
                        <div class="alert alert-danger d-none mt-3" id="cancellationReasonError"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Non" %}</button>
                        <button type="button" class="btn btn-danger" id="confirmCancelBtn">{% translate "Oui, annuler" %}</button>
                    </div>
                    </div>
                </div>
                </div>

                <div class="modal fade" id="pauseReasonModal" tabindex="-1" aria-labelledby="pauseReasonModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-light">
                                <h5 class="modal-title" id="pauseReasonModalLabel">{% translate "Raison de la mise en pause" %}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate "Fermer" %}"></button>
                            </div>
                            <div class="modal-body">
                                <label class="form-label" for="pauseReasonSelect">{% translate "Sélectionnez la raison" %}</label>
                                <select class="form-select" id="pauseReasonSelect">
                                    <option value="" selected disabled>{% translate "Choisissez une raison" %}</option>
                                    {% for value, label in pause_reason_choices %}
                                        <option value="{{ value }}">{{ label }}</option>
                                    {% endfor %}
                                </select>
                                <div class="mt-3 d-none" id="pauseReasonOtherGroup">
                                    <label class="form-label" for="pauseReasonOtherInput">{% translate "Précisez la raison" %}</label>
                                    <textarea class="form-control" id="pauseReasonOtherInput" rows="3" maxlength="500"></textarea>
                                </div>
                                <div class="alert alert-danger d-none mt-3" id="pauseReasonError"></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="confirmPauseReason">{% translate "Confirmer" %}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal de confirmation pour la validation par périodes -->
                <div class="modal fade" id="periodValidationModal" tabindex="-1" aria-labelledby="periodValidationLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-light">
                                <h5 class="modal-title" id="periodValidationLabel">{% translate "Confirmer la validation" %}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate "Fermer" %}"></button>
                            </div>
                            <div class="modal-body">
                                <div id="periodValidationMessage" class="mb-2"></div>
                                <div class="alert alert-info" role="alert">
                                    <small>{% translate "Cette action est liée à la validation par périodes." %}</small>
                                </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="confirmPeriodValidationBtn">{% translate "Confirmer" %}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal pour la raison de la correction -->
                <div class="modal fade" id="correctionReasonModal" tabindex="-1" aria-labelledby="correctionReasonLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-light">
                                <h5 class="modal-title" id="correctionReasonLabel">{% translate "Raison de la correction" %}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate "Fermer" %}"></button>
                            </div>
                            <div class="modal-body">
                                <label class="form-label" for="reasonForCorrectionInput">{% translate "Indiquez la raison pour laquelle une correction est demandée" %}</label>
                                <textarea class="form-control" id="reasonForCorrectionInput" rows="4" maxlength="1000" placeholder=""></textarea>
                                <small class="text-muted">{% translate "Maximum 1000 caractères" %}</small>
                                <div class="alert alert-danger d-none mt-3" id="correctionReasonError"></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="confirmCorrectionReason">{% translate "Confirmer" %}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal pour les détails de la correction -->
                <div class="modal fade" id="correctionDetailsModal" tabindex="-1" aria-labelledby="correctionDetailsLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-light">
                                <h5 class="modal-title" id="correctionDetailsLabel">{% translate "Détails de la correction" %}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate "Fermer" %}"></button>
                            </div>
                            <div class="modal-body">
                                <label class="form-label" for="correctionDetailsInput">{% translate "Décrivez ce qui a été corrigé" %}</label>
                                <textarea class="form-control" id="correctionDetailsInput" rows="4" maxlength="1000" placeholder=""></textarea>
                                <small class="text-muted">{% translate "Maximum 1000 caractères" %}</small>
                                <div class="alert alert-danger d-none mt-3" id="correctionDetailsError"></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="confirmCorrectionDetails">{% translate "Confirmer" %}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal avertissement : aucune prestation encodée -->
                {% if contract_warn_no_prestation_on_processed %}
                <div class="modal fade" id="warnNoPrestationModal" tabindex="-1" aria-labelledby="warnNoPrestationLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-warning text-dark">
                                <h5 class="modal-title" id="warnNoPrestationLabel">
                                    <i class="bi bi-exclamation-triangle-fill me-2"></i>{% translate "Aucune prestation encodée" %}
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate "Fermer" %}"></button>
                            </div>
                            <div class="modal-body">
                                <p>{% translate "Aucune prestation n'a été encodée pour cette intervention. Êtes-vous sûr de vouloir passer au statut « Traité » ?" %}</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-warning" id="confirmWarnNoPrestationBtn">{% translate "Confirmer quand même" %}</button>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if 'assigned_provider' in allowed_update_fields or 'contract' in allowed_update_fields %}
                <div class="modal fade" id="quickProviderContractModal" tabindex="-1" aria-labelledby="quickProviderContractModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="quickProviderContractModalLabel">
                                    <i class="bi bi-pencil-square me-2"></i>{% translate "Modifier prestataire et contrat" %}
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                            </div>
                            <div class="modal-body">
                                <div id="quickProviderContractError" class="alert alert-danger d-none" role="alert"></div>
                                <div class="mb-3">
                                    <label for="quickProviderSelect" class="form-label">{% translate "Prestataire" %}</label>
                                    <select id="quickProviderSelect" class="form-select" {% if not 'assigned_provider' in allowed_update_fields %}disabled{% endif %}>
                                        <option value="">-</option>
                                        {% for provider in providers %}
                                        <option value="{{ provider.id }}" {% if provider == intervention.assigned_provider %}selected{% endif %}>
                                            {{ provider.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="mb-0">
                                    <label for="quickContractSelect" class="form-label">{% translate "Contrat" %}</label>
                                    <select id="quickContractSelect" class="form-select" {% if not 'contract' in allowed_update_fields %}disabled{% endif %}>
                                        <option value="">-</option>
                                        {% for contract in contracts %}
                                        <option value="{{ contract.id }}" {% if contract.id == intervention.contract.id %}selected{% endif %}>
                                            {{ contract.contract_number }}{% if contract.description %} ({{ contract.description|truncatechars:45 }}){% endif %}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </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="quickProviderContractSaveBtn">
                                    <span class="quick-save-label">{% translate "Enregistrer" %}</span>
                                    <span class="quick-save-spinner spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- Messages de correction (en haut du bloc de contenu) -->
                {% if can_view_correction_messages %}
                    <!-- Raison de la correction (visible si statut 'à corriger' ou 'corrigé') -->
                    {% if intervention.status in 'to_be_corrected,corrected' and intervention.reason_for_correction %}
                    <div class="alert alert-warning alert-dismissible fade show mb-2" role="alert">
                        <strong>{% translate "Raison de la demande de correction :" %}</strong>
                        <p class="mb-0">{{ intervention.reason_for_correction|linebreaks }}</p>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    {% endif %}

                    <!-- Détails de la correction (visible uniquement si statut 'corrigé') -->
                    {% if intervention.status == 'corrected' and intervention.correction_details %}
                    <div class="alert alert-warning alert-dismissible fade show mb-2" role="alert">
                        <strong>{% translate "Détails de la correction :" %}</strong>
                        <p class="mb-0">{{ intervention.correction_details|linebreaks }}</p>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    {% endif %}
                {% endif %}
                
                <!-- Informations sur l'intervention -->
                <div class="row border-bottom pb-2 pt-2">
                    <div class="col-md-6">
                        <div class="provider-contract-focus">
                            {% if 'assigned_provider' in allowed_update_fields or 'contract' in allowed_update_fields %}
                            <button type="button" class="btn btn-sm text-primary quick-edit-btn" data-bs-toggle="modal" data-bs-target="#quickProviderContractModal" aria-label="{% translate 'Modifier prestataire et contrat' %}" title="{% translate 'Modifier prestataire et contrat' %}">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            {% endif %}

                            <!-- Prestataire -->
                            <div class="d-flex align-items-center editable-field" data-field="assigned_provider" data-can-edit="{% if 'assigned_provider' in allowed_update_fields %}true{% else %}false{% endif %}">
                                <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-building"></i></button>
                                <span class="label mx-1">{% translate "Prestataire" %}:</span>
                                <div class="field-display">
                                    <span class="field-value" id="providerDisplay">{{ intervention.assigned_provider|default:'-' }}</span>
                                </div>
                                <div class="field-edit d-none" style="flex: 1;">
                                    <select class="form-select form-select-sm">
                                        <option value="">-</option>
                                        {% for provider in providers %}
                                        <option value="{{ provider.id }}" {% if provider == intervention.assigned_provider %}selected{% endif %}>
                                            {{ provider.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <!-- Contrat -->
                            <div class="d-flex align-items-center editable-field" data-field="contract" data-can-edit="{% if 'contract' in allowed_update_fields %}true{% else %}false{% endif %}">
                                <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-file-earmark-text"></i></button>
                                <span class="label mx-1">{% translate "Contrat" %}:</span>
                                <div class="field-display">
                                    <span class="field-value" id="contractDisplay">{% if intervention.contract %}{{ intervention.contract.contract_number }}{% if intervention.contract.description %} ({{ intervention.contract.description|truncatechars:45 }}){% endif %}{% else %}-{% endif %}</span>
                                </div>
                                <div class="field-edit d-none" style="flex: 1;">
                                    <select class="form-select form-select-sm">
                                        <option value="">-</option>
                                        {% for contract in contracts %}
                                        <option value="{{ contract.id }}" {% if contract.id == intervention.contract.id %}selected{% endif %}>
                                            {{ contract.contract_number }}{% if contract.description %} ({{ contract.description|truncatechars:45 }}){% endif %}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <!-- Type de maintenance -->
                        <div class="d-flex align-items-center editable-field" data-field="maintain_type" data-can-edit="{% if 'maintain_type' in allowed_update_fields %}true{% else %}false{% endif %}">
                            <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-tools"></i></button>
                            <span class="label mx-1">{% translate "Type de maintenance" %}:</span>
                            <div class="field-display">
                                <span class="field-value">
                                    <span class="badge 
                                        {% if intervention.maintain_type == 'corrective' %}bg-danger
                                        {% elif intervention.maintain_type == 'preventive' %}bg-warning
                                        {% elif intervention.maintain_type == 'ameliorative' %}bg-success
                                        {% endif %}">
                                        {{ intervention.get_maintain_type_display }}
                                    </span>
                                </span>
                            </div>
                            <div class="field-edit d-none" style="flex: 1;">
                                <select class="form-select form-select-sm">
                                    {% for value, label in maintain_choices %}
                                    <option value="{{ value }}" {% if value == intervention.maintain_type %}selected{% endif %}>
                                        {{ label }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <!-- Type d'intervention  -->
                        <div class="d-flex align-items-center editable-field" data-field="type" data-can-edit="{% if 'type' in allowed_update_fields %}true{% else %}false{% endif %}">
                            <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-wrench"></i></button>
                            <span class="label mx-1">{% translate "Type d'intervention" %}:</span>
                            <div class="field-display">
                                <span class="field-value">{{ intervention.get_type_display|default:"-" }}</span>
                            </div>
                            <div class="field-edit d-none" style="flex: 1;">
                                <select class="form-select form-select-sm">
                                    {% for value, label in type_choices %}
                                    <option value="{{ value }}" {% if value == intervention.type %}selected{% endif %}>
                                        {{ label }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <!-- Sous-type d'intervention -->
                        <div class="d-flex align-items-center editable-field {% if not has_subtypes_for_current_type %}d-none{% endif %}" 
                             id="intervention-subtype-field" 
                             data-field="sub_type" 
                             data-subtypes="{{ subtypes_data_json|escape }}"
                             data-can-edit="{% if 'sub_type' in allowed_update_fields %}true{% else %}false{% endif %}">
                            <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-tag"></i></button>
                            <span class="label mx-1">{% translate "Sous-type" %}:</span>
                            <div class="field-display">
                                <span class="field-value">{{ intervention.sub_type.get_name|default:"-" }}</span>
                            </div>
                            <div class="field-edit d-none" style="flex: 1;">
                                <select class="form-select form-select-sm" id="intervention-subtype-select">
                                    <option value="">-</option>
                                    {% for st in sub_types %}
                                        {% if not st.intervention_types or intervention.type in st.intervention_types %}
                                        <option value="{{ st.id }}" {% if st.id == intervention.sub_type_id %}selected{% endif %}>
                                            {{ st.get_name }}
                                        </option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <!-- Catégorie -->
                        <div class="d-flex align-items-center editable-field" data-field="category" data-can-edit="{% if 'category' in allowed_update_fields %}true{% else %}false{% endif %}">
                            <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-tags"></i></button>
                            <span class="label mx-1">{% translate "Catégorie" %}:</span>
                            <div class="field-display">
                                <span class="field-value">
                                    {% if intervention.asset_category %}
                                        {% if intervention.asset_category.parent %}
                                            {{ intervention.asset_category.parent.get_name }} - {{ intervention.asset_category.get_name }}
                                        {% else %}
                                            {{ intervention.asset_category.get_name }}
                                        {% endif %}
                                    {% else %}-{% endif %}
                                </span>
                            </div>
                            <div class="field-edit d-none" style="flex: 1;">
                                <select class="form-select form-select-sm">
                                    <option value="">-</option>
                                    {% for category in categories %}
                                    <option value="{{ category.id }}" {% if category.id == intervention.asset_category_id %}selected{% endif %}>
                                        {{ category.get_name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="d-flex align-items-center editable-field" data-field="priority" data-can-edit="{% if 'priority' in allowed_update_fields %}true{% else %}false{% endif %}">
                            <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-exclamation-circle"></i></button>
                            <span class="label mx-1">{% translate "Priorité" %}:</span>
                            <div class="field-display">
                                <span class="field-value">{{ intervention.get_priority_display|default:"-" }}</span>
                            </div>
                            <div class="field-edit d-none" style="flex: 1;">
                                <select class="form-select form-select-sm">
                                    {% for value, label in priority_choices %}
                                        <option value="{{ value }}" {% if intervention.priority == value %}selected{% endif %}>
                                            {{ label }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-2 border-bottom pb-2">
                    <div class="col-md-6">
                        <!-- Projet -->
                        <div class="d-flex align-items-center editable-field" data-field="project" data-can-edit="{% if 'project' in allowed_update_fields %}true{% else %}false{% endif %}">
                            <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-wrench-adjustable"></i></button>
                            <span class="label mx-1">{% translate "Projet" %}:</span>
                            <div class="field-display">
                                <span class="field-value">
                                    {% if project %}
                                        <a href="{% url 'projects:projects_detail' project_id=project.id %}" class="text-dark">{{ project|default:'' }}</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </span>
                            </div>
                            <div class="field-edit d-none" style="flex: 1;">
                                <select class="form-select form-select-sm">
                                    <option value="">-</option>
                                    {% for proj in projects %}
                                    <option value="{{ proj.id }}" {% if project and proj.id == project.id %}selected{% endif %}>
                                        {{ proj }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="modal fade" id="editProjectModal" tabindex="-1" aria-labelledby="editProjectModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                <form id="editProjectForm">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="editProjectModalLabel">{% translate "Modifier le projet" %}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                                    </div>
                                    <div class="modal-body">
                                    <input type="hidden" name="intervention_id" value="{{ intervention.id }}">
                                    <div class="mb-3">
                                        <label for="projectSelect" class="form-label">{% translate "Sélectionnez un projet" %}</label>
                                        <select class="form-select" id="projectSelect" name="value">
                                            <option value="" {% if project_intervention == None %}selected{% endif %}>---</option>
                                        {% for project in projects %}
                                        <option value="{{ project.id }}" {% if project == project_intervention.id %}selected{% endif %}>
                                            {{ project }}
                                        </option>
                                        {% endfor %}
                                        </select>
                                    </div>
                                    </div>
                                    <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">{% translate "Enregistrer" %}</button>
                                    </div>
                                </form>
                                </div>
                            </div>
                        </div>

                        <!-- PMO -->
                        <div class="d-flex align-items-center editable-field" data-field="pmo_number" data-can-edit="{% if 'pmo_number' in allowed_update_fields %}true{% else %}false{% endif %}">
                            <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-hash"></i></button>
                            <span class="label mx-1">PMO:</span>
                            <div class="field-display">
                                <span class="field-value">
                                    {% if intervention.pmo_number %}
                                        <a href="https://sprbgob.sharepoint.com/sites/I-BM-PMO/Lists/PSR/DispForm.aspx?ID={{ intervention.pmo_number }}" class="text-black" target="_blank">
                                            {{ intervention.pmo_number }}
                                        </a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </span>
                            </div>
                            <div class="field-edit d-none" style="flex: 1;">
                                <input type="number" class="form-control form-control-sm" value="{{ intervention.pmo_number|default:'' }}" step="1" min="0" pattern="\d+" />
                            </div>
                        </div>
                    
                        
                            
                    </div>
                    <div class="col-md-6">
                        <!-- Osiris -->
                        <div class="d-flex align-items-center editable-field" data-field="osiris" data-can-edit="{% if 'osiris' in allowed_update_fields %}true{% else %}false{% endif %}">
                            <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-cone-striped"></i></button>
                            <span class="label mx-1">Osiris:</span>
                            <div class="field-display">
                                <span class="field-value">
                                    {% if intervention.osiris %}
                                        <a href="https://www.osiris.brussels/Index.aspx?ObjId=WS({{intervention.osiris}})&lang=FR&parameter=" class="text-black" target="_blank">
                                            {{ intervention.osiris }}
                                        </a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </span>
                            </div>
                            <div class="field-edit d-none" style="flex: 1;">
                                <input type="number" class="form-control form-control-sm" value="{{ intervention.osiris|default:'' }}" step="1" min="0" pattern="\d+" />
                            </div>
                        </div>
                        <div class="modal fade" id="editOsirisModal" tabindex="-1" aria-labelledby="editOsirisModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                <form id="editOsirisForm">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="editOsirisModalLabel">{% translate "Modifier le numéro Osiris" %}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                                    </div>
                                    <div class="modal-body">
                                    <input type="hidden" name="intervention_id" value="{{ intervention.id }}">
                                    <div class="mb-3">
                                        <label for="osirisInput" class="form-label">{% translate "Numéro Osiris" %}</label>
                                        <input type="number" class="form-control" id="osirisInput" name="value"
                                            value="{{ intervention.osiris|default:'' }}" required step="1" min="0" pattern="\d+">
                                    </div>
                                    </div>
                                    <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">{% translate "Enregistrer" %}</button>
                                    </div>
                                </form>
                                </div>
                            </div>
                        </div>
                        
                        {% if is_user_intern %}
                            <!-- Dossier de référence -->
                            <div class="d-flex align-items-center editable-field" data-field="linked_folder" data-can-edit="{% if 'linked_folder' in allowed_update_fields %}true{% else %}false{% endif %}">
                                <button class="btn btn-sm border-0" style="cursor: default;"><i class="bi bi-folder-symlink"></i></button>
                                <span class="label mx-1">{% translate "Dossier" %}:</span>
                                <div class="field-display">
                                    <span class="field-value">
                                        {% if intervention.linked_folder %}
                                            <a href="{{ intervention.linked_folder }}" target="_blank" class="text-black">
                                                {% translate "Dossier interne" %}
                                            </a>
                                        {% else %}
                                            -
                                        {% endif %}
                                    </span>
                                </div>
                                <div class="field-edit d-none" style="flex: 1;">
                                    <input type="text" class="form-control form-control-sm" value="{{ intervention.linked_folder|default:'' }}" />
                                </div>
                            </div>
                            <div class="modal fade" id="editFolderModal" tabindex="-1" aria-labelledby="editFolderModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                    <form id="editFolderForm">
                                        <div class="modal-header">
                                        <h5 class="modal-title" id="editFolderModalLabel">{% translate "Modifier le lien" %}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                                        </div>
                                        <div class="modal-body">
                                            <input type="hidden" name="intervention_id" value="{{ intervention.id }}">
                                            <div class="mb-3">
                                                <label for="folderInput" class="form-label">{% translate "Lien du dossier interne" %}</label>
                                                <input type="text" class="form-control" id="folderInput" name="value"
                                                        value="{{ intervention.linked_folder|default:'' }}" required>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                        <button type="submit" class="btn btn-primary">{% translate "Enregistrer" %}</button>
                                        </div>
                                    </form>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>

                </div>

                <div class="row mt-2 border-bottom pb-2">
                    <!-- Réalisation -->
                    <div class="col-md-3">
                        <div class="d-flex align-items-center {% if 'realization' in allowed_update_fields %}cms-modal-container{% endif %}">
                            <button {% if not 'realization' in allowed_update_fields %} disabled {% endif %}
                                class="btn btn-sm border-0 cms-modal-trigger {% if 'realization' in allowed_update_fields %} btn-light {% endif %}" 
                                title="Modifier" data-bs-toggle="modal" data-bs-target="#editRealizationModal">
                                <i class="bi bi-calendar-check"></i>
                            </button>
                            <span class="label mx-1">{% translate "Réalisation" %}</span>
                        </div>
                                                <ul class="vtimeline real" id="realizedEventsTimeline">
                                                        {% for event in intervention.realized_events.all %}
                                                        <li class="vtimeline-item real" data-event-id="{{ event.id }}" data-event-time="{{ event.event_time|timezone:"Europe/Brussels"|date:"Y-m-d\\TH:i" }}">
                                <span>
                                    {{ event.event_time|timezone:"Europe/Brussels"|date:"d/m/Y H:i" }}<br>
                                    <small class="fst-italic"
                                        data-bs-toggle="tooltip" 
                                        title="{{ event.event_description }}">
                                        {{ event.event_description|truncatechars:100 }}
                                    </small>
                                </span>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="modal fade" id="editRealizationModal" tabindex="-1" aria-labelledby="editRealizationModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                          <div class="modal-content">
                                                        <form id="realizationForm" data-mode="create">
                              <div class="modal-header">
                                <h5 class="modal-title" id="editRealizationModalLabel">{% translate "Ajouter un événement réalisé" %}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                              </div>
                              <div class="modal-body">
                                <input type="hidden" name="intervention_id" value="{{ intervention.id }}">
                                                                <input type="hidden" name="event_id" value="">
                                <div class="mb-3">
                                  <label for="event_time" class="form-label">{% translate "Date et heure" %}</label>
                                  <input type="datetime-local" class="form-control" id="event_time" name="event_time" required>
                                </div>
                                <div class="mb-3">
                                  <label for="event_type" class="form-label">{% translate "Type d'événement" %}</label>
                                  <select class="form-select" id="event_type" name="event_type" required>
                                    <option value="real_begin">{% translate "Démarrage" %}</option>
                                    <option value="real_end">{% translate "Fin" %}</option>
                                    <option value="real_pause">{% translate "Pause" %}</option>
                                    <option value="real_resume">{% translate "Reprise" %}</option>
                                    <option value="real_other" selected>{% translate "Autre" %}</option>
                                  </select>
                                </div>
                                <div class="mb-3">
                                  <label for="event_description" class="form-label">{% translate "Description" %}</label>
                                  <textarea class="form-control" id="event_description" name="event_description" rows="3" required></textarea>
                                </div>
                              </div>
                                                            <div class="modal-footer gap-2">
                                                                <button type="button" class="btn btn-outline-secondary d-none" id="realizationCancelEditBtn">{% translate "Annuler la modification" %}</button>
                                                                <button type="submit" class="btn btn-primary" id="realizationSubmitBtn">{% translate "Ajouter" %}</button>
                                                            </div>
                                                            <div class="m-3">
                                                                <div class="d-flex align-items-center mb-2">
                                                                    <h6 class="mb-0">{%  translate "Réalisation" %}</h6>
                                                                    <span class="text-muted small ms-2">{% translate "Classés par ordre chronologique" %}</span>
                                                                </div>
                                                                <ul class="list-group timeline-editable-list" id="futureRealizationEventsList">
                                                                    {% for event in future_realized_events %}
                                                                        <li class="list-group-item d-flex justify-content-between align-items-start gap-3" data-event-id="{{ event.id }}" data-event-time="{{ event.event_time|timezone:"Europe/Brussels"|date:"Y-m-d\\TH:i" }}" data-event-type="{{ event.event_type }}" data-event-type-label="{{ event.get_event_type_display }}" data-event-description="{{ event.event_description|escape }}">
                                                                            <div class="me-auto">
                                                                                <div class="fw-semibold">{{ event.event_time|timezone:"Europe/Brussels"|date:"d/m/Y H:i" }}</div>
                                                                                <div class="text-muted small">{{ event.get_event_type_display }}</div>
                                                                                <small class="fst-italic">{{ event.event_description|truncatechars:120 }}</small>
                                                                            </div>
                                                                            <div class="btn-group btn-group-sm flex-shrink-0" role="group" aria-label="{% translate "Actions" %}">
                                                                                <button type="button" class="btn btn-outline-secondary edit-real-event-btn" data-event-id="{{ event.id }}" title="{% translate "Modifier" %}"><i class="bi bi-pencil"></i></button>
                                                                                <button type="button" class="btn btn-outline-danger delete-real-event-btn" data-event-id="{{ event.id }}" title="{% translate "Supprimer" %}"><i class="bi bi-trash"></i></button>
                                                                            </div>
                                                                        </li>
                                                                    {% empty %}
                                                                        <li class="list-group-item text-center text-muted small py-3" data-empty-state="realization">{% translate "Aucun événement" %}</li>
                                                                    {% endfor %}
                                                                </ul>
                                                            </div>
                            </form>
                          </div>
                        </div>
                    </div>

                    <!-- Planification -->
                    <div class="col-md-3">
                        <div class="d-flex align-items-center {% if 'planification' in allowed_update_fields %}cms-modal-container{% endif %}">
                            <button {% if not 'planification' in allowed_update_fields %} disabled {% endif %}
                                class="btn btn-sm border-0 cms-modal-trigger {% if 'planification' in allowed_update_fields %} btn-light {% endif %}" 
                                title="Modifier" data-bs-toggle="modal" data-bs-target="#editPlanificationModal">
                                <i class="bi bi-calendar-range"></i>
                            </button>
                            <span class="label mx-1">{% translate "Planification" %}</span>
                        </div>
                        <ul class="vtimeline" id="plannedEventsList">
                            {% now "Y-m-d H:i" as now %}
                            {% for event in intervention.planned_events.all %}
                            <li class="vtimeline-item 
                                {% if event.event_time < now or event.event_type in 'expected_begin,expected_end'%}text-muted{% endif %}" 
                                data-event-id="{{ event.id }}" data-event-time="{{ event.event_time|timezone:"Europe/Brussels"|date:"Y-m-d\\TH:i" }}">
                                <span class="">
                                    {{ event.event_time|timezone:"Europe/Brussels"|date:"d/m/Y H:i" }}
                                    <br>
                                    <small class="fst-italic"
                                        data-bs-toggle="tooltip" 
                                        title="{{ event.event_description }}">
                                        {{ event.event_description|truncatechars:100 }}
                                    </small>
                                </span>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="modal fade" id="editPlanificationModal" tabindex="-1" aria-labelledby="editPlanificationModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                          <div class="modal-content">
                                                        <form id="planificationForm" data-mode="create">
                              <div class="modal-header">
                                <h5 class="modal-title" id="editPlanificationModalLabel">{% translate "Ajouter un événement planifié" %}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                              </div>
                              <div class="modal-body">
                                <input type="hidden" name="intervention_id" value="{{ intervention.id }}">
                                                                <input type="hidden" name="event_id" value="">
                                <div class="mb-3">
                                  <label for="event_time" class="form-label">{% translate "Date et heure" %}</label>
                                  <input type="datetime-local" class="form-control" id="event_time" name="event_time" required>
                                </div>
                                <div class="mb-3">
                                  <label for="event_type" class="form-label">{% translate "Type d'événement" %}</label>
                                  <select class="form-select" id="event_type" name="event_type" required>
                                    <option value="expected_begin">{% translate "Début prévu" %}</option>
                                    <option value="expected_end">{% translate "Fin prévue" %}</option>
                                    <option value="planned_begin">{% translate "Début planifié" %}</option>
                                    <option value="planned_end">{% translate "Fin planifiée" %}</option>
                                    <option value="plan_other" selected>Autre</option>
                                  </select>
                                </div>
                                <div class="mb-3">
                                  <label for="event_description" class="form-label">{% translate "Description" %}</label>
                                  <textarea class="form-control" id="event_description" name="event_description" rows="3" required></textarea>
                                </div>
                              </div>
                                                            <div class="modal-footer gap-2">
                                                                <button type="button" class="btn btn-outline-secondary d-none" id="planificationCancelEditBtn">{% translate "Annuler la modification" %}</button>
                                                                <button type="submit" class="btn btn-primary" id="planificationSubmitBtn">{% translate "Ajouter" %}</button>
                                                            </div>
                                                            <div class="m-3">
                                                                <div class="d-flex align-items-center mb-2">
                                                                    <h6 class="mb-0">{% translate "Planification" %}</h6>
                                                                    <span class="text-muted small ms-2">{% translate "Classés par ordre chronologique" %}</span>
                                                                </div>
                                                                <ul class="list-group timeline-editable-list" id="futurePlannedEventsList">
                                                                    {% for event in future_planned_events %}
                                                                        <li class="list-group-item d-flex justify-content-between align-items-start gap-3" data-event-id="{{ event.id }}" data-event-time="{{ event.event_time|timezone:"Europe/Brussels"|date:"Y-m-d\\TH:i" }}" data-event-type="{{ event.event_type }}" data-event-type-label="{{ event.get_event_type_display }}" data-event-description="{{ event.event_description|escape }}">
                                                                            <div class="me-auto">
                                                                                <div class="fw-semibold">{{ event.event_time|timezone:"Europe/Brussels"|date:"d/m/Y H:i" }}</div>
                                                                                <div class="text-muted small">{{ event.get_event_type_display }}</div>
                                                                                <small class="fst-italic">{{ event.event_description|truncatechars:120 }}</small>
                                                                            </div>
                                                                            <div class="btn-group btn-group-sm flex-shrink-0" role="group" aria-label="{% translate "Actions" %}">
                                                                                <button type="button" class="btn btn-outline-secondary edit-plan-event-btn" data-event-id="{{ event.id }}" title="{% translate "Modifier" %}"><i class="bi bi-pencil"></i></button>
                                                                                <button type="button" class="btn btn-outline-danger delete-plan-event-btn" data-event-id="{{ event.id }}" title="{% translate "Supprimer" %}"><i class="bi bi-trash"></i></button>
                                                                            </div>
                                                                        </li>
                                                                    {% empty %}
                                                                        <li class="list-group-item text-center text-muted small py-3" data-empty-state="planification">{% translate "Aucun événement" %}</li>
                                                                    {% endfor %}
                                                                </ul>
                                                            </div>
                            </form>
                          </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        {% if intervention.contract and intervention.contract.uses_intervention_manager %}
                        <div class="d-flex align-items-center mb-2">
                            <button disabled class="btn btn-sm border-0 btn-light" style="visibility: hidden; pointer-events: none;"><i class="bi bi-person"></i></button>
                            <span class="label mx-1">{% translate "Gestionnaire :" %}</span>
                            <span>
                              {% if intervention.intervention_manager %}
                                {{ intervention.intervention_manager.get_full_name|default:intervention.intervention_manager.username }}
                              {% else %}
                                <em>{% translate "Aucun" %}</em>
                              {% endif %}
                            </span>
                        </div>
                        {% endif %}
                        <div class="d-flex align-items-center {% if 'member_assignment' in allowed_update_fields %}cms-modal-container{% endif %}">
                            <button {% if not 'member_assignment' in allowed_update_fields %} disabled {% endif %}
                              class="btn btn-sm border-0 cms-modal-trigger {% if 'member_assignment' in allowed_update_fields %} btn-light {% endif %}" 
                              title="Modifier" data-bs-toggle="modal" data-bs-target="#editAssignmentMemberModal">
                              <i class="bi bi-people"></i>
                            </button>
                            <span class="label mx-1">{% translate "Assigné à:" %}</span>
                            <span id="memberAssignmentDisplay">
                              {% if intervention.assigned_member %} {{ intervention.assigned_member }}
                              {% elif intervention.assigned_team %} {{ intervention.assigned_team }}
                              {% endif %}
                            </span>
                            <span id="memberAssignmentSuccess" class="text-success ms-2 d-none">&#10003;</span>
                        </div>
                        {% if intervention.assigned_control_team or intervention.assigned_controller %}
                        <div class="d-flex align-items-center mt-1">
                            <span class="btn btn-sm border-0 disabled text-muted"><i class="bi bi-patch-check"></i></span>
                            <span class="label mx-1">{% translate "Contrôle :" %}</span>
                            <span class="badge bg-secondary-subtle text-secondary border">
                              {% if intervention.assigned_controller %}
                                {{ intervention.assigned_controller.name }}
                                {% if intervention.assigned_control_team %}({{ intervention.assigned_control_team.name }}){% endif %}
                              {% elif intervention.assigned_control_team %}
                                {{ intervention.assigned_control_team.name }}
                              {% endif %}
                            </span>
                        </div>
                        {% endif %}
                        <div class="modal fade" id="editAssignmentMemberModal" tabindex="-1" aria-labelledby="editAssignmentMemberModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl">
                              <div class="modal-content">
                                <form id="editAssignmentMemberForm">
                                  <div class="modal-header">
                                    <h5 class="modal-title" id="editAssignmentMemberModalLabel">{% translate "Assigner un membre ou une équipe" %}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                                  </div>
                                  <div class="modal-body">
                                    <input type="hidden" name="intervention_id" value="{{ intervention.id }}">
                                    {% if intervention.assigned_provider %}
                                      <div class="row">
                                        {% for team in available_teams %}
                                          <div class="col-md-4">
                                            <div class="card mb-3">
                                              <div class="card-header bg-light">
                                                <div class="form-check">
                                                  <input class="form-check-input" type="radio" name="memberAssignment" id="team-{{ team.id }}" value="team-{{ team.id }}">
                                                  <label class="form-check-label fw-bold" for="team-{{ team.id }}">
                                                    {{ team.name }}
                                                  </label>
                                                </div>
                                              </div>
                                              <ul class="list-group list-group-flush">
                                                {% for member in team.members.all %}
                                                  <li class="list-group-item">
                                                    <div class="form-check">
                                                      <input class="form-check-input" type="radio" name="memberAssignment" id="member-{{ member.id }}" value="member-{{ member.id }}">
                                                      <label class="form-check-label" for="member-{{ member.id }}">
                                                        {{ member.name }}
                                                      </label>
                                                    </div>
                                                  </li>
                                                {% empty %}
                                                  <li class="list-group-item text-muted">{% translate "Aucun membre" %}</li>
                                                {% endfor %}
                                              </ul>
                                            </div>
                                          </div>
                                        {% empty %}
                                          <div class="col-12">
                                            <div class="alert alert-info mb-0" role="alert">
                                              <i class="bi bi-info-circle me-2"></i>
                                              {% if intervention.thematic %}
                                                {% translate "Le prestataire assigné n'a pas d'équipes associées à cette thématique." %}
                                              {% else %}
                                                {% translate "Le prestataire assigné n'a pas encore d'équipes configurées." %}
                                              {% endif %}
                                            </div>
                                          </div>
                                        {% endfor %}
                                      </div>
                                    {% else %}
                                      <div class="alert alert-warning mb-0" role="alert">
                                        <i class="bi bi-exclamation-triangle me-2"></i>
                                        {% translate "Veuillez d'abord assigner un prestataire à cette intervention avant de pouvoir assigner un membre ou une équipe." %}
                                      </div>
                                    {% endif %}
                                  </div>
                                  <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">{% translate "Enregistrer" %}</button>
                                  </div>
                                </form>
                              </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div> 

        <!-- Notes -->