{% set project = this.project %}

{% if project %}
<div class="dashboard-card">
    <div class="flex items-start justify-between mb-4">
        <div>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ project.name }}</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ project.description|slice(0, 100) }}...</p>
        </div>
        <span class="badge {{ project.status == 'active' ? 'badge-success' : (project.status == 'completed' ? 'badge-info' : 'badge-warning') }}">
            {{ project.status }}
        </span>
    </div>

    <div class="mb-4">
        <div class="flex items-center justify-between text-sm mb-2">
            <span class="text-gray-600 dark:text-gray-400">Progress</span>
            <span class="font-semibold text-gray-900 dark:text-white">{{ this.progressPercentage|number_format(1) }}%</span>
        </div>
        <div class="w-full h-3 bg-gray-200 dark:bg-gray-700 rounded-full">
            <div class="h-3 rounded-full transition-all {{ this.progressColor }}" style="width: {{ this.progressPercentage }}%"></div>
        </div>
    </div>

    <div class="grid grid-cols-3 gap-4 text-center">
        <div>
            <p class="text-xl font-bold text-gray-900 dark:text-white">{{ project.indicators|length }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Indicators</p>
        </div>
        <div>
            <p class="text-xl font-bold text-gray-900 dark:text-white">{{ project.activities|length }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Activities</p>
        </div>
        <div>
            <p class="text-xl font-bold text-gray-900 dark:text-white">{{ project.locations|length }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Locations</p>
        </div>
    </div>
</div>
{% else %}
<div class="dashboard-card text-center py-8">
    <p class="text-gray-500 dark:text-gray-400">Project not found</p>
</div>
{% endif %}