{% load i18n %}
{% load short_name %}

{% if controls|length >= 100 %}
<div class="alert alert-warning small py-1 px-2 mb-2" role="alert">
    <i class="bi bi-info-circle me-1"></i>{% translate "Affichage limité à 100 contrôles" %}
</div>
{% endif %}

{% for control in controls %}
<div class="card mb-2 control-card shadow-sm border" data-href="{% url 'mobile:controls_detail' control.id %}">
    <div class="card-body p-2">
        <!-- 1. En-tête : Code & Badges Type / Statut -->
        <div class="d-flex justify-content-between align-items-center mb-1 gap-2">
            <span class="fw-bold text-primary fs-6">{{ control.control_code }}</span>
            <div class="d-flex align-items-center gap-1 flex-wrap justify-content-end">
                <!-- Badge Type -->
                {% if control.control_type == 'control' %}
                <span class="badge control-type-badge control-type-control">
                    <i class="bi bi-clipboard-check me-1"></i>{{ control.get_control_type_display }}
                </span>
                {% elif control.control_type == 'site_report' %}
                <span class="badge control-type-badge control-type-site_report">
                    <i class="bi bi-building-gear me-1"></i>{{ control.get_control_type_display }}
                </span>
                {% elif control.control_type == 'statement' %}
                <span class="badge control-type-badge control-type-statement">
                    <i class="bi bi-exclamation-octagon me-1"></i>{{ control.get_control_type_display }}
                </span>
                {% elif control.control_type == 'meeting_report' %}
                <span class="badge control-type-badge control-type-meeting_report">
                    <i class="bi bi-people me-1"></i>{{ control.get_control_type_display }}
                </span>
                {% else %}
                <span class="badge control-type-badge control-type-other">
                    {{ control.get_control_type_display }}
                </span>
                {% endif %}

                <!-- Badge Statut -->
                {% if control.status == 'in_progress' %}
                <span class="badge control-status-badge control-status-in_progress">
                    <i class="bi bi-hourglass-split me-1"></i>{{ control.get_status_display }}
                </span>
                {% elif control.status == 'information' %}
                <span class="badge control-status-badge control-status-information">
                    <i class="bi bi-info-circle me-1"></i>{{ control.get_status_display }}
                </span>
                {% elif control.status == 'to_be_processed' %}
                <span class="badge control-status-badge control-status-to_be_processed">
                    <i class="bi bi-clock-history me-1"></i>{{ control.get_status_display }}
                </span>
                {% elif control.status == 'processed' %}
                <span class="badge control-status-badge control-status-processed">
                    <i class="bi bi-check-circle me-1"></i>{{ control.get_status_display }}
                </span>
                {% elif control.status == 'validated' %}
                <span class="badge control-status-badge control-status-validated">
                    <i class="bi bi-check-all me-1"></i>{{ control.get_status_display }}
                </span>
                {% elif control.status == 'canceled' %}
                <span class="badge control-status-badge control-status-canceled">
                    <i class="bi bi-x-circle me-1"></i>{{ control.get_status_display }}
                </span>
                {% else %}
                <span class="badge control-status-badge control-status-other">
                    {{ control.get_status_display }}
                </span>
                {% endif %}
            </div>
        </div>

        <!-- 2. Badges Thématiques et Catégories (chips) -->
        {% if control.thematics.exists or control.categories.exists %}
        <div class="d-flex flex-wrap gap-1 mb-1">
            {% for theme in control.thematics.all %}
            <span class="badge badge-chip badge-theme">
                {% if theme.icon %}<i class="bi {{ theme.icon }} me-1 text-primary"></i>{% endif %}{{ theme.name }}
            </span>
            {% endfor %}
            {% for cat in control.categories.all %}
            <span class="badge badge-chip badge-category">
                <i class="bi bi-tag me-1 text-secondary"></i>{{ cat.get_name }}
            </span>
            {% endfor %}
        </div>
        {% endif %}

        <!-- 3. Description -->
        {% if control.description %}
        <div class="text-dark small mb-1">{{ control.description|truncatewords:15 }}</div>
        {% endif %}

        <!-- 4. Localisation & Projet -->
        <div class="d-flex flex-wrap gap-2 text-muted small mb-1">
            {% if control.location %}
            <div class="d-inline-flex align-items-center">
                <i class="bi bi-geo-alt text-danger me-1"></i><span>{{ control.location }}</span>
            </div>
            {% endif %}
            {% if control.project %}
            <div class="d-inline-flex align-items-center">
                <i class="bi bi-folder text-primary me-1"></i><span>{{ control.project.name }}</span>
            </div>
            {% endif %}
        </div>

        <!-- 5. Pied de carte : Auteur, Date & Compteur de remarques -->
        <div class="d-flex justify-content-between align-items-center mt-1 pt-1 border-top small text-muted">
            <div>
                {% if control.control_author %}
                <i class="bi bi-person me-1"></i>{{ control.control_author|short_name }} · 
                {% endif %}
                {{ control.updated_at|date:"d/m/Y H:i" }}
            </div>
            {% if control.remarks.count > 0 %}
            <div>
                <span class="badge rounded-pill bg-light text-secondary border">
                    <i class="bi bi-chat-left-text me-1"></i>{{ control.remarks.count }}
                </span>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% empty %}
<div class="alert alert-info py-2 px-3" role="alert">
    <i class="bi bi-info-circle me-1"></i> {% translate "Aucun contrôle trouvé." %}
</div>
{% endfor %}