{% comment %}
Command Center Modal Template
Implements Story 2.4: Global Command Center (Ctrl+K)

Include this in your base.html:
{% include 'core/partials/command_center.html' %}
{% endcomment %}

<div x-data="commandCenter()" x-show="open" x-cloak @keydown.escape.window="close()"
    class="fixed inset-0 z-50 overflow-y-auto">

    <!-- Backdrop -->
    <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="close()"
        class="fixed inset-0 bg-black/50 backdrop-blur-sm"></div>

    <!-- Modal -->
    <div class="fixed inset-x-0 top-24 mx-auto max-w-xl">
        <div x-show="open" x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95" class="bg-white rounded-xl shadow-2xl overflow-hidden">

            <!-- Search Input -->
            <div class="flex items-center px-4 border-b border-gray-200">
                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <input x-ref="searchInput" x-model="query" @input.debounce.200ms="search()"
                    @keydown.up.prevent="navigateUp()" @keydown.down.prevent="navigateDown()"
                    @keydown.enter.prevent="select()" type="text" placeholder="Search actions, pages, or data..."
                    class="w-full px-4 py-4 text-lg focus:outline-none">
                <kbd
                    class="hidden sm:inline-flex items-center px-2 py-1 text-xs font-medium text-gray-400 bg-gray-100 rounded">
                    ESC
                </kbd>
            </div>

            <!-- Results -->
            <div class="max-h-96 overflow-y-auto">
                <template x-if="loading">
                    <div class="p-4 text-center text-gray-500">
                        <svg class="animate-spin h-5 w-5 mx-auto" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
                                fill="none" />
                            <path class="opacity-75" fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                        </svg>
                    </div>
                </template>

                <template x-if="!loading && results.length === 0">
                    <div class="p-4 text-center text-gray-500">
                        No results found
                    </div>
                </template>

                <ul class="divide-y divide-gray-100">
                    <template x-for="(item, index) in results" :key="index">
                        <li @click="select(index)" @mouseenter="selectedIndex = index"
                            :class="{ 'bg-indigo-50': selectedIndex === index }"
                            class="px-4 py-3 flex items-center cursor-pointer hover:bg-gray-50 transition-colors">
                            <span class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-100 mr-3">
                                <i :class="item.icon || 'fas fa-search'" class="text-gray-600"></i>
                            </span>
                            <div class="flex-1">
                                <span x-text="item.name" class="font-medium text-gray-900"></span>
                                <span x-show="item.type" x-text="item.type"
                                    class="ml-2 text-xs text-gray-400 uppercase"></span>
                            </div>
                            <span x-show="selectedIndex === index" class="text-indigo-600">
                                <svg class="w-4 h-4" 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>
                            </span>
                        </li>
                    </template>
                </ul>
            </div>

            <!-- Footer -->
            <div
                class="px-4 py-2 bg-gray-50 border-t border-gray-200 flex items-center justify-between text-xs text-gray-500">
                <div class="flex items-center space-x-4">
                    <span><kbd class="px-1.5 py-0.5 bg-gray-200 rounded">↑↓</kbd> Navigate</span>
                    <span><kbd class="px-1.5 py-0.5 bg-gray-200 rounded">↵</kbd> Select</span>
                    <span><kbd class="px-1.5 py-0.5 bg-gray-200 rounded">esc</kbd> Close</span>
                </div>
                <span>Press <kbd class="px-1.5 py-0.5 bg-gray-200 rounded">Ctrl+K</kbd> anytime</span>
            </div>
        </div>
    </div>
</div>