{% load i18n %}

{# ========== Widget compteur d'interventions à planifier ========== #}
<div class="card shadow-sm h-100" style="border-color: #ff8a80 !important;">
    <div class="card-header d-flex align-items-center justify-content-between" style="background-color: #ff8a80 !important;">
        <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=to_be_planned"
           class="text-decoration-none fw-bold text-uppercase" style="color: #000000 !important; letter-spacing:.05em;">
            <i class="bi bi-calendar2-plus-fill me-2"></i>{% translate "Interventions à planifier" %}
        </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=to_be_planned"
           class="text-decoration-none">
            <span class="display-5 fw-bold" style="color: #ff8a80 !important;">{{ intervention_to_plan_count }}</span>
        </a>
    </div>

    {# --- Liste des 5 premières interventions --- #}
    <ul class="list-group list-group-flush">
        {% for itv in intervention_to_plan_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: #ff8a80 !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 à planifier" %}
        </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=to_be_planned&to_be_planned_soon=1"
           class="text-muted text-decoration-none">
            <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir les interventions à planifier bientôt" %}
        </a>
    </div>
</div>