<!-- Project Locations List — Active + Removed sections.

  Card layout:
    [drag handle] [location info]                          [unit pill] [⋮ menu]
                  (name link, description, address, sessions/events, coords)

  Active cards are draggable to reorder.  Drop reorders the DOM
  immediately and posts the new order to /api/projects/{p}/locations/reorder.

  Removed cards are NOT reorderable (their order is historical) but
  show a Restore button.

  The three-dot menu replaces the inline Unassign/Edit/Remove/Delete
  pill buttons.  Click ⋮ to open; click outside closes.
-->

{% if not active_locations and not removed_locations %}
    <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 locations added yet</p>
    </div>
{% else %}

{# ─── Active locations (draggable) ─── #}
{% if active_locations %}
    <div class="space-y-3" id="active-locations-list" data-project-id="{{ project.id }}">
        {% for item in active_locations %}
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:border-seismo-orange transition-colors location-card"
                 draggable="true"
                 data-location-id="{{ item.location.id }}"
                 data-location-type="{{ item.location.location_type or 'sound' }}"
                 data-location-name="{{ item.location.name | e }}"
                 data-coordinates="{{ item.location.coordinates or '' }}"
                 ondragstart="onLocationDragStart(event)"
                 ondragover="onLocationDragOver(event)"
                 ondragleave="onLocationDragLeave(event)"
                 ondrop="onLocationDrop(event)"
                 ondragend="onLocationDragEnd(event)">

                <div class="flex items-start justify-between gap-3">
                    <!-- Drag handle + info -->
                    <div class="flex items-start gap-3 min-w-0 flex-1">
                        <div class="shrink-0 pt-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-grab active:cursor-grabbing select-none"
                             title="Drag to reorder">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M7 4a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2zM7 9a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2zM7 14a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2z"/>
                            </svg>
                        </div>
                        <div class="min-w-0 flex-1">
                            <a href="/projects/{{ project.id }}/nrl/{{ item.location.id }}"
                               class="font-semibold text-gray-900 dark:text-white hover:text-seismo-orange truncate">
                                {{ item.location.name }}
                            </a>
                            {% if item.location.description %}
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ item.location.description }}</p>
                            {% endif %}
                            {% if item.location.address %}
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ item.location.address }}</p>
                            {% endif %}
                            {% if item.location.coordinates %}
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ item.location.coordinates }}</p>
                            {% endif %}

                            <div class="mt-3 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap gap-4">
                                {% if item.event_count is defined and item.location.location_type == 'vibration' %}
                                    <span><strong class="text-gray-700 dark:text-gray-300">{{ "{:,}".format(item.event_count) }}</strong> event{{ '' if item.event_count == 1 else 's' }}</span>
                                {% else %}
                                    <span>Sessions: {{ item.session_count }}</span>
                                {% endif %}
                                {% if item.assignment and item.assigned_unit %}
                                    <span>Assigned: <a href="/unit/{{ item.assigned_unit.id }}" class="text-seismo-orange hover:text-seismo-navy font-mono">{{ item.assigned_unit.id }}</a></span>
                                {% else %}
                                    <span class="italic text-gray-400 dark:text-gray-500">No active assignment</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Right column: live status chip + small assign/unassign pill + 3-dot menu -->
                    <div class="flex items-center gap-2 shrink-0">
                        <!-- Live status chip — painted by the Overview live poller
                             (paintInlineLive) keyed on data-loc-live. Hidden until
                             there's live data for this location. -->
                        <span class="nrl-live-chip hidden" data-loc-live="{{ item.location.id }}"></span>
                        {% if not item.assignment %}
                            <!-- Primary action: visible because the unassigned card
                                 is most likely getting clicked on right after creation -->
                            <button onclick="openAssignModal('{{ item.location.id }}', '{{ item.location.location_type or 'sound' }}')"
                                    class="text-xs px-3 py-1 rounded-full bg-seismo-orange text-white hover:bg-seismo-navy">
                                Assign
                            </button>
                        {% endif %}

                        <!-- Three-dot kebab menu -->
                        <div class="relative inline-block location-menu-wrapper">
                            <button onclick="toggleLocationMenu(event, this)"
                                    class="p-1.5 rounded-full text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
                                    title="More actions">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z"/>
                                </svg>
                            </button>

                            <div class="location-menu hidden absolute right-0 mt-1 w-40 z-30 bg-white dark:bg-slate-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg py-1">
                                {% if item.assignment %}
                                    <button onclick="unassignUnit('{{ item.assignment.id }}'); closeAllLocationMenus()"
                                            class="w-full text-left px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                                        Unassign
                                    </button>
                                {% endif %}
                                <button data-location='{{ {"id": item.location.id, "name": item.location.name, "description": item.location.description, "address": item.location.address, "coordinates": item.location.coordinates, "location_type": item.location.location_type} | tojson }}'
                                        onclick="openEditLocationModal(this); closeAllLocationMenus()"
                                        class="w-full text-left px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                                    Edit
                                </button>
                                <button data-loc-id="{{ item.location.id }}"
                                        data-loc-name="{{ item.location.name | e }}"
                                        onclick="openRemoveLocationModal(this.dataset.locId, this.dataset.locName); closeAllLocationMenus()"
                                        class="w-full text-left px-3 py-1.5 text-sm text-amber-700 dark:text-amber-300 hover:bg-amber-50 dark:hover:bg-amber-900/20"
                                        title="Mark as no longer monitored — preserves events">
                                    Remove
                                </button>
                                <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
                                <button onclick="deleteLocation('{{ item.location.id }}'); closeAllLocationMenus()"
                                        class="w-full text-left px-3 py-1.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
                                        title="Permanently delete — only allowed if no history">
                                    Delete
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}

