<!-- Browse modal for file selection -->

<div x-show="showBrowseModal" @keydown.escape.window="closeBrowseModal()" 
     class="fixed inset-0 z-[50] pt-12 lg:pt-0">
    <!-- Backdrop (below content, allows clicks to close) -->
    <div @click="closeBrowseModal()" class="absolute inset-0 bg-black bg-opacity-75 lg:bg-opacity-75"></div>
    
    <!-- Close button (top right, above backdrop) -->
    <button 
        @click="closeBrowseModal()"
        class="absolute top-4 right-4 z-[51] bg-gray-700 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-xl min-h-[2.5rem] touch-manipulation lg:top-4"
    >✕</button>
    
    <!-- Modal content - above backdrop, full screen on mobile, centered on desktop -->
    <div class="absolute inset-0 pt-12 lg:pt-0 overflow-auto p-4 z-[51]">
        <div class="max-w-2xl mx-auto h-full flex flex-col lg:bg-gray-800 lg:rounded-lg lg:p-6 lg:max-h-[80vh] lg:border lg:border-gray-600 lg:my-auto">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold">Open File</h2>
                <div class="text-sm text-gray-400">
                    Current: <span x-text="browsePath || '/'"></span>
                </div>
            </div>
        
        <!-- Directory listing -->
        <div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 p-2" style="min-height: 300px;">
            <!-- Parent directory -->
            <div 
                x-show="browsePath"
                @click="navigateBrowseParent()"
                class="flex items-center gap-2 p-2 hover:bg-gray-600 rounded cursor-pointer text-gray-300"
            >
                <span class="text-lg">📁</span>
                <span>..</span>
            </div>
            
            <!-- Directories -->
            <template x-for="dir in browseDirectories" :key="'dir-' + dir.path">
                <div 
                    @click="navigateBrowseDirectory(dir.path)"
                    class="flex items-center gap-2 p-2 hover:bg-gray-600 rounded cursor-pointer"
                >
                    <span class="text-lg">📁</span>
                    <span x-text="dir.name"></span>
                </div>
            </template>
            
            <!-- Files -->
            <template x-for="file in browseFiles" :key="'file-' + file.path">
                <div 
                    @click="selectBrowseFile(file)"
                    @dblclick="openBrowseFile(file)"
                    class="flex items-center gap-2 p-2 hover:bg-gray-600 rounded cursor-pointer"
                    :class="{ 'bg-blue-600': browseSelectedPath === file.path }"
                >
                    <span class="text-lg" x-text="file.type === 'ora' ? '📄' : '🖼️'"></span>
                    <span x-text="file.name"></span>
                    <span class="text-xs text-gray-400 ml-auto uppercase" x-text="file.type"></span>
                </div>
            </template>
            
            <!-- Empty state -->
            <div x-show="browseDirectories.length === 0 && browseFiles.length === 0" class="text-gray-400 text-center py-8">
                No PNG or ORA files in this directory
            </div>
        </div>
        
        <!-- Actions -->
        <div class="flex gap-4 justify-end lg:flex lg:justify-end flex-col">
            <button 
                @click="openSelectedFile()"
                :disabled="!browseSelectedPath"
                class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
            >
                Open Selected
            </button>
            <button @click="closeBrowseModal()" class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation">Cancel</button>
        </div>
        </div>
    </div>
</div>
