{% load i18n interventions_tags %}
{% if location_history_interventions %}
        <div id="section-historique" class="card mt-3 mb-4">
            <div class="card-header bg-light d-flex align-items-center justify-content-between">
                <h4 class="mb-0">
                    <i class="bi bi-clock-history me-1"></i>
                    {% translate "Historique des interventions (3 mois)" %}
                </h4>
                <span class="badge bg-secondary">{{ location_history_interventions|length }}</span>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    {% translate "Interventions récentes sur les mêmes localisations" %}
                </p>
                {% with total_items=location_history_interventions|length %}
                {% if total_items > 10 %}
                <div id="locationHistoryPreview">
                    <ul class="list-unstyled mb-2">
                        {% for item in location_history_interventions|slice:":10" %}
                        <li class="mb-2 d-flex justify-content-between align-items-start {% if not item.can_view %}text-muted{% endif %}">
                            <div class="flex-grow-1">
                                {% if item.can_view %}
                                    <a href="{% url 'interventions:intervention_detail' item.intervention.id %}" class="fw-semibold">
                                        {{ item.intervention.code }}
                                    </a>
                                    – {{ item.intervention.title }}
                                    <span class="badge bg-{{ item.intervention.get_status_color }} status-{{ item.intervention.status }} ms-2">{{ item.intervention.get_status_display }}</span>
                                    <small class="text-muted ms-2">{{ item.intervention.effective_end|date:"d/m/Y" }}</small>
                                {% else %}
                                    <span class="fw-semibold">{{ item.intervention.code }}</span>
                                    – {{ item.intervention.title }}
                                    <span class="badge bg-{{ item.intervention.get_status_color }} status-{{ item.intervention.status }} ms-2 opacity-50">{{ item.intervention.get_status_display }}</span>
                                    <i class="bi bi-lock-fill ms-1 small" title="{% translate 'Accès restreint' %}"></i>
                                    <small class="text-muted ms-2">{{ item.intervention.effective_end|date:"d/m/Y" }}</small>
                                {% endif %}
                            </div>
                            {% if item.can_view_summary %}
                                <button type="button"
                                        class="btn btn-sm btn-outline-secondary ms-2 location-history-summary-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#locationHistorySummaryModal"
                                        data-summary-url="{% url 'interventions:intervention_summary_modal' item.intervention.id %}"
                                        data-summary-title="{{ item.intervention.code }}"
                                        title="{% translate 'Voir le résumé' %}">
                                    <i class="bi bi-eye"></i>
                                </button>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                    <button type="button" class="btn btn-link btn-sm p-0" data-bs-toggle="collapse" data-bs-target="#locationHistoryFull" aria-expanded="false">
                        <i class="bi bi-chevron-down me-1"></i>{% translate "Voir tout" %} ({{ total_items }})
                    </button>
                </div>
                <div class="collapse" id="locationHistoryFull">
                    <ul class="list-unstyled mb-0">
                        {% for item in location_history_interventions|slice:"10:" %}
                        <li class="mb-2 d-flex justify-content-between align-items-start {% if not item.can_view %}text-muted{% endif %}">
                            <div class="flex-grow-1">
                                {% if item.can_view %}
                                    <a href="{% url 'interventions:intervention_detail' item.intervention.id %}" class="fw-semibold">
                                        {{ item.intervention.code }}
                                    </a>
                                    – {{ item.intervention.title }}
                                    <span class="badge bg-{{ item.intervention.get_status_color }} status-{{ item.intervention.status }} ms-2">{{ item.intervention.get_status_display }}</span>
                                    <small class="text-muted ms-2">{{ item.intervention.effective_end|date:"d/m/Y" }}</small>
                                {% else %}
                                    <span class="fw-semibold">{{ item.intervention.code }}</span>
                                    – {{ item.intervention.title }}
                                    <span class="badge bg-{{ item.intervention.get_status_color }} status-{{ item.intervention.status }} ms-2 opacity-50">{{ item.intervention.get_status_display }}</span>
                                    <i class="bi bi-lock-fill ms-1 small" title="{% translate 'Accès restreint' %}"></i>
                                    <small class="text-muted ms-2">{{ item.intervention.effective_end|date:"d/m/Y" }}</small>
                                {% endif %}
                            </div>
                            {% if item.can_view_summary %}
                                <button type="button"
                                        class="btn btn-sm btn-outline-secondary ms-2 location-history-summary-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#locationHistorySummaryModal"
                                        data-summary-url="{% url 'interventions:intervention_summary_modal' item.intervention.id %}"
                                        data-summary-title="{{ item.intervention.code }}"
                                        title="{% translate 'Voir le résumé' %}">
                                    <i class="bi bi-eye"></i>
                                </button>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                    <button type="button" class="btn btn-link btn-sm p-0" data-bs-toggle="collapse" data-bs-target="#locationHistoryFull" aria-expanded="true">
                        <i class="bi bi-chevron-up me-1"></i>{% translate "Réduire" %}
                    </button>
                </div>
                {% else %}
                <ul class="list-unstyled mb-0">
                    {% for item in location_history_interventions %}
                    <li class="mb-2 d-flex justify-content-between align-items-start {% if not item.can_view %}text-muted{% endif %}">
                        <div class="flex-grow-1">
                            {% if item.can_view %}
                                <a href="{% url 'interventions:intervention_detail' item.intervention.id %}" class="fw-semibold">
                                    {{ item.intervention.code }}
                                </a>
                                – {{ item.intervention.title }}
                                <span class="badge bg-{{ item.intervention.get_status_color }} status-{{ item.intervention.status }} ms-2">{{ item.intervention.get_status_display }}</span>
                                <small class="text-muted ms-2">{{ item.intervention.effective_end|date:"d/m/Y" }}</small>
                            {% else %}
                                <span class="fw-semibold">{{ item.intervention.code }}</span>
                                – {{ item.intervention.title }}
                                <span class="badge bg-{{ item.intervention.get_status_color }} status-{{ item.intervention.status }} ms-2 opacity-50">{{ item.intervention.get_status_display }}</span>
                                <i class="bi bi-lock-fill ms-1 small" title="{% translate 'Accès restreint' %}"></i>
                                <small class="text-muted ms-2">{{ item.intervention.effective_end|date:"d/m/Y" }}</small>
                            {% endif %}
                        </div>
                        {% if item.can_view_summary %}
                            <button type="button"
                                    class="btn btn-sm btn-outline-secondary ms-2 location-history-summary-btn"
                                    data-bs-toggle="modal"
                                    data-bs-target="#locationHistorySummaryModal"
                                    data-summary-url="{% url 'interventions:intervention_summary_modal' item.intervention.id %}"
                                    data-summary-title="{{ item.intervention.code }}"
                                    title="{% translate 'Voir le résumé' %}">
                                <i class="bi bi-eye"></i>
                            </button>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endwith %}
            </div>
        </div>
        {% endif %}

        <div class="modal fade" id="locationHistorySummaryModal" tabindex="-1" aria-labelledby="locationHistorySummaryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="locationHistorySummaryModalLabel" data-base-title="{% translate "Résumé de l'intervention" %}">
                            {% translate "Résumé de l'intervention" %}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                    </div>
                    <div class="modal-body" id="locationHistorySummaryModalBody">
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">{% translate "Chargement..." %}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% if can_create_repair %}
        <form id="repairForm" method="post" action="{% url 'interventions:create_repair_intervention' intervention.id %}"
              class="mb-4">
            {% csrf_token %}
            <input type="hidden" name="variant" value="desktop">
            {% if linked_assets %}
            <input type="hidden" name="assets_filter_enabled" value="1">
            {% endif %}
            <button type="button" 
                    class="btn btn-outline-secondary mb-3"
                    style="max-width: 400px;"
                    data-bs-toggle="modal"
                    data-bs-target="#confirmRepairModal">
                <i class="bi bi-tools"></i>
                {% translate "Créer une intervention de réparation" %}
            </button>
        </form>
        <div class="modal fade" id="confirmRepairModal" tabindex="-1" aria-labelledby="confirmRepairModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmRepairModalLabel">{% translate "Confirmation" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    {% translate "Créer une intervention de réparation à partir de cette intervention?" %}
                    {% if linked_assets %}
                    <hr class="my-3">
                    <p class="mb-2 fw-semibold small">{% translate "Équipements concernés" %} :</p>
                    <div id="repairAssetList">
                        {% for ia in linked_assets %}
                        <div class="form-check">
                            <input class="form-check-input repair-asset-check" type="checkbox"
                                   value="{{ ia.id }}"
                                   id="repairAsset_{{ ia.id }}">
                            <label class="form-check-label" for="repairAsset_{{ ia.id }}">
                                <span class="fw-semibold">{{ ia.asset.code|default:ia.asset }}</span>{% if ia.asset.get_name %} <span class="text-muted">— {{ ia.asset.get_name }}</span>{% endif %}
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                </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="confirmRepairBtn">
                    {% translate "Confirmer" %}
                    </button>
                </div>
                </div>
            </div>
        </div>
        {% endif %}


        <!-- Chronology -->