{% load i18n short_name %}
        <div id="section-controles" class="card mb-4 {% if intervention.status == 'in_preparation' and not visible_controls and not visible_inspections %} d-none {% endif %}">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Contrôles / Rapports de suivi" %}</h4>
                {% if 'follow_up_reports' in allowed_update_fields %}
                    <button type="button" class="btn btn-light border-0" title="Ajouter"
                            data-bs-toggle="modal" data-bs-target="#modalChooseControlType">
                        <i class="bi bi-plus-circle text-primary"></i>
                    </button>
                {% endif %}
            </div>
            <div class="card-body">
                {% if is_user_intern %}
                <div class="mb-3 d-flex align-items-center p-2 rounded">
                    <i class="bi bi-clipboard2-check text-primary me-2 fs-5"></i>
                    <span class="fw-semibold me-3">{% translate "Résultat du contrôle" %} :</span>
                    {% if 'follow_up_reports' in allowed_update_fields %}
                    <div class="d-flex gap-2" id="follow-up-performed-radios">
                        <input type="radio" class="btn-check" name="follow_up_performed" id="fup-ok" value="ok" autocomplete="off"
                               {% if intervention.follow_up_performed == 'ok' %}checked{% endif %}>
                        <label class="btn btn-outline-success btn-sm" for="fup-ok"
                               onclick="handleFollowUpClick(event, {{ intervention.id }}, 'ok', 'fup-ok', 'follow-up-performed-radios')">
                            <i class="bi bi-check-circle"></i> OK
                        </label>
                        <input type="radio" class="btn-check" name="follow_up_performed" id="fup-attention" value="attention" autocomplete="off"
                               {% if intervention.follow_up_performed == 'attention' %}checked{% endif %}>
                        <label class="btn btn-outline-warning btn-sm" for="fup-attention"
                               onclick="handleFollowUpClick(event, {{ intervention.id }}, 'attention', 'fup-attention', 'follow-up-performed-radios')">
                            <i class="bi bi-exclamation-triangle"></i> {% translate "Points d’attention" %}
                        </label>
                        <input type="radio" class="btn-check" name="follow_up_performed" id="fup-not-ok" value="not_ok" autocomplete="off"
                               {% if intervention.follow_up_performed == 'not_ok' %}checked{% endif %}>
                        <label class="btn btn-outline-danger btn-sm" for="fup-not-ok"
                               onclick="handleFollowUpClick(event, {{ intervention.id }}, 'not_ok', 'fup-not-ok', 'follow-up-performed-radios')">
                            <i class="bi bi-x-circle"></i> Not OK
                        </label>
                    </div>
                    {% else %}
                    <span class="badge {% if intervention.follow_up_performed == 'ok' %}bg-success{% elif intervention.follow_up_performed == 'attention' %}bg-warning text-dark{% elif intervention.follow_up_performed == 'not_ok' %}bg-danger{% else %}bg-secondary{% endif %}">
                        {% if intervention.follow_up_performed == 'ok' %}OK{% elif intervention.follow_up_performed == 'attention' %}{% translate "Points d’attention" %}{% elif intervention.follow_up_performed == 'not_ok' %}Not OK{% else %}–{% endif %}
                    </span>
                    {% endif %}
                </div>
                {% endif %}

                {% if visible_controls %}
                <h6 class="fw-bold text-secondary mb-2">
                    <i class="bi bi-file-earmark-text text-primary me-1"></i>{% translate "Rapports de contrôle" %}
                </h6>
                <table class="table mb-3">
                    <thead>
                        <tr>
                            <th>{% translate "Date" %}</th>
                            <th>{% translate "Type" %}</th>
                            <th>{% translate "Auteur" %}</th>
                            <th>{% translate "Statut" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for control in visible_controls %}
                        <tr>
                            <td><a href="{% url 'controls:controls_detail' control.id %}">{{ control.updated_at|date:"d-m-Y H:i" }}</a></td>
                            <td>{{ control.get_control_type_display }}</td>
                            <td>{{ control.control_author }}</td>
                            <td>{{ control.get_status_display }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% elif not visible_inspections %}
                <p class="text-muted small mb-0">{% translate "Aucun contrôle ou rapport pour le moment." %}</p>
                {% endif %}

                {% if visible_inspections %}
                <div class="{% if visible_controls %}mt-4 pt-3 border-top{% endif %}">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="fw-bold text-secondary mb-0">
                            <i class="bi bi-patch-check text-primary me-1"></i>{% translate "Inspections de terrain / conformité" %}
                            <span class="badge bg-secondary-subtle text-secondary rounded-pill ms-1">{{ visible_inspections|length }}</span>
                        </h6>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>{% translate "Inspection" %}</th>
                                    <th>{% translate "Date / Échéance" %}</th>
                                    <th>{% translate "Nature" %}</th>
                                    <th>{% translate "Cible" %}</th>
                                    <th>{% translate "Inspecteur" %}</th>
                                    <th>{% translate "Statut / Résultat" %}</th>
                                    <th class="text-end">{% translate "Action" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for insp in visible_inspections %}
                                <tr>
                                    <td>
                                        <a href="{% url 'inspections:inspections_list' %}?inspection_id={{ insp.id }}" class="fw-bold text-decoration-none">
                                            <i class="bi bi-patch-check me-1 text-primary"></i>#{{ insp.id }}
                                        </a>
                                    </td>
                                    <td>
                                        <span class="fw-semibold">{{ insp.inspection_date|date:"d/m/Y H:i"|default:"-" }}</span>
                                        {% if insp.is_scheduled and insp.scheduled_start_date %}
                                        <div class="small text-muted">
                                            {% translate "Prévue du" %} {{ insp.scheduled_start_date|date:"d/m/Y" }} {% translate "au" %} {{ insp.scheduled_due_date|date:"d/m/Y" }}
                                        </div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge bg-light text-dark border">{{ insp.get_nature_display }}</span>
                                    </td>
                                    <td>
                                        {% if insp.asset and insp.asset.get_absolute_url %}
                                            <a href="{{ insp.asset.get_absolute_url }}" class="text-decoration-none" title="{% translate "Consulter l'asset" %}">
                                                <i class="bi bi-geo-alt me-1"></i>{{ insp.target_display }}
                                            </a>
                                        {% else %}
                                            <span><i class="bi bi-geo-alt me-1"></i>{{ insp.target_display }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <i class="bi bi-person me-1 text-muted"></i>{{ insp.inspector|short_name|default:"-" }}
                                    </td>
                                    <td>
                                        <span class="badge {{ insp.status_badge_class }}">
                                            <i class="bi {{ insp.status_icon }} me-1"></i>{{ insp.get_result_status_display }}
                                        </span>
                                        {% if insp.is_scheduled %}
                                            <span class="badge bg-info text-dark ms-1">{% translate "Planifiée" %}</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <button type="button" class="btn btn-xs btn-outline-primary py-1 px-2 me-1" data-bs-toggle="modal" data-bs-target="#interventionInspectionDetailModal{{ insp.id }}" title="{% translate "Détail" %}">
                                            <i class="bi bi-eye me-1"></i>{% translate "Détail" %}
                                        </button>
                                        <a href="{% url 'inspections:inspections_list' %}?inspection_id={{ insp.id }}" class="btn btn-xs btn-outline-secondary py-1 px-2" title="{% translate "Consulter dans la carte des inspections" %}">
                                            <i class="bi bi-box-arrow-up-right"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

{% for insp in visible_inspections %}
<!-- Modale de détail de l'inspection liée -->
<div class="modal fade" id="interventionInspectionDetailModal{{ insp.id }}" tabindex="-1" aria-labelledby="interventionInspectionDetailModalLabel{{ insp.id }}" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-light py-2.5">
                <h5 class="modal-title fs-6 fw-bold" id="interventionInspectionDetailModalLabel{{ insp.id }}">
                    <i class="bi bi-patch-check me-2 text-primary"></i>{% translate "Détail de l'inspection" %} #{{ insp.id }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-3">
                {% if insp.is_cancelled %}
                <div class="alert alert-secondary py-2 px-3 small d-flex align-items-center mb-3">
                    <i class="bi bi-slash-circle me-2 fs-6"></i>
                    <div>
                        <strong>{% translate "Inspection annulée" %}</strong> — {% translate "Cette inspection a été annulée et n'est plus prise en compte dans la conformité active de la cible." %}
                    </div>
                </div>
                {% endif %}

                {% if insp.asset and insp.asset.get_absolute_url %}
                <div class="mb-3">
                    <a href="{{ insp.asset.get_absolute_url }}" class="btn btn-primary w-100 fw-semibold">
                        <i class="bi bi-box-arrow-up-right me-2"></i>{% translate "Consulter la fiche de l'asset" %}
                    </a>
                </div>
                {% endif %}

                <ul class="list-group list-group-flush mb-3">
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-geo-alt me-1"></i>{% translate "Cible" %}</span>
                        <span class="fw-bold text-end ms-2">{{ insp.target_display }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-layers me-1"></i>{% translate "Type d'asset" %}</span>
                        <span class="badge bg-secondary">{{ insp.asset_content_type.name }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-calendar-event me-1"></i>{% translate "Date & Heure" %}</span>
                        <span class="fw-semibold">{{ insp.inspection_date|date:"d/m/Y H:i"|default:"-" }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-shield-check me-1"></i>{% translate "Résultat du contrôle" %}</span>
                        <span class="badge {{ insp.status_badge_class }}"><i class="bi {{ insp.status_icon }} me-1"></i>{{ insp.get_result_status_display }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-eye me-1"></i>{% translate "Nature" %}</span>
                        <span class="badge bg-light text-dark border">{{ insp.get_nature_display }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-person me-1"></i>{% translate "Inspecteur" %}</span>
                        <span class="fw-semibold">{{ insp.inspector|short_name|default:"-" }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted"><i class="bi bi-clock-history me-1"></i>{% translate "Date de modification" %}</span>
                        <span class="fw-semibold">{{ insp.updated_at|date:"d/m/Y H:i"|default:"-" }}</span>
                    </li>
                </ul>

                {% if insp.notes %}
                <div class="card bg-light border-0 p-3 mb-3">
                    <h6 class="fw-bold text-secondary mb-2"><i class="bi bi-journal-text me-2"></i>{% translate "Remarques" %}</h6>
                    <div class="text-dark small">{{ insp.notes }}</div>
                </div>
                {% endif %}

                {% if insp.documents.all %}
                <div class="card bg-light border-0 p-3 mb-3">
                    <h6 class="fw-bold text-secondary mb-2">
                        <i class="bi bi-images me-2 text-primary"></i>{% translate "Photos & Documents joints" %} ({{ insp.documents.count }})
                    </h6>
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        {% for doc in insp.documents.all %}
                            {% if doc.is_image %}
                            <a href="{{ doc.file_url }}" target="_blank" class="d-inline-block border rounded p-1 bg-white" title="{{ doc.filename }}">
                                <img src="{{ doc.file_url }}" alt="{{ doc.filename }}" class="rounded" style="width: 75px; height: 75px; object-fit: cover;">
                            </a>
                            {% else %}
                            <a href="{{ doc.file_url }}" target="_blank" class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-1" title="{{ doc.filename }}">
                                <i class="bi bi-file-earmark-arrow-down text-primary"></i>
                                <span class="text-truncate" style="max-width: 160px;">{{ doc.filename }}</span>
                            </a>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
            <div class="modal-footer bg-light py-2">
                <a href="{% url 'inspections:inspections_list' %}?inspection_id={{ insp.id }}" class="btn btn-primary btn-sm">
                    <i class="bi bi-box-arrow-up-right me-1"></i>{% translate "Ouvrir dans Inspections" %}
                </a>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Fermer" %}</button>
            </div>
        </div>
    </div>
</div>
{% endfor %}





        <!-- Assets -->