{% load i18n %}

{# ========== Widget raccourcis pour les contrôleurs ========== #}
<div class="card shadow-sm h-100" style="border-color: #00897b !important;">
    <div class="card-header d-flex align-items-center justify-content-between text-white" style="background-color: #00897b !important;">
        <a href="{{ controller_shortcuts_url }}"
           class="text-decoration-none fw-bold text-uppercase text-white d-flex align-items-center" style="letter-spacing:.05em;">
            <i class="bi bi-patch-check-fill me-2 fs-5"></i>
            <span>{% translate "Interventions à contrôler" %}</span>
        </a>
        <span class="badge bg-white text-dark rounded-pill px-2 py-1 small fw-semibold">
            {{ controller_interventions_count }}
        </span>
    </div>

    {# --- Compteur principal --- #}
    <div class="text-center py-2 border-bottom bg-light bg-opacity-25">
        <a href="{{ controller_shortcuts_url }}"
           class="text-decoration-none d-block">
            <span class="display-5 fw-bold" style="color: #00897b !important;">{{ controller_interventions_count }}</span>
            <div class="small text-muted fw-semibold">{% translate "en attente de contrôle" %}</div>
        </a>
    </div>

    {# --- Liste des 5 premières interventions --- #}
    <ul class="list-group list-group-flush flex-grow-1">
        {% for itv in controller_interventions_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: #00897b !important;">
                        {{ itv.code }}
                    </span>
                    <span class="text-muted text-nowrap" style="font-size:.75rem;">
                        {{ itv.last_modified_time|date:"d/m H:i"|default:itv.creation_time|date:"d/m H:i" }}
                    </span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-1">
                    <span class="text-muted text-truncate" style="font-size:.75rem; max-width: 65%;">
                        {% if itv.title %}{{ itv.title|truncatechars:45 }}{% endif %}
                        {% if itv.thematic %} &middot; <span class="badge bg-secondary-subtle text-secondary py-0 px-1">{{ itv.thematic.code }}</span>{% endif %}
                    </span>
                    <span class="badge {% if itv.status == 'corrected' %}bg-info-subtle text-info-emphasis border border-info-subtle{% elif itv.status == 'finished' %}bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle{% else %}bg-primary-subtle text-primary-emphasis border border-primary-subtle{% endif %} py-0 px-1" style="font-size:.7rem;">
                        {{ itv.get_status_display }}
                    </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 à contrôler" %}
        </li>
        {% endfor %}
    </ul>

    <div class="card-footer text-center text-muted small bg-light">
        <a href="{{ controller_shortcuts_url }}"
           class="text-decoration-none" style="color: #00897b !important; font-weight: 500;">
            <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir toutes les interventions à contrôler" %}
        </a>
    </div>
</div>