{{define "settings"}}
  {{template "base" .}}
{{end}}

{{define "settings_content"}}
<div class="max-w-6xl mx-auto p-6">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-white mb-2">Settings</h1>
        <p class="text-gray-400">Configure your {{.app_name}} instance</p>
    </div>

    <!-- Settings Sections -->
    <div class="space-y-8">
        <!-- Image Storage Settings -->
        <div class="bg-gray-800 rounded-lg p-6">
            <h2 class="text-xl font-semibold text-white mb-4">
                <i class="fas fa-images mr-2"></i>Image Storage
            </h2>
            <p class="text-gray-400 mb-6">Configure how images are stored and referenced in your notes</p>
            
            <form id="image-storage-form" class="space-y-6">
                <!-- Storage Mode -->
                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-3">Storage Mode</label>
                    <div class="space-y-3">
                        <label class="flex items-start space-x-3">
                            <input type="radio" name="storage_mode" value="1" class="mt-1 text-blue-600">
                            <div>
                                <div class="text-white font-medium">Root Directory</div>
                                <div class="text-sm text-gray-400">Store images directly in the notes root directory</div>
                            </div>
                        </label>
                        <label class="flex items-start space-x-3">
                            <input type="radio" name="storage_mode" value="2" class="mt-1 text-blue-600">
                            <div>
                                <div class="text-white font-medium">Specific Folder</div>
                                <div class="text-sm text-gray-400">Store all images in a specific folder</div>
                            </div>
                        </label>
                        <label class="flex items-start space-x-3">
                            <input type="radio" name="storage_mode" value="3" class="mt-1 text-blue-600">
                            <div>
                                <div class="text-white font-medium">Same as Note</div>
                                <div class="text-sm text-gray-400">Store images in the same directory as the note</div>
                            </div>
                        </label>
                        <label class="flex items-start space-x-3">
                            <input type="radio" name="storage_mode" value="4" class="mt-1 text-blue-600">
                            <div>
                                <div class="text-white font-medium">Subfolder of Note</div>
                                <div class="text-sm text-gray-400">Store images in a subfolder within the note's directory</div>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Storage Path (for mode 2) -->
                <div id="storage-path-section" class="hidden">
                    <label for="storage_path" class="block text-sm font-medium text-gray-300 mb-2">
                        Storage Path
                    </label>
                    <input type="text" id="storage_path" name="storage_path"
                           class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="e.g., images">
                </div>

                <!-- Subfolder Name (for mode 4) -->
                <div id="subfolder-section" class="hidden">
                    <label for="subfolder_name" class="block text-sm font-medium text-gray-300 mb-2">
                        Subfolder Name
                    </label>
                    <input type="text" id="subfolder_name" name="subfolder_name"
                           class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="e.g., attached">
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-save mr-2"></i>Save Image Settings
                    </button>
                </div>
            </form>
        </div>

        <!-- Notes Directory Settings -->
        <div class="bg-gray-800 rounded-lg p-6">
            <h2 class="text-xl font-semibold text-white mb-4">
                <i class="fas fa-folder mr-2"></i>Notes Directory
            </h2>
            <p class="text-gray-400 mb-6">Set the root directory where your notes are stored</p>
            
            <form id="notes-dir-form" class="space-y-6">
                <div>
                    <label for="notes_dir" class="block text-sm font-medium text-gray-300 mb-2">
                        Notes Directory Path
                    </label>
                    <input type="text" id="notes_dir" name="notes_dir"
                           class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="/path/to/your/notes">
                    <p class="text-xs text-gray-500 mt-1">Provide the absolute path to your notes directory</p>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-save mr-2"></i>Save Directory Settings
                    </button>
                </div>
            </form>
        </div>

        <!-- File Extensions Settings -->
        <div class="bg-gray-800 rounded-lg p-6">
            <h2 class="text-xl font-semibold text-white mb-4">
                <i class="fas fa-file mr-2"></i>File Extensions
            </h2>
            <p class="text-gray-400 mb-6">Configure which file types are allowed and visible</p>
            
            <form id="file-extensions-form" class="space-y-6">
                <div>
                    <label for="allowed_image_extensions" class="block text-sm font-medium text-gray-300 mb-2">
                        Allowed Image Extensions
                    </label>
                    <input type="text" id="allowed_image_extensions" name="allowed_image_extensions"
                           class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="jpg, jpeg, png, webp, gif">
                    <p class="text-xs text-gray-500 mt-1">Comma-separated list of image file extensions</p>
                </div>

                <div>
                    <label for="allowed_file_extensions" class="block text-sm font-medium text-gray-300 mb-2">
                        Allowed File Extensions
                    </label>
                    <input type="text" id="allowed_file_extensions" name="allowed_file_extensions"
                           class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="txt, pdf, html, json, yaml, yml, conf, csv">
                    <p class="text-xs text-gray-500 mt-1">Comma-separated list of viewable file extensions</p>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" id="images_hide" name="images_hide" 
                           class="h-4 w-4 text-blue-600 rounded border-gray-600 bg-gray-700">
                    <label for="images_hide" class="ml-2 text-sm text-gray-300">
                        Hide images from main folder view
                    </label>
                </div>

                <!-- Visibility: Left Navigation (Tree) -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div>
                        <div class="text-sm font-medium text-gray-300 mb-2">Left navigation (tree) visibility</div>
                        <label class="flex items-center space-x-2">
                            <input type="checkbox" id="show_images_in_tree" name="show_images_in_tree" class="h-4 w-4 text-blue-600 rounded border-gray-600 bg-gray-700">
                            <span class="text-sm text-gray-300">Show images in left navigation</span>
                        </label>
                        <label class="flex items-center space-x-2 mt-2">
                            <input type="checkbox" id="show_files_in_tree" name="show_files_in_tree" class="h-4 w-4 text-blue-600 rounded border-gray-600 bg-gray-700">
                            <span class="text-sm text-gray-300">Show other allowed files in left navigation</span>
                        </label>
                    </div>
                    <div>
                        <div class="text-sm font-medium text-gray-300 mb-2">Folder view visibility</div>
                        <label class="flex items-center space-x-2">
                            <input type="checkbox" id="show_images_in_folder" name="show_images_in_folder" class="h-4 w-4 text-blue-600 rounded border-gray-600 bg-gray-700">
                            <span class="text-sm text-gray-300">Show images in folder view</span>
                        </label>
                        <label class="flex items-center space-x-2 mt-2">
                            <input type="checkbox" id="show_files_in_folder" name="show_files_in_folder" class="h-4 w-4 text-blue-600 rounded border-gray-600 bg-gray-700">
                            <span class="text-sm text-gray-300">Show other allowed files in folder view</span>
                        </label>
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-save mr-2"></i>Save Extension Settings
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{{end}}

