{% load i18n %}

{# ========== Widget Interventions Externes ========== #}
<div class="card shadow-sm h-100" style="border-color: #0284c7 !important;">
    {# --- En-tête de carte --- #}
    <div class="card-header d-flex align-items-center justify-content-between text-white" style="background-color: #0284c7 !important;">
        <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}external=1"
           class="text-white text-decoration-none fw-bold text-uppercase d-flex align-items-center" style="letter-spacing: .05em;">
            <i class="bi bi-buildings-fill me-2"></i>{% translate "Interventions externes" %}
        </a>
        <span class="badge bg-white text-dark rounded-pill px-2 py-1 small fw-semibold" title="{% translate 'Total des interventions externes' %}">
            {{ external_interventions_total_count }}
        </span>
    </div>

    {# --- Compteur principal des interventions non terminées --- #}
    <div class="text-center py-2 border-bottom bg-light bg-opacity-25">
        <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}external=1&status=in_preparation,to_be_approved,to_be_planned,to_be_processed,assigned,in_progress,on_pause,to_be_corrected"
           class="text-decoration-none d-block">
            <span class="display-5 fw-bold" style="color: #0284c7 !important;">{{ external_interventions_unfinished_count }}</span>
            <div class="text-muted small fw-semibold">
                {% blocktranslate count count=external_interventions_unfinished_count %}
                intervention non terminée
                {% plural %}
                interventions non terminées
                {% endblocktranslate %}
            </div>
        </a>

        {# --- Compteurs détaillés par statut non terminé --- #}
        {% if external_interventions_unfinished_count > 0 %}
        <div class="d-flex flex-wrap justify-content-center gap-1 mt-2 px-2">
            {% if external_status_counts.count_to_be_approved > 0 %}
            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}external=1&status=to_be_approved"
               class="badge text-decoration-none bg-warning text-dark border border-warning-subtle py-1 px-2"
               title="{% translate 'À approuver' %}">
                <i class="bi bi-patch-check me-1"></i>{% translate "À approuver" %} : <strong>{{ external_status_counts.count_to_be_approved }}</strong>
            </a>
            {% endif %}

            {% if external_status_counts.count_to_be_planned > 0 %}
            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}external=1&status=to_be_planned"
               class="badge text-decoration-none bg-secondary text-white py-1 px-2"
               title="{% translate 'À planifier' %}">
                <i class="bi bi-calendar2-week me-1"></i>{% translate "À planifier" %} : <strong>{{ external_status_counts.count_to_be_planned }}</strong>
            </a>
            {% endif %}

            {% if external_status_counts.count_to_be_processed > 0 %}
            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}external=1&status=to_be_processed"
               class="badge text-decoration-none bg-danger text-white py-1 px-2"
               title="{% translate 'À traiter' %}">
                <i class="bi bi-exclamation-square me-1"></i>{% translate "À traiter" %} : <strong>{{ external_status_counts.count_to_be_processed }}</strong>
            </a>
            {% endif %}

            {% if external_status_counts.count_assigned > 0 %}
            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}external=1&status=assigned"
               class="badge text-decoration-none bg-info text-dark py-1 px-2"
               title="{% translate 'Prises en charge' %}">
                <i class="bi bi-hand-thumbs-up me-1"></i>{% translate "Prises en charge" %} : <strong>{{ external_status_counts.count_assigned }}</strong>
            </a>
            {% endif %}

            {% if external_status_counts.count_in_progress > 0 %}
            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}external=1&status=in_progress"
               class="badge text-decoration-none bg-primary text-white py-1 px-2"
               title="{% translate 'Démarrées' %}">
                <i class="bi bi-play-circle me-1"></i>{% translate "Démarrées" %} : <strong>{{ external_status_counts.count_in_progress }}</strong>
            </a>
            {% endif %}

            {% if external_status_counts.count_on_pause > 0 %}
            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}external=1&status=on_pause"
               class="badge text-decoration-none bg-dark text-white py-1 px-2"
               title="{% translate 'En pause' %}">
                <i class="bi bi-pause-circle me-1"></i>{% translate "En pause" %} : <strong>{{ external_status_counts.count_on_pause }}</strong>
            </a>
            {% endif %}

            {% if external_status_counts.count_to_be_corrected > 0 %}
            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}external=1&status=to_be_corrected"
               class="badge text-decoration-none bg-danger text-white py-1 px-2"
               title="{% translate 'À corriger' %}">
                <i class="bi bi-arrow-counterclockwise me-1"></i>{% translate "À corriger" %} : <strong>{{ external_status_counts.count_to_be_corrected }}</strong>
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>

    {# --- Titre section 10 dernières interventions --- #}
    <div class="px-3 py-1 bg-light border-bottom small fw-semibold text-muted text-uppercase d-flex justify-content-between align-items-center" style="font-size: .75rem; letter-spacing: .05em;">
        <span><i class="bi bi-clock-history me-1"></i>{% translate "10 dernières interventions" %}</span>
        <span class="text-muted">{{ external_interventions_list|length }} / {{ external_interventions_total_count }}</span>
    </div>

    {# --- Liste des 10 dernières interventions --- #}
    <ul class="list-group list-group-flush flex-grow-1">
        {% for itv in external_interventions_list %}
        <li class="list-group-item px-3 py-2 small">
            <a href="{% url 'interventions:intervention_detail' itv.id %}" class="text-decoration-none d-block">
                {# Ligne 1 : Code + Organisme + Statut #}
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <span class="fw-bold text-truncate me-1" style="color: #0284c7 !important;">{{ itv.code }}</span>
                    {% if itv.provider_or_company_name %}
                    <span class="badge bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle text-truncate me-auto ms-1" style="max-width: 140px;" title="{{ itv.provider_or_company_name }}">
                        <i class="bi bi-building me-1"></i>{{ itv.provider_or_company_name }}
                    </span>
                    {% endif %}
                    <span class="badge ms-auto" style="background-color: {{ itv.status_color_hex }}; color: {{ itv.status_text_color_hex }}; font-size: .72rem;">
                        {{ itv.get_status_display }}
                    </span>
                </div>

                {# Ligne 2 : Titre/Description + Thématique/Catégorie + Date #}
                <div class="d-flex justify-content-between align-items-center text-muted" style="font-size: .75rem;">
                    <span class="text-truncate me-2" style="max-width: 70%;">
                        {% if itv.title %}
                            {{ itv.title }}
                        {% else %}
                            <em class="text-muted">{% translate "Sans titre" %}</em>
                        {% endif %}
                        {% if itv.asset_category %}
                            &middot; {{ itv.asset_category.get_name }}
                        {% elif itv.thematic %}
                            &middot; {{ itv.thematic.code }}
                        {% endif %}
                    </span>
                    <span class="text-nowrap">{{ itv.creation_time|date:"d/m/Y" }}</span>
                </div>
            </a>
        </li>
        {% empty %}
        <li class="list-group-item text-center text-muted py-3 small">
            <i class="bi bi-check-circle text-success me-1"></i>{% translate "Aucune intervention externe" %}
        </li>
        {% endfor %}
    </ul>

    {# --- Pied de carte (Raccourci vers toutes les interventions externes) --- #}
    <div class="card-footer text-center text-muted small bg-transparent">
        <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}external=1"
           class="text-muted text-decoration-none fw-semibold">
            <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir toutes les interventions externes" %} ({{ external_interventions_total_count }})
        </a>
    </div>
</div>