{% extends "base/layouts.html" %}

{% block content %}
<div class="flex flex-col h-screen bg-white dark:bg-neutral-900 text-sm">
    <!-- Fixed Connection Header -->
    <div class="p-2 border-b border-neutral-200 dark:border-neutral-700">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-share-nodes text-neutral-500 dark:text-neutral-400"></i>
                <h2 class="font-semibold text-neutral-900 dark:text-white">SMB Browser</h2>
            </div>
            <div class="flex items-center gap-1">
                <button id="toggle-downloads" type="button" 
                    class="w-8 h-8 flex items-center justify-center text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white border border-neutral-200 dark:border-neutral-700 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-700" title="Downloads">
                    <i class="fas fa-download fa-sm"></i>
                </button>
                <button id="toggle-search" type="button" 
                    class="w-8 h-8 flex items-center justify-center text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white border border-neutral-200 dark:border-neutral-700 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-700" title="Search">
                    <i class="fas fa-search fa-sm"></i>
                </button>
                <div id="connect-as-form" class="hidden flex items-center gap-1">
                    <input type="text" id="smb-username" 
                        placeholder="domain\\username" 
                        class="rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500 outline-none" style="width: 150px;">
                    <select id="smb-auth-type" class="rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500 outline-none">
                        <option value="password">Password</option>
                        <option value="nthash">NT Hash</option>
                        <option value="aeskey">AES Key</option>
                    </select>
                    <input type="password" id="smb-password" 
                        placeholder="Password" 
                        class="smb-auth-input smb-auth-password rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500 outline-none" style="width: 120px;">
                    <input type="text" id="smb-nthash" 
                        placeholder="NT Hash" 
                        class="smb-auth-input smb-auth-nthash rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500 outline-none hidden" style="width: 140px;">
                    <input type="text" id="smb-aeskey" 
                        placeholder="AES Key" 
                        class="smb-auth-input smb-auth-aeskey rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500 outline-none hidden" style="width: 180px;">
                </div>
                <input type="text" id="smb-computer" 
                    placeholder="Computer name or IP" 
                    class="rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500 outline-none" style="width: 180px;">
                <button id="smb-connect-as-button" type="button" 
                    class="px-2 py-1 text-sm font-medium text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white border border-neutral-200 dark:border-neutral-700 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-700">
                    <i class="fas fa-user-shield fa-sm mr-1"></i>
                    Connect As
                </button>
                <button id="smb-connect-button" type="button" 
                    class="px-2 py-1 text-sm font-medium text-white dark:text-black bg-neutral-900 dark:bg-yellow-500 rounded-md hover:bg-neutral-800 dark:hover:bg-yellow-600">
                    <i class="fas fa-plug fa-sm mr-1"></i>
                    Connect
                </button>
                <button id="smb-refresh-button" type="button" 
                    class="px-2 py-1 text-sm font-medium text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white border border-neutral-200 dark:border-neutral-700 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-700">
                    <i class="fas fa-sync-alt fa-sm"></i>
                </button>
                <button id="smb-add-share-button" type="button" 
                    class="px-2 py-1 text-sm font-medium text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 border border-green-200 dark:border-green-700 rounded-md hover:bg-green-50 dark:hover:bg-green-900/20" title="Add Share">
                    <i class="fas fa-plus-circle fa-sm mr-1"></i>
                    Add Share
                </button>
            </div>
        </div>
        <div id="smb-connection-status" class="mt-1 text-sm"></div>
    </div>

    <!-- Fixed Tabs and Headers -->
    <div class="bg-white dark:bg-neutral-900">
        <!-- PC Tabs -->
        <div class="border-b border-neutral-200 dark:border-neutral-700">
            <div id="pc-tabs" class="flex overflow-x-auto scrollbar-thin text-xs">
                <!-- Tabs will be dynamically added here -->
            </div>
        </div>
    </div>

    <!-- Scrollable Content Area -->
    <div class="flex-1 min-h-0 flex flex-col relative">
        <div id="sticky-header-container" 
             class="sticky top-0 z-20 bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-700 px-2 py-1 text-sm flex items-center gap-1 flex-wrap">
            <!-- Sticky headers will be populated here by JS -->
        </div>

        <!-- Table Headers - MOVED HERE -->
        <div id="smb-table-headers" class="sticky z-10 bg-white dark:bg-neutral-900 px-2 py-1 border-b border-neutral-200 dark:border-neutral-700 grid grid-cols-12 gap-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">
            <div class="col-span-6">Name</div>
            <div class="col-span-1">Size</div>
            <div class="col-span-2">Created</div>
            <div class="col-span-2">Modified</div>
            <div class="col-span-1 text-right">Actions</div>
        </div>
        
        <div id="pc-views" class="flex-1 overflow-y-auto scrollbar p-1">
            <!-- Each PC view will be dynamically added here -->
        </div>
    </div>

    <!-- File Viewer Panel -->
    <div id="file-viewer-panel" class="fixed top-0 right-0 bottom-0 w-2/5 bg-white dark:bg-neutral-900 border-l border-neutral-300 dark:border-neutral-700 shadow-lg transform transition-transform duration-300 ease-in-out translate-x-full z-50 hidden">
        <div class="flex flex-col h-full">
            <!-- Header -->
            <div class="flex items-center justify-between gap-2 p-2 border-b sticky top-0 bg-white dark:bg-neutral-900 z-10 border-neutral-200 dark:border-neutral-700">
                <div class="flex items-center gap-2 min-w-0">
                    <i id="file-viewer-icon" class="fas fa-file-alt text-blue-500 dark:text-yellow-500"></i>
                    <h2 id="file-viewer-title" class="text-base font-semibold text-neutral-900 dark:text-white truncate">File Content</h2>
                </div>
                <div class="flex items-center gap-2">
                    <button id="file-viewer-download" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 p-1" title="Download">
                        <i class="fas fa-download"></i>
                    </button>
                    <button id="close-file-viewer" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 p-1">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>

            <!-- Content -->
            <div class="flex-1 overflow-auto relative">
                <!-- Loading Spinner -->
                <div id="file-viewer-spinner" class="hidden absolute inset-0 bg-neutral-900/30 dark:bg-black/50 flex items-center justify-center z-20">
                    <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 dark:border-yellow-500"></div>
                </div>

                <!-- Image View -->
                <div id="image-viewer" class="hidden h-full flex items-center justify-center p-2 bg-neutral-100 dark:bg-neutral-800">
                    <img id="image-content" class="max-w-full max-h-full object-contain" alt="File preview">
                </div>

                <!-- PDF View -->
                <div id="pdf-viewer" class="hidden h-full flex flex-col">
                    <div class="flex items-center justify-between p-1 border-b border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-sm">
                        <div class="flex items-center gap-1">
                            <button id="pdf-prev" class="px-1.5 py-0.5 rounded text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <span id="pdf-page-num" class="text-neutral-600 dark:text-neutral-300">Page 1 of 1</span>
                            <button id="pdf-next" class="px-1.5 py-0.5 rounded text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                        <div class="flex items-center gap-1">
                            <button id="pdf-zoom-out" class="px-1.5 py-0.5 rounded text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
                                <i class="fas fa-search-minus"></i>
                            </button>
                            <span id="pdf-zoom-level" class="text-neutral-600 dark:text-neutral-300">100%</span>
                            <button id="pdf-zoom-in" class="px-1.5 py-0.5 rounded text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
                                <i class="fas fa-search-plus"></i>
                            </button>
                        </div>
                    </div>
                    <div id="pdf-container" class="flex-1 overflow-auto bg-white dark:bg-neutral-800 p-2">
                        <canvas id="pdf-canvas" class="mx-auto shadow-md"></canvas>
                    </div>
                </div>

                <!-- Text View -->
                <div id="text-viewer" class="hidden h-full">
                    <pre id="text-content" class="p-2 font-mono text-sm text-neutral-900 dark:text-white whitespace-pre-wrap h-full overflow-auto scrollbar"></pre>
                </div>
            </div>

            <!-- Footer -->
            <div id="file-viewer-footer" class="p-2 border-t border-neutral-200 dark:border-neutral-700">
                <div class="flex items-center justify-between text-sm text-neutral-500 dark:text-neutral-400">
                    <span id="file-size">--</span>
                    <span id="file-type">--</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Downloads Panel -->
    <div id="downloads-panel" class="fixed top-0 right-0 bottom-0 w-80 bg-white dark:bg-neutral-900 border-l border-neutral-300 dark:border-neutral-700 shadow-xl transform transition-transform duration-300 ease-in-out translate-x-full z-50 hidden">
        <div class="flex flex-col h-full">
            <!-- Header -->
            <div class="flex items-center justify-between gap-2 p-2 border-b sticky top-0 bg-white dark:bg-neutral-900 z-10 border-neutral-200 dark:border-neutral-700">
                <div class="flex items-center gap-2">
                    <i class="fas fa-download text-blue-500 dark:text-yellow-500"></i>
                    <h2 class="text-base font-semibold text-neutral-900 dark:text-white">Downloads</h2>
                </div>
                <button id="close-downloads-panel" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 p-1">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- Downloads List -->
            <div class="flex-1 overflow-auto p-2 scrollbar">
                <div id="downloads-list" class="space-y-2">
                    <!-- Downloads will be dynamically added here -->
                </div>
            </div>
        </div>
    </div>

    <!-- Search Panel -->
    <div id="search-panel" class="fixed top-0 right-0 bottom-0 w-1/3 bg-white dark:bg-neutral-900 border-l border-neutral-300 dark:border-neutral-700 shadow-xl transform transition-transform duration-300 ease-in-out translate-x-full z-50 hidden">
        <div class="flex flex-col h-full">
            <!-- Header -->
            <div class="flex items-center justify-between gap-2 p-2 border-b sticky top-0 bg-white dark:bg-neutral-900 z-10 border-neutral-200 dark:border-neutral-700">
                <div class="flex items-center gap-2">
                    <i class="fas fa-search text-blue-500 dark:text-yellow-500"></i>
                    <h2 class="text-base font-semibold text-neutral-900 dark:text-white">Search</h2>
                </div>
                <div class="flex items-center gap-2">
                    <button id="export-search-csv" class="hidden px-2 py-1 text-sm font-medium text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white border border-neutral-200 dark:border-neutral-700 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-700">
                        <i class="fas fa-file-csv fa-sm mr-1"></i>
                        Export CSV
                    </button>
                    <button id="close-search-panel" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 p-1">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>

            <!-- Search Controls -->
            <div class="p-2 border-b border-neutral-200 dark:border-neutral-700">
                <div class="space-y-2">
                    <div class="flex flex-wrap items-center gap-2 text-sm mb-2">
                        <div class="flex items-center gap-1 flex-1">
                            <label class="text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Host:</label>
                            <select id="search-host" class="flex-1 rounded text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500 px-2 py-1">
                                <!-- Will be populated via JavaScript -->
                            </select>
                        </div>
                        <div class="flex items-center gap-1 flex-1">
                            <label class="text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Path:</label>
                            <input type="text" id="search-path" placeholder="share\path\to\search (e.g. C$\Users)" class="flex-1 rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500 outline-none">
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <input type="text" id="search-query" placeholder="Search pattern or regex" class="flex-1 rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500 outline-none">
                        <button id="search-button" class="px-2 py-1 text-sm font-medium text-white dark:text-black bg-neutral-900 dark:bg-yellow-500 rounded-md hover:bg-neutral-800 dark:hover:bg-yellow-600">
                            <i class="fas fa-search fa-sm mr-1"></i>
                            Search
                        </button>
                    </div>
                    <div class="flex flex-wrap items-center gap-2 text-sm">
                        <label class="flex items-center gap-1 text-neutral-700 dark:text-neutral-300">
                            <input type="checkbox" id="search-content" class="rounded text-blue-500 dark:text-yellow-500 border-neutral-300 dark:border-neutral-600 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500">
                            <span>Content Search</span>
                        </label>
                        <label class="flex items-center gap-1 text-neutral-700 dark:text-neutral-300">
                            <input type="checkbox" id="search-regex" class="rounded text-blue-500 dark:text-yellow-500 border-neutral-300 dark:border-neutral-600 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500">
                            <span>Use Regex</span>
                        </label>
                        <label class="flex items-center gap-1 text-neutral-700 dark:text-neutral-300">
                            <input type="checkbox" id="search-case-sensitive" class="rounded text-blue-500 dark:text-yellow-500 border-neutral-300 dark:border-neutral-600 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500">
                            <span>Match Case</span>
                        </label>
                        <label class="flex items-center gap-1 text-neutral-700 dark:text-neutral-300">
                            <input type="checkbox" id="search-cred-hunt" class="rounded text-blue-500 dark:text-yellow-500 border-neutral-300 dark:border-neutral-600 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500">
                            <span>Cred Hunt</span>
                        </label>
                    </div>
                    <div class="flex flex-wrap items-center gap-2 text-sm">
                        <label class="flex items-center gap-1 text-neutral-700 dark:text-neutral-300">
                            <span>Depth:</span>
                            <select id="search-depth" class="rounded text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3" selected>3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </label>
                        <label class="flex items-center gap-1 text-neutral-700 dark:text-neutral-300">
                            <span>Type:</span>
                            <select id="search-item-type" class="rounded text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800 focus:ring-1 focus:ring-blue-500 dark:focus:ring-yellow-500">
                                <option value="all" selected>All Items</option>
                                <option value="files">Files Only</option>
                                <option value="directories">Directories Only</option>
                            </select>
                        </label>
                        <button id="search-clear" class="px-1.5 py-0.5 text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white border border-neutral-200 dark:border-neutral-700 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-700">
                            <i class="fas fa-times fa-sm mr-1"></i>
                            Clear
                        </button>
                    </div>
                </div>
            </div>

            <!-- Search Results -->
            <div class="flex-1 overflow-auto scrollbar">
                <div id="search-status" class="p-2 text-sm text-neutral-500 dark:text-neutral-400"></div>
                <div id="search-results" class="p-2 space-y-2">
                    <!-- Search results will be dynamically added here -->
                </div>
            </div>
        </div>
    </div>

    <!-- Properties Panel -->
    <div id="properties-panel" class="fixed top-0 right-0 bottom-0 w-96 bg-white dark:bg-neutral-900 border-l border-neutral-300 dark:border-neutral-700 shadow-xl transform transition-transform duration-300 ease-in-out translate-x-full z-50 hidden">
        <div class="flex flex-col h-full">
            <!-- Header -->
            <div class="flex items-center justify-between gap-2 p-2 border-b sticky top-0 bg-white dark:bg-neutral-900 z-10 border-neutral-200 dark:border-neutral-700">
                <div class="flex items-center gap-2">
                    <i id="properties-icon" class="fas fa-info-circle text-blue-500 dark:text-yellow-500"></i>
                    <h2 id="properties-title" class="text-base font-semibold text-neutral-900 dark:text-white">Properties</h2>
                </div>
                <button id="close-properties-panel" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 p-1">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- Properties Content -->
            <div class="flex-1 overflow-auto p-3">
                <div id="properties-spinner" class="hidden w-full py-4 flex justify-center">
                    <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 dark:border-yellow-500"></div>
                </div>
                
                <div id="properties-content" class="space-y-3">
                    <!-- Name section -->
                    <div>
                        <div class="flex items-center gap-2 mb-1">
                            <i id="properties-item-icon" class="fas fa-file text-blue-500 dark:text-yellow-500"></i>
                            <h3 id="properties-item-name" class="font-medium text-neutral-900 dark:text-white truncate"></h3>
                        </div>
                        <div id="properties-item-path" class="text-xs text-neutral-500 dark:text-neutral-400 break-all"></div>
                    </div>
                    
                    <!-- Basic properties table -->
                    <div>
                        <h4 class="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">General</h4>
                        <table class="w-full text-xs border-collapse">
                            <tbody id="properties-basic-info">
                                <!-- Will be populated by JS -->
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Attributes section -->
                    <div id="properties-attributes-section">
                        <h4 class="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Attributes</h4>
                        <div id="properties-attributes" class="flex flex-wrap gap-1">
                            <!-- Will be populated by JS -->
                        </div>
                    </div>
                    
                    <!-- Extended attributes section -->
                    <div id="properties-extended-section" class="hidden">
                        <h4 class="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Extended Properties</h4>
                        <table class="w-full text-xs border-collapse">
                            <tbody id="properties-extended-info">
                                <!-- Will be populated by JS -->
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Security section -->
                    <div id="properties-security-section" class="hidden">
                        <h4 class="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Security</h4>
                        <div id="properties-security-info">
                            <!-- Will be populated by JS -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Context Menu -->
    <div id="smb-context-menu" class="hidden absolute z-50 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-md shadow-lg py-1 text-sm">
        <!-- Menu items will be populated by JS -->
        <!-- Example item structure:
        <a href="#" class="block px-4 py-1.5 text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-700">Action Name</a>
        <div class="my-1 h-px bg-neutral-200 dark:bg-neutral-700"></div> // Separator
        -->
    </div>
    
    <!-- Rename Modal -->
    <div id="rename-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <!-- Background overlay -->
            <div class="fixed inset-0 bg-black/50 transition-opacity" aria-hidden="true"></div>
            
            <!-- Modal panel -->
            <div class="inline-block align-bottom bg-white dark:bg-neutral-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full mx-4">
                <div class="bg-white dark:bg-neutral-900 px-6 pt-6 pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-pencil-alt text-blue-500 dark:text-blue-300"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full min-w-0">
                            <h3 class="text-lg leading-6 font-medium text-neutral-900 dark:text-white" id="rename-modal-title">
                                Rename Item
                            </h3>
                            <div class="mt-3">
                                <div class="mb-3">
                                    <label class="block text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">
                                        Current location:
                                    </label>
                                    <div class="bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-md px-3 py-2">
                                        <p class="text-sm text-neutral-700 dark:text-neutral-300 font-mono break-all" id="rename-modal-path">
                                            <!-- Path will be filled by JS -->
                                        </p>
                                    </div>
                                </div>
                                <div>
                                    <label for="rename-input" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
                                        New name or path
                                    </label>
                                    <div class="mt-1">
                                        <input type="text" id="rename-input" placeholder="Enter filename or full path (e.g., folder\subfolder\newname.txt)" class="shadow-sm focus:ring-blue-500 dark:focus:ring-yellow-500 focus:border-blue-500 dark:focus:border-yellow-500 block w-full text-sm border-neutral-300 dark:border-neutral-700 rounded-md dark:bg-neutral-800 dark:text-white px-3 py-2 font-mono">
                                    </div>
                                    <p class="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
                                        <i class="fas fa-info-circle mr-1"></i>
                                        <strong>Tip:</strong> Use just a filename to rename, or include path separators (\) to move to a different folder
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-neutral-50 dark:bg-neutral-800 px-6 py-4 sm:flex sm:flex-row-reverse gap-3">
                    <button type="button" id="rename-confirm-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-500 dark:bg-yellow-500 text-base font-medium text-white dark:text-black hover:bg-blue-600 dark:hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-yellow-500 sm:w-auto sm:text-sm transition-colors">
                        <i class="fas fa-check mr-2"></i>
                        Rename
                    </button>
                    <button type="button" id="rename-cancel-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-neutral-300 dark:border-neutral-700 shadow-sm px-4 py-2 bg-white dark:bg-neutral-900 text-base font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-yellow-500 sm:mt-0 sm:w-auto sm:text-sm transition-colors">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/smb.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
{% endblock %}
