{% extends "base.html" %}
{% block title %}Explorer — DriveCore{% endblock %}
{% block page_label %}Explorer{% endblock %}

{% block content %}
<div class="animate-fade-in flex flex-col h-[calc(100vh-64px)] -m-8 lg:-m-12">

    <!-- Header Bar -->
    <div class="flex items-center justify-between gap-4 px-6 py-4 border-b border-[#E5E5EA] dark:border-[#38383A] flex-shrink-0">
        <div>
            <h1 class="text-[20px] font-bold tracking-tight">File Explorer</h1>
        </div>
        <!-- Search -->
        <div class="flex items-center space-x-2 px-4 py-2 rounded-[12px] border transition-colors w-80
            bg-white border-[#E5E5EA] text-[#86868B] shadow-sm
            dark:bg-[#1C1C1E] dark:border-[#38383A]">
            <i data-lucide="search" class="w-4 h-4 flex-shrink-0"></i>
            <input
                type="text"
                id="explorer-search"
                placeholder="Search files..."
                class="bg-transparent border-none outline-none w-full text-[13px] placeholder-[#86868B] text-[#1D1D1F] dark:text-[#F5F5F7]"
                autocomplete="off"
            >
        </div>
    </div>

    <!-- Two-column layout -->
    <div class="flex flex-1 min-h-0">

        <!-- Tree Panel (left, 60%) -->
        <div class="w-[60%] min-w-0 flex flex-col border-r border-[#E5E5EA] dark:border-[#38383A]">
            <div class="px-4 py-3 border-b border-[#E5E5EA] dark:border-[#38383A] flex-shrink-0">
                <div class="flex items-center gap-2">
                    <i data-lucide="folder-tree" class="w-4 h-4 text-[#6366F1]"></i>
                    <span class="text-[13px] font-semibold">File Tree</span>
                    <span id="tree-count" class="text-[11px] text-[#86868B] ml-auto"></span>
                </div>
            </div>
            <div id="tree-container" class="flex-1 overflow-y-auto p-2 custom-scrollbar">
                <div class="flex justify-center py-12"><div class="spinner"></div></div>
            </div>
        </div>

        <!-- Detail Panel (right, 40%) -->
        <div id="detail-panel" class="w-[40%] flex-shrink-0 flex flex-col
            bg-white/50 dark:bg-[#1C1C1E]/50 backdrop-blur-sm">
            <div class="px-4 py-3 border-b border-[#E5E5EA] dark:border-[#38383A] flex-shrink-0">
                <div class="flex items-center gap-2">
                    <i data-lucide="info" class="w-4 h-4 text-[#86868B]"></i>
                    <span class="text-[13px] font-semibold">Details</span>
                    <button onclick="closeDetailPanel()" id="detail-close-btn"
                        class="ml-auto p-1 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 hidden">
                        <i data-lucide="x" class="w-4 h-4 text-[#86868B]"></i>
                    </button>
                </div>
            </div>
            <div id="detail-content" class="flex-1 overflow-y-auto p-5 custom-scrollbar">
                <div class="flex flex-col items-center justify-center h-full text-center">
                    <i data-lucide="mouse-pointer-click" class="w-10 h-10 text-[#C7C7CC] dark:text-[#545456] mb-3"></i>
                    <p class="text-[14px] text-[#86868B]">Select a file to view details</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('explorer-search');
    if (searchInput) {
        searchInput.addEventListener('input', debounce(explorerSearch, 300));
        const query = new URLSearchParams(window.location.search).get('q');
        if (query) {
            searchInput.value = query;
            explorerSearch();
            return;
        }
    }
    loadExplorerTree();
});
</script>
{% endblock %}