{% if kpi_title and kpi_value and kpi_count and kpi_count_title %}
    <div class="card border-0 shadow-sm bg-light-subtle rounded-4 h-100">
        <div class="card-body">
            <h4 class="header-title text-center mt-0">{{ kpi_title }}</h4>
            <div class="widget-box-2">
                <div class="widget-detail-2 text-end">
                    <span class="badge {{ kpi_performance < 0 ? 'bg-danger' : (kpi_performance > 0 ? 'bg-success' : 'bg-secondary') }} rounded-pill float-start mt-3">
                        {{ kpi_performance }}%
                        <i class="mdi {{ kpi_performance < 0 ? 'mdi-trending-down' : (kpi_performance > 0 ? 'mdi-trending-up' : 'mdi-minus') }}"></i>
                    </span>
                    <h2 class="fw-normal mb-1"> {{ kpi_count }} </h2>
                    <p class="text-muted mb-3">{{ kpi_count_title }}</p>
                </div>
                <div class="progress progress-bar-alt-{{ kpi_performance < 0 ? 'danger' : 'success' }} progress-sm">
                    <div class="progress-bar bg-{{ kpi_performance < 0 ? 'danger' : 'success' }}" role="progressbar"
                         aria-valuenow="{{ kpi_value }}" aria-valuemin="0" aria-valuemax="100"
                         style="width: {{ kpi_value }}%;">
                        <span class="visually-hidden">{{ kpi_value }}% </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% else %}
    <div class="card border-0 shadow-sm bg-light-subtle rounded-4 h-100">
        <div class="card-body">
            <p class="text-muted mb-0">Données indisponibles</p>
        </div>
    </div>
{% endif %}