{% load i18n %}

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

    {# --- Liste des interventions groupées par contrat --- #}
    {% if intervention_to_approve_list %}
    {% regroup intervention_to_approve_list by contract as contract_groups %}
    <div class="accordion accordion-flush" id="interventionToApproveAccordion">
        {% for contract_group in contract_groups %}
        <div class="accordion-item">
            <h2 class="accordion-header" id="interventionToApproveHeading{{ forloop.counter }}">
                <button class="accordion-button py-2 small bg-warning-subtle fw-semibold{% if not forloop.first %} collapsed{% endif %}" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#interventionToApproveCollapse{{ forloop.counter }}"
                        aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
                        aria-controls="interventionToApproveCollapse{{ forloop.counter }}">
                    <span class="badge bg-warning text-warning-emphasis border border-warning-subtle text-truncate me-2" style="max-width:70%;">
                        {% if contract_group.grouper %}
                            {% blocktranslate with contract_number=contract_group.grouper.contract_number company_name=contract_group.grouper.company.name %}Contrat {{ contract_number }} ({{ company_name }}){% endblocktranslate %}
                        {% else %}
                            {% translate "Sans contrat" %}
                        {% endif %}
                    </span>
                    <span class="badge text-bg-warning ms-auto me-2">{{ contract_group.list|length }}</span>
                </button>
            </h2>
            <div id="interventionToApproveCollapse{{ forloop.counter }}"
                 class="accordion-collapse collapse{% if forloop.first %} show{% endif %}"
                 aria-labelledby="interventionToApproveHeading{{ forloop.counter }}"
                 data-bs-parent="#interventionToApproveAccordion">
                <div class="list-group list-group-flush">
                    {% for itv in contract_group.list|slice:":3" %}
                    <a href="{% url 'interventions:intervention_detail' itv.id %}" class="list-group-item list-group-item-action px-2 py-1 small text-decoration-none">
                        <div class="d-flex justify-content-between align-items-start">
                            <span class="fw-semibold text-truncate me-2" style="max-width:70%; color: #ffb74d !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.asset_category %} &middot; {{ itv.asset_category.get_name }}{% elif itv.thematic %} &middot; {{ itv.thematic.code }}{% endif %}
                        </span>
                    </a>
                    {% endfor %}
                    {% if contract_group.grouper %}
                    <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=to_be_approved&contract={{ contract_group.grouper.id }}"
                       class="list-group-item list-group-item-action px-2 py-1 small text-muted text-decoration-none">
                        <i class="bi bi-arrow-right-circle me-1"></i>
                        {% blocktranslate with contract_number=contract_group.grouper.contract_number %}Voir toutes les interventions pour le contrat {{ contract_number }}{% endblocktranslate %}
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="list-group list-group-flush">
        <div 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 à approuver" %}
        </div>
    </div>
    {% endif %}

    <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_approved"
           class="text-muted text-decoration-none">
            <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir toutes les interventions à approuver" %}
        </a>
    </div>
</div>