{% load i18n %}
{% if linked_observations %}
        <div id="section-observations" class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0"><i class="bi bi-eye me-2"></i>{% translate "Observations liées" %}</h4>
                <span class="badge bg-secondary">{{ linked_observations|length }}</span>
            </div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                    {% for obs in linked_observations %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <a href="{% url 'observations:observation_detail' obs.id %}" class="fw-semibold text-decoration-none">{{ obs.code }}</a>
                            {% if obs.description %}
                            <span class="text-muted ms-2 small">{{ obs.description|truncatechars:80 }}</span>
                            {% endif %}
                        </div>
                        <span class="badge ms-2 {% if obs.status == 'to_process' %}bg-danger{% elif obs.status == 'in_progress' %}bg-warning text-dark{% elif obs.status == 'processed' %}bg-success{% elif obs.status == 'not_relevant' %}bg-secondary{% elif obs.status == 'duplicate' %}bg-info text-dark{% elif obs.status == 'closed' %}bg-dark{% elif obs.status == 'archived' %}bg-dark{% else %}bg-secondary{% endif %}">
                            {{ obs.get_status_display }}
                        </span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}