<!-- Project List Grid -->
{% if projects %}
    {% for item in projects %}
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
        <a href="/projects/{{ item.project.id }}" class="block p-6">
            <!-- Project Header -->
            <div class="flex items-start justify-between mb-4">
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
                        {{ item.project.name }}
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
                        {% if item.project_type %}
                            {% if item.project_type.id == 'sound_monitoring' %}
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
                                </svg>
                            {% elif item.project_type.id == 'vibration_monitoring' %}
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                </svg>
                            {% else %}
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
                                </svg>
                            {% endif %}
                            {{ item.project_type.name }}
                        {% endif %}
                    </p>
                </div>

                <!-- Status Badge -->
                {% if item.project.status == 'active' %}
                    <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 rounded-full">
                        Active
                    </span>
                {% elif item.project.status == 'on_hold' %}
                    <span class="px-2 py-1 text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 rounded-full">
                        On Hold
                    </span>
                {% elif item.project.status == 'completed' %}
                    <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 rounded-full">
                        Completed
                    </span>
                {% elif item.project.status == 'archived' %}
                    <span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 rounded-full">
                        Archived
                    </span>
                {% endif %}
            </div>

            <!-- Project Description -->
            {% if item.project.description %}
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
                    {{ item.project.description }}
                </p>
            {% endif %}

            <!-- Project Stats -->
            <div class="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                <div>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Locations</p>
                    <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ item.location_count }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Units</p>
                    <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ item.unit_count }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Active</p>
                    <p class="text-lg font-semibold text-gray-900 dark:text-white">
                        {% if item.active_session_count > 0 %}
                            <span class="text-green-600 dark:text-green-400">{{ item.active_session_count }}</span>
                        {% else %}
                            {{ item.active_session_count }}
                        {% endif %}
                    </p>
                </div>
            </div>

            <!-- Client Info -->
            {% if item.project.client_name %}
                <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        Client: <span class="font-medium text-gray-700 dark:text-gray-300">{{ item.project.client_name }}</span>
                    </p>
                </div>
            {% endif %}
        </a>
    </div>
    {% endfor %}
{% else %}
    <!-- Empty State -->
    <div class="col-span-full flex flex-col items-center justify-center py-12 text-gray-400 dark:text-gray-500">
        <svg class="w-16 h-16 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
        </svg>
        <p class="text-lg font-medium">No projects found</p>
        <p class="text-sm mt-1">Create your first project to get started</p>
    </div>
{% endif %}
