{% load i18n %}
{% load short_name %}
{% if observations|length >= 100 %}
<div class="alert alert-warning small" role="alert">
    {% translate "Affichage limité à 100 observations" %}
</div>
{% endif %}

{% for observation in observations %}
<div class="card mb-2 observation-card" data-href="{% url 'mobile:observation_detail_mobile' observation.id %}">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-2">
            <div class="flex-grow-1">
                <div class="d-flex flex-wrap gap-1 mb-2">
                    {% if observation.thematic %}
                    <span class="badge bg-light text-dark">
                        {% if observation.thematic.icon %}
                        <i class="bi {{ observation.thematic.icon }} me-1"></i>
                        {% endif %}
                        {{ observation.thematic.name }}
                    </span>
                    {% endif %}
                    {% if observation.category %}
                    <span class="badge bg-light text-dark">{{ observation.category.get_name }}</span>
                    {% endif %}
                    {% if observation.symptom %}
                    <span class="badge bg-light text-dark">{{ observation.symptom.get_name }}</span>
                    {% endif %}
                </div>
                <p class="card-text mb-1">
                    <strong>{{ observation.description|truncatewords:5 }}</strong>
                </p>
                {% if observation.address %}
                <p class="text-muted small mb-1">
                    <i class="bi bi-geo-alt"></i> {{ observation.address }}
                </p>
                {% endif %}
                {% if observation.created_by %}
                <div class="mt-1">
                    <small class="text-muted">
                        <i class="bi bi-person"></i> {{ observation.created_by|short_name }}
                    </small>
                </div>
                {% endif %}
            </div>
            <div class="d-flex flex-column align-items-end gap-1 ms-2">
                {% if observation.observation_type == 'incident' %}
                <span class="badge bg-danger">
                    <i class="bi bi-exclamation-triangle me-1"></i>{% translate "Incident" %}
                </span>
                {% elif observation.observation_type == 'inventory' %}
                <span class="badge bg-secondary">
                    <i class="bi bi-clipboard-check me-1"></i>{% translate "Inventaire" %}
                </span>
                {% elif observation.observation_type == 'remark' %}
                <span class="badge bg-info">
                    <i class="bi bi-chat-dots me-1"></i>{% translate "Remarque" %}
                </span>
                {% endif %}
                
                {% if observation.status == 'in_preparation' %}
                <span class="badge bg-secondary">
                    <i class="bi bi-hourglass-split me-1"></i>{% translate "En préparation" %}
                </span>
                {% elif observation.status == 'to_process' %}
                <span class="badge bg-danger">
                    <i class="bi bi-clock-history me-1"></i>{% translate "À traiter" %}
                </span>
                {% elif observation.status == 'in_progress' %}
                <span class="badge bg-warning text-dark">
                    <i class="bi bi-hourglass-split me-1"></i>{% translate "En cours" %}
                </span>
                {% elif observation.status == 'processed' %}
                <span class="badge bg-success">
                    <i class="bi bi-check-circle me-1"></i>{% translate "Traité" %}
                </span>
                {% elif observation.status == 'not_relevant' %}
                <span class="badge bg-secondary">
                    <i class="bi bi-slash-circle me-1"></i>{% translate "Non relevant" %}
                </span>
                {% elif observation.status == 'to_redirect' %}
                <span class="badge bg-warning text-dark">
                    <i class="bi bi-reply-all me-1"></i>{% translate "À rediriger" %}
                </span>
                {% elif observation.status == 'duplicate' %}
                <span class="badge bg-info text-dark">
                    <i class="bi bi-files me-1"></i>{% translate "Doublon" %}
                </span>
                {% elif observation.status == 'closed' %}
                <span class="badge bg-dark">
                    <i class="bi bi-check-circle-fill me-1"></i>{% translate "Clôturé" %}
                </span>
                {% elif observation.status == 'archived' %}
                <span class="badge bg-dark">
                    <i class="bi bi-archive me-1"></i>{% translate "Archivé" %}
                </span>
                {% endif %}
                
                <small class="text-muted">
                    {{ observation.created_at|date:"d/m/Y H:i" }}
                </small>
            </div>
        </div>
    </div>
</div>
{% empty %}
<div class="alert alert-info" role="alert">
    <i class="bi bi-info-circle"></i> {% translate "Aucune observation trouvée." %}
</div>
{% endfor %}