{{define "settings_scripts"}}
<script>
    // Load current settings
    function loadSettings() {
        // Load image storage settings
        fetch('/settings/image_storage')
        .then(response => response.json())
        .then(data => {
            document.querySelector(`input[name="storage_mode"][value="${data.mode}"]`).checked = true;
            document.getElementById('storage_path').value = data.path || '';
            document.getElementById('subfolder_name').value = data.subfolder || '';
            toggleStorageOptions();
        })
        .catch(error => console.error('Error loading image storage settings:', error));

        // Load notes directory settings
        fetch('/settings/notes_dir')
        .then(response => response.json())
        .then(data => {
            document.getElementById('notes_dir').value = data.notes_dir || '';
        })
        .catch(error => console.error('Error loading notes directory settings:', error));

        // Load file extensions settings
        fetch('/settings/file_extensions')
        .then(response => response.json())
        .then(data => {
            document.getElementById('allowed_image_extensions').value = data.allowed_image_extensions || '';
            document.getElementById('allowed_file_extensions').value = data.allowed_file_extensions || '';
            document.getElementById('images_hide').checked = data.images_hide || false;
            // New visibility flags
            document.getElementById('show_images_in_tree').checked = !!data.show_images_in_tree;
            document.getElementById('show_files_in_tree').checked = !!data.show_files_in_tree;
            document.getElementById('show_images_in_folder').checked = !!data.show_images_in_folder;
            document.getElementById('show_files_in_folder').checked = !!data.show_files_in_folder;
        })
        .catch(error => console.error('Error loading file extensions settings:', error));
    }

    // Toggle storage mode options
    function toggleStorageOptions() {
        const mode = document.querySelector('input[name="storage_mode"]:checked')?.value;
        const pathSection = document.getElementById('storage-path-section');
        const subfolderSection = document.getElementById('subfolder-section');

        pathSection.classList.toggle('hidden', mode !== '2');
        subfolderSection.classList.toggle('hidden', mode !== '4');
    }

    // Event listeners
    document.addEventListener('change', function(e) {
        if (e.target.name === 'storage_mode') {
            toggleStorageOptions();
        }
    });

    // Image storage form
    document.getElementById('image-storage-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        fetch('/settings/image_storage', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Image storage settings saved successfully', 'success');
                if (data.reload_required) {
                    setTimeout(() => window.location.reload(), 1500);
                }
            } else {
                throw new Error(data.error || 'Failed to save settings');
            }
        })
        .catch(error => {
            showNotification('Error: ' + error.message, 'error');
        });
    });

    // Notes directory form
    document.getElementById('notes-dir-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        fetch('/settings/notes_dir', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Notes directory settings saved successfully', 'success');
                if (data.reload_required) {
                    setTimeout(() => window.location.reload(), 1500);
                }
            } else {
                throw new Error(data.error || 'Failed to save settings');
            }
        })
        .catch(error => {
            showNotification('Error: ' + error.message, 'error');
        });
    });

    // File extensions form
    document.getElementById('file-extensions-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        fetch('/settings/file_extensions', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('File extension settings saved successfully', 'success');
                if (data.reload_required) {
                    setTimeout(() => window.location.reload(), 1500);
                }
            } else {
                throw new Error(data.error || 'Failed to save settings');
            }
        })
        .catch(error => {
            showNotification('Error: ' + error.message, 'error');
        });
    });

    // Load settings on page load
    document.addEventListener('DOMContentLoaded', loadSettings);
</script>
{{end}}