{# Dashboard widget: Projects overview #}
<div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-xl shadow-lg mb-8">
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-3">
            <div class="bg-blue-100 dark:bg-blue-900/30 p-2 rounded-lg">
                <i class="fas fa-folder-open text-blue-600 dark:text-blue-400"></i>
            </div>
            <h2 class="text-xl font-bold text-text-light dark:text-text-dark">{{ _('Projects') }}</h2>
        </div>
        <a href="{{ url_for('client_portal.projects') }}" class="text-primary hover:text-primary/80 font-medium text-sm flex items-center space-x-1 transition-colors">
            <span>{{ _('View All') }}</span>
            <i class="fas fa-arrow-right text-xs"></i>
        </a>
    </div>
    {% if projects %}
    <div class="space-y-3">
        {% for project in projects[:5] %}
        <a href="{{ url_for('client_portal.projects') }}" class="block p-4 bg-background-light dark:bg-background-dark rounded-lg border border-border-light dark:border-border-dark hover:border-primary hover:shadow-md transition-all duration-200 group">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <div class="flex items-center space-x-2 mb-1">
                        <p class="font-semibold text-text-light dark:text-text-dark group-hover:text-primary transition-colors">{{ project.name }}</p>
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">{{ project.status|capitalize }}</span>
                    </div>
                    {% if project.description %}
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark line-clamp-2">{{ project.description }}</p>
                    {% else %}
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark italic">{{ _('No description') }}</p>
                    {% endif %}
                </div>
                <i class="fas fa-chevron-right text-text-muted-light dark:text-text-muted-dark group-hover:text-primary group-hover:translate-x-1 transition-all"></i>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-12">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-full p-6 w-20 h-20 mx-auto mb-4 flex items-center justify-center">
            <i class="fas fa-folder-open text-3xl text-gray-400"></i>
        </div>
        <p class="text-text-muted-light dark:text-text-muted-dark font-medium">{{ _('No projects found') }}</p>
        <p class="text-sm text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Projects will appear here once they are created') }}</p>
    </div>
    {% endif %}
</div>