<!-- Assigned Units List -->
{% if units %}
    <div class="space-y-4">
        {% for item in units %}
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-3 mb-2">
                        <h4 class="font-semibold text-gray-900 dark:text-white">
                            <a href="/slm/{{ item.unit.id }}?from_project={{ project_id }}" class="hover:text-seismo-orange">
                                {{ item.unit.id }}
                            </a>
                        </h4>
                        {% if item.active_session %}
                            <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 rounded-full flex items-center">
                                <span class="w-2 h-2 bg-red-500 rounded-full mr-1.5 animate-pulse"></span>
                                Recording
                            </span>
                        {% else %}
                            <span class="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">
                                Available
                            </span>
                        {% endif %}
                    </div>

                    <div class="grid grid-cols-2 gap-3 text-sm text-gray-600 dark:text-gray-400">
                        {% if item.location %}
                        <div>
                            <span class="text-xs text-gray-500">
                                {% if project_type and project_type.id == 'sound_monitoring' %}
                                    NRL:
                                {% else %}
                                    Location:
                                {% endif %}
                            </span>
                            <a href="/projects/{{ project_id }}/nrl/{{ item.location.id }}"
                               class="text-seismo-orange hover:text-seismo-navy font-medium ml-1">
                                {{ item.location.name }}
                            </a>
                        </div>
                        {% endif %}

                        {% if item.unit.slm_model %}
                        <div>
                            <span class="text-xs text-gray-500">Model:</span>
                            <span class="ml-1">{{ item.unit.slm_model }}</span>
                        </div>
                        {% endif %}

                        <div>
                            <span class="text-xs text-gray-500">Sessions:</span>
                            <span class="ml-1">{{ item.session_count }}</span>
                        </div>

                        <div>
                            <span class="text-xs text-gray-500">Files:</span>
                            <span class="ml-1">{{ item.file_count }}</span>
                        </div>

                        {% if item.assignment.assigned_at %}
                        <div class="col-span-2">
                            <span class="text-xs text-gray-500">Assigned:</span>
                            <span class="ml-1">{{ item.assignment.assigned_at|local_datetime }}</span>
                        </div>
                        {% endif %}
                    </div>

                    {% if item.unit.note %}
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                        {{ item.unit.note }}
                    </p>
                    {% endif %}
                </div>

                <div class="flex items-center gap-2">
                    <a href="/slm/{{ item.unit.id }}?from_project={{ project_id }}"
                       class="px-3 py-1 text-xs bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
                        View Unit
                    </a>
                    {% if item.location %}
                    <a href="/projects/{{ project_id }}/nrl/{{ item.location.id }}"
                       class="px-3 py-1 text-xs bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                        View NRL
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
{% else %}
    <div class="text-center py-12">
        <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
        </svg>
        <p class="text-gray-500 dark:text-gray-400 mb-2">No units assigned yet</p>
        <p class="text-sm text-gray-400 dark:text-gray-500">Assign units to locations to get started</p>
    </div>
{% endif %}
