{% load i18n %}

{# ========== Widget raccourcis pour les observations ========== #}

<div class="row justify-content-center mt-4 mb-1">
    <div class="col-md-10">
        <hr class="mt-1 mb-3" style="border-color: #e2e8f0; opacity: .4;">
        <h4 class="text-center text-uppercase fw-bold" style="color: #0f172a; letter-spacing: .1em;">
            <i class="bi bi-eye me-2"></i>{% translate "Observations" %}
        </h4>
    </div>
</div>

<div class="row justify-content-center mt-2 mb-2">
    <div class="col-md-10">
        <div class="d-flex align-items-center justify-content-center mb-3">
            <!-- <h5 class="mb-0" style="color: #0f172a;">
                <i class="bi bi-eye me-2"></i>{% translate "Mes observations" %}
            </h5> -->
            <a href="{% url 'observations:observations_index' %}?mine=1" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-list-ul me-1"></i>{% translate "Voir toutes mes observations" %}
            </a>
        </div>
    </div>
</div>

{# ===== 3 COLONNES : Incident / Inventaire / Remarque ===== #}
<div class="row justify-content-center mb-4">
<div class="col-xl-10 col-12">
<div class="row g-2 justify-content-center">

    {# ===== COLONNE 1 : INCIDENT ===== #}
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header text-white bg-danger">
                <h6 class="mb-0">
                    <i class="bi bi-exclamation-triangle me-2"></i>{% translate "Incidents" %}
                </h6>
            </div>
            <div class="card-body py-2 d-flex justify-content-center">
                <ul class="list-group list-group-flush text-start w-100">
                    {% with counts=obs_counts_by_type.incident %}
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-pencil text-secondary me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=incident&status=in_preparation">
                            {{ counts.in_preparation|default:0 }} {% translate "en préparation" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-exclamation-square text-warning me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=incident&status=to_process">
                            {{ counts.to_process|default:0 }} {% translate "à traiter" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-play-circle text-info me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=incident&status=in_progress">
                            {{ counts.in_progress|default:0 }} {% translate "en cours" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=incident&status=processed">
                            {{ counts.processed|default:0 }} {% translate "traité(s)" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-archive text-secondary me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=incident&status=archived">
                            {{ counts.archived|default:0 }} {% translate "archivé(s)" %}
                        </a>
                    </li>
                    {% endwith %}
                </ul>
            </div>
            <div class="card-footer text-center">
                <a href="{% url 'observations:observations_index' %}?type=incident" class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-filter me-1"></i>{% translate "Voir incidents" %}
                </a>
            </div>
        </div>
    </div>

    {# ===== COLONNE 2 : INVENTAIRE ===== #}
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header text-white bg-primary">
                <h6 class="mb-0">
                    <i class="bi bi-clipboard-data me-2"></i>{% translate "Inventaires" %}
                </h6>
            </div>
            <div class="card-body py-2 d-flex justify-content-center">
                <ul class="list-group list-group-flush text-start w-100">
                    {% with counts=obs_counts_by_type.inventory %}
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-pencil text-secondary me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=inventory&status=in_preparation">
                            {{ counts.in_preparation|default:0 }} {% translate "en préparation" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-exclamation-square text-warning me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=inventory&status=to_process">
                            {{ counts.to_process|default:0 }} {% translate "à traiter" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-play-circle text-info me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=inventory&status=in_progress">
                            {{ counts.in_progress|default:0 }} {% translate "en cours" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=inventory&status=processed">
                            {{ counts.processed|default:0 }} {% translate "traité(s)" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-archive text-secondary me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=inventory&status=archived">
                            {{ counts.archived|default:0 }} {% translate "archivé(s)" %}
                        </a>
                    </li>
                    {% endwith %}
                </ul>
            </div>
            <div class="card-footer text-center">
                <a href="{% url 'observations:observations_index' %}?type=inventory" class="btn btn-sm btn-outline-primary">
                    <i class="bi bi-filter me-1"></i>{% translate "Voir inventaires" %}
                </a>
            </div>
        </div>
    </div>

    {# ===== COLONNE 3 : REMARQUE ===== #}
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header text-white bg-info">
                <h6 class="mb-0">
                    <i class="bi bi-chat-text me-2"></i>{% translate "Remarques" %}
                </h6>
            </div>
            <div class="card-body py-2 d-flex justify-content-center">
                <ul class="list-group list-group-flush text-start w-100">
                    {% with counts=obs_counts_by_type.remark %}
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-pencil text-secondary me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=remark&status=in_preparation">
                            {{ counts.in_preparation|default:0 }} {% translate "en préparation" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-exclamation-square text-warning me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=remark&status=to_process">
                            {{ counts.to_process|default:0 }} {% translate "à traiter" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-play-circle text-info me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=remark&status=in_progress">
                            {{ counts.in_progress|default:0 }} {% translate "en cours" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=remark&status=processed">
                            {{ counts.processed|default:0 }} {% translate "traité(s)" %}
                        </a>
                    </li>
                    <li class="list-group-item px-3 py-2">
                        <i class="bi bi-archive text-secondary me-2"></i>
                        <a href="{% url 'observations:observations_index' %}?type=remark&status=archived">
                            {{ counts.archived|default:0 }} {% translate "archivé(s)" %}
                        </a>
                    </li>
                    {% endwith %}
                </ul>
            </div>
            <div class="card-footer text-center">
                <a href="{% url 'observations:observations_index' %}?type=remark" class="btn btn-sm btn-outline-info">
                    <i class="bi bi-filter me-1"></i>{% translate "Voir remarques" %}
                </a>
            </div>
        </div>
    </div>

</div>
</div>
</div>