{% load i18n %}

{# ========== Widget compteur d'interventions en pause ========== #}
<div class="card shadow-sm h-100" style="border-color: #6b226e !important;">
    <div class="card-header d-flex align-items-center justify-content-between" style="background-color: #6b226e !important;">
        <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=on_pause"
           class="text-decoration-none fw-bold text-uppercase" style="color: #ffffff !important; letter-spacing:.05em;">
            <i class="bi bi-pause-circle-fill me-2"></i>{% translate "Interventions en pause" %}
        </a>
    </div>

    {# --- Compteur --- #}
    <div class="text-center py-2 border-bottom">
        <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=on_pause{% if is_manager_filter_applied %}&intervention_manager={{ request.user.id }}{% endif %}"
           class="text-decoration-none">
            <span class="display-5 fw-bold" style="color: #6b226e !important;">{{ intervention_on_pause_count }}</span>
            {% if is_manager_filter_applied %}
                <span class="text-muted fs-6 fw-normal ms-1">{% translate "(gestionnaire)" %}</span>
            {% endif %}
        </a>
    </div>

    {# --- Liste des 5 premières interventions --- #}
    <ul class="list-group list-group-flush">
        {% for itv in intervention_on_pause_list %}
        <li class="list-group-item px-2 py-1 small">
            <a href="{% url 'interventions:intervention_detail' itv.id %}" class="text-decoration-none d-block">
                <div class="d-flex justify-content-between align-items-start">
                    <span class="fw-semibold text-truncate me-2" style="max-width:70%; color: #6b226e !important;">{{ itv.code }}</span>
                    <span class="text-muted text-nowrap" style="font-size:.75rem;">{{ itv.creation_time|date:"d/m H:i" }}</span>
                </div>
                <span class="text-muted" style="font-size:.75rem;">
                    {% if itv.title %}{{ itv.title|truncatechars:50 }}{% endif %}
                    {% if itv.thematic %} &middot; {{ itv.thematic.code }}{% endif %}
                </span>
            </a>
        </li>
        {% empty %}
        <li class="list-group-item text-center text-muted py-2 small">
            <i class="bi bi-check-circle text-success me-1"></i>{% translate "Aucune intervention en pause" %}
        </li>
        {% endfor %}
    </ul>

    <div class="card-footer text-center text-muted small">
        <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=on_pause"
           class="text-muted text-decoration-none">
            <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir toutes les interventions en pause" %} ({{ total_on_pause_count }})
        </a>
    </div>
</div>