<!-- Compact Project List -->
{% if projects %}
    {% for item in projects %}
    <a href="/projects/{{ item.project.id }}" class="block bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-transparent hover:border-seismo-orange transition-colors">
        <div class="flex items-start justify-between gap-4">
            <div class="min-w-0">
                <h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">
                    {{ item.project.name }}
                </h3>
                {% if item.project.client_name %}
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        Client: {{ item.project.client_name }}
                    </p>
                {% endif %}
            </div>

            {% if item.project.status == 'upcoming' %}
                <span class="shrink-0 px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 rounded-full">Upcoming</span>
            {% elif item.project.status == 'active' %}
                <span class="shrink-0 px-2 py-1 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full">Active</span>
            {% elif item.project.status == 'on_hold' %}
                <span class="shrink-0 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="shrink-0 px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">Completed</span>
            {% elif item.project.status == 'archived' %}
                <span class="shrink-0 px-2 py-1 text-xs font-medium bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-full">Archived</span>
            {% endif %}
        </div>

        <div class="mt-3 flex flex-wrap gap-3 text-xs text-gray-600 dark:text-gray-400">
            <span>{{ item.location_count }} locations</span>
            <span>{{ item.unit_count }} units</span>
            <span>{{ item.active_session_count }} active</span>
        </div>
    </a>
    {% endfor %}
{% else %}
    <div class="text-center py-8 text-gray-500 dark:text-gray-400">
        <svg class="w-12 h-12 mx-auto mb-3 opacity-50" 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>No active sound monitoring projects</p>
        <p class="text-sm mt-1">Create a project to get started</p>
    </div>
{% endif %}
