{% load i18n tz %}
{% if interventions|length >= 100 %}
<div class="alert alert-warning small" role="alert">
    {% translate "Affichage limité à 100 interventions" %}
</div>
{% endif %}
<div class="d-flex justify-content-between align-items-center gap-2 mb-1">
    <button
        type="button"
        class="btn btn-outline-secondary btn-sm"
        id="refresh-list"
        title="{% translate 'Rafraîchir la liste' %}"
        aria-label="{% translate 'Rafraîchir la liste' %}"
    >
        <i class="bi bi-arrow-clockwise" id="refresh-icon"></i>
        <span
            class="spinner-border spinner-border-sm align-middle text-secondary d-none"
            id="refresh-spinner"
            role="status"
            aria-hidden="true"
        ></span>
    </button>

    <div class="d-flex align-items-center gap-2">
        <label for="sort-select" class="mb-0 small text-muted">{% translate "Trier par" %}</label>
        <select id="sort-select" class="form-select form-select-sm w-auto">
            <!-- Placeholder : aucune valeur par défaut -->
            <option value="" {% if not current_sort %}selected{% endif %}>
            {% translate "— Défaut —" %}
            </option>
            <option value="number_asc"  {% if current_sort == "number_asc"  %}selected{% endif %}>{% translate "Numéro ↑" %}</option>
            <option value="number_desc" {% if current_sort == "number_desc" %}selected{% endif %}>{% translate "Numéro ↓" %}</option>
            <option value="title_asc"   {% if current_sort == "title_asc"   %}selected{% endif %}>{% translate "Titre A→Z" %}</option>
            <option value="title_desc"  {% if current_sort == "title_desc"  %}selected{% endif %}>{% translate "Titre Z→A" %}</option>
            <option value="date_asc"    {% if current_sort == "date_asc"    %}selected{% endif %}>{% translate "Date ↑" %}</option>
            <option value="date_desc"   {% if current_sort == "date_desc"   %}selected{% endif %}>{% translate "Date ↓" %}</option>
        </select>
    </div>
</div>
{% for intervention in interventions %}
<div class="card mb-2 shadow-sm" data-href="{% url 'mobile:intervention_detail_mobile' intervention.id %}">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h6 class="card-title mb-1">
                    <i class="bi bi-gear 
                        {% if intervention.maintain_type == 'corrective' %}text-danger
                        {% elif intervention.maintain_type == 'preventive' %}text-warning
                        {% elif intervention.maintain_type == 'ameliorative' %}text-success
                        {% endif %}"
                    ></i>
                    <a href="{% url 'mobile:intervention_detail_mobile' intervention.id %}" class="me-2">{{ intervention.code }}</a>  {{ intervention.title }}
                </h6>
                <span class="badge bg-{{ intervention.get_status_color }} status-{{ intervention.status }}">{{ intervention.get_status_display }}</span>
                {% if intervention.is_contract_blocked %}
                    <span class="badge bg-danger" title="{% translate 'Marché temporairement bloqué' %}">
                        <i class="bi bi-slash-circle"></i> {% translate "Marché bloqué" %}
                    </span>
                {% endif %}
                {% if intervention.prep_state %}
                    {% if intervention.prep_state == "processed" %}
                        <span class="badge bg-success" title="{% translate 'Stock prêt' %}">
                            <i class="bi bi-box"></i>
                        </span>
                    {% elif intervention.prep_state == "not_processed" %}
                        <span class="badge bg-danger" title="{% translate 'Stock en attente' %}">
                            <i class="bi bi-box"></i>
                        </span>
                    {% endif %}
                {% endif %}
                {% if intervention.list_begin_time %}
                <div class="small text-muted mt-1">
                    <i class="bi bi-calendar-event me-1"></i>
                    {{ intervention.list_begin_time|localtime|date:"d/m/Y H:i" }}
                </div>
                {% endif %}
            </div>
            <div class="d-flex align-items-center gap-2">
                {% if intervention.lat and intervention.lon %}
                    <button type="button" 
                            class="btn btn-outline-primary btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center"
                            style="width: 34px; height: 34px;"
                            title="{% translate 'Itinéraire GPS' %}"
                            aria-label="{% translate 'Itinéraire GPS' %}"
                            onclick="openGpsNavigation('{{ intervention.lat|stringformat:'f' }}', '{{ intervention.lon|stringformat:'f' }}', '{{ intervention.code|escapejs }}', false, event)">
                        <i class="bi bi-sign-turn-right-fill fs-6"></i>
                    </button>
                {% endif %}
                {% if not intervention.assigned_member %}
                    <i class="bi bi-person-x fs-5 s-4" title="{% translate 'Non assignée' %}"></i>
                {% else %}
                    <i class="bi bi-person-check fs-5 {% if request.user == intervention.assigned_member.user %}text-primary{% else %}text-info{% endif %}" title="{% translate 'Assignée' %}"></i>
                {% endif %}
            </div>
        </div>

        {% if intervention.preparation_orders.all %}
        <div class="d-flex flex-wrap align-items-center gap-1 mt-2 pt-2 border-top">
            <i class="bi bi-box-seam text-primary me-1" style="font-size:0.8rem;" title="{% translate 'Matériel / Stock' %}"></i>
            {% for order in intervention.preparation_orders.all %}
                {% if order.is_loan %}
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle" style="font-size:0.7rem;">
                        <i class="bi bi-arrow-left-right"></i> {% translate "Prêt" %}
                    </span>
                {% endif %}
                {% for item in order.preparationorderitem_set.all|slice:":3" %}
                    <span class="badge bg-light text-dark border text-truncate" style="font-size:0.7rem; max-width: 160px;" title="{{ item.product.name }} &times; {{ item.quantity }}">
                        {{ item.product.name }} &times; {{ item.quantity }}
                    </span>
                {% endfor %}
                {% for item in order.other_items.all|slice:":2" %}
                    <span class="badge bg-light text-dark border text-truncate" style="font-size:0.7rem; max-width: 160px;" title="{{ item.name }} &times; {{ item.quantity }}">
                        {{ item.name }} &times; {{ item.quantity }}
                    </span>
                {% endfor %}
                {% with total_count=order.preparationorderitem_set.all|length|add:order.other_items.all|length %}
                    {% if total_count > 3 %}
                        <span class="badge bg-secondary-subtle text-muted" style="font-size:0.7rem;">
                            +{{ total_count|add:"-3" }}
                        </span>
                    {% endif %}
                {% endwith %}
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>
{% empty %}
<p class="text-muted">{% translate "Aucune intervention trouvée." %}</p>
{% endfor %}