{# ─── Removed locations (collapsed by default) ─── #}
{% if removed_locations %}
    <details class="mt-6 group" {% if not active_locations %}open{% endif %}>
        <summary class="cursor-pointer text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 select-none list-none">
            <span class="inline-flex items-center gap-2">
                <svg class="w-4 h-4 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
                Removed locations
                <span class="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">{{ removed_locations | length }}</span>
            </span>
            <p class="ml-6 mt-1 text-xs text-gray-400 dark:text-gray-500">Historical only — events stay attributed, but no new assignments or schedules can be created here.</p>
        </summary>

        <div class="space-y-3 mt-3">
            {% for item in removed_locations %}
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-slate-900/30 opacity-75">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center gap-2 flex-wrap">
                                <a href="/projects/{{ project.id }}/nrl/{{ item.location.id }}"
                                   class="font-semibold text-gray-700 dark:text-gray-300 hover:text-seismo-orange truncate">
                                    {{ item.location.name }}
                                </a>
                                <span class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 font-semibold">
                                    Removed
                                </span>
                                <span class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ item.location.removed_at.strftime('%Y-%m-%d') if item.location.removed_at else '—' }}
                                </span>
                            </div>
                            {% if item.location.removal_reason %}
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 italic">"{{ item.location.removal_reason }}"</p>
                            {% endif %}
                            {% if item.location.description %}
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ item.location.description }}</p>
                            {% endif %}
                            {% if item.location.address %}
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ item.location.address }}</p>
                            {% endif %}
                        </div>

                        <div class="flex items-center gap-2">
                            <button data-loc-id="{{ item.location.id }}"
                                    data-loc-name="{{ item.location.name | e }}"
                                    onclick="restoreLocation(this.dataset.locId, this.dataset.locName)"
                                    class="text-xs px-3 py-1 rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 hover:bg-green-200"
                                    title="Restore to active monitoring">
                                Restore
                            </button>
                        </div>
                    </div>

                    <div class="mt-3 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap gap-4">
                        {% if item.event_count is defined and item.location.location_type == 'vibration' %}
                            <span>{{ "{:,}".format(item.event_count) }} historical event{{ '' if item.event_count == 1 else 's' }}</span>
                        {% else %}
                            <span>Historical sessions: {{ item.session_count }}</span>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </details>
{% endif %}

{% endif %}

<!-- Drag-and-drop + menu handlers, scoped to this partial (re-defined
     on every htmx swap, which is harmless — function declarations
     overwrite). -->
<script>
let _dragSrcCard = null;

function onLocationDragStart(e) {
    _dragSrcCard = e.currentTarget;
    e.dataTransfer.effectAllowed = 'move';
    // Required for Firefox to start the drag.
    e.dataTransfer.setData('text/plain', _dragSrcCard.dataset.locationId);
    e.currentTarget.classList.add('opacity-40');
}

function onLocationDragOver(e) {
    if (!_dragSrcCard || e.currentTarget === _dragSrcCard) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    e.currentTarget.classList.add('ring-2', 'ring-seismo-orange');
}

function onLocationDragLeave(e) {
    e.currentTarget.classList.remove('ring-2', 'ring-seismo-orange');
}

function onLocationDrop(e) {
    e.preventDefault();
    e.currentTarget.classList.remove('ring-2', 'ring-seismo-orange');
    if (!_dragSrcCard || e.currentTarget === _dragSrcCard) return;

    const list = document.getElementById('active-locations-list');
    if (!list) return;

    // Drop AFTER the target by default; if mouse is in top half, drop BEFORE.
    const rect = e.currentTarget.getBoundingClientRect();
    const dropBefore = (e.clientY - rect.top) < rect.height / 2;
    if (dropBefore) {
        list.insertBefore(_dragSrcCard, e.currentTarget);
    } else {
        list.insertBefore(_dragSrcCard, e.currentTarget.nextSibling);
    }

    _persistLocationOrder(list);
}

function onLocationDragEnd(e) {
    e.currentTarget.classList.remove('opacity-40');
    document.querySelectorAll('.location-card').forEach(c => {
        c.classList.remove('ring-2', 'ring-seismo-orange');
    });
    _dragSrcCard = null;
}

async function _persistLocationOrder(list) {
    const projectId = list.dataset.projectId;
    const ids = Array.from(list.querySelectorAll('.location-card'))
        .map(c => c.dataset.locationId);
    try {
        const r = await fetch(`/api/projects/${projectId}/locations/reorder`, {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify({ location_ids: ids }),
        });
        if (!r.ok) {
            const err = await r.json().catch(() => ({ detail: 'HTTP ' + r.status }));
            throw new Error(err.detail || 'reorder failed');
        }
    } catch (err) {
        console.error('Failed to save new order:', err);
        if (typeof showToast === 'function') showToast('Failed to save new order: ' + err.message, 'error');
    }
}

// ── Three-dot menu ─────────────────────────────────────────────────
function toggleLocationMenu(e, btn) {
    e.stopPropagation();
    const menu = btn.parentElement.querySelector('.location-menu');
    const wasOpen = !menu.classList.contains('hidden');
    closeAllLocationMenus();
    if (!wasOpen) {
        menu.classList.remove('hidden');
    }
}

function closeAllLocationMenus() {
    document.querySelectorAll('.location-menu').forEach(m => m.classList.add('hidden'));
}

// Close menus on outside click (only register once globally).
if (!window._locationMenuOutsideClickRegistered) {
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.location-menu-wrapper')) closeAllLocationMenus();
    });
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closeAllLocationMenus();
    });
    window._locationMenuOutsideClickRegistered = true;
}
</script>
