{{define "settings"}}
<div class="page-header">
    <h2>Settings</h2>
</div>

<div class="settings-layout">
    <section class="settings-section">
        <h3>Global Settings</h3>
        <form method="post" action="/settings">
            <div class="form-group">
                <label for="refresh_interval">Auto-refresh Interval (seconds)</label>
                <input type="number" id="refresh_interval" name="refresh_interval" min="1" max="300" 
                       value="{{.Data.Settings.RefreshInterval}}">
            </div>

            <div class="form-group checkbox">
                <label>
                    <input type="checkbox" name="auto_refresh_library" value="1" 
                           {{if .Data.Settings.AutoRefreshLibrary}}checked{{end}}>
                    Auto-refresh Library page
                </label>
            </div>

            <div class="form-group checkbox">
                <label>
                    <input type="checkbox" name="auto_refresh_downloads" value="1" 
                           {{if .Data.Settings.AutoRefreshDownloads}}checked{{end}}>
                    Auto-refresh Queue page
                </label>
            </div>

            <div class="form-actions">
                <button type="submit" class="primary">Save Settings</button>
            </div>
        </form>
    </section>

    <section class="settings-section">
        <h3>Theme</h3>
        <div class="theme-selector">
            <form method="post" action="/theme" class="inline">
                <input type="hidden" name="theme" value="light">
                <button type="submit" class="secondary {{if eq .Theme "light"}}active{{end}}">Light</button>
            </form>
            <form method="post" action="/theme" class="inline">
                <input type="hidden" name="theme" value="dark">
                <button type="submit" class="secondary {{if eq .Theme "dark"}}active{{end}}">Dark</button>
            </form>
            <form method="post" action="/theme" class="inline">
                <input type="hidden" name="theme" value="auto">
                <button type="submit" class="secondary {{if eq .Theme "auto"}}active{{end}}">Auto</button>
            </form>
        </div>
    </section>

    <section class="settings-section">
        <h3>Presets</h3>
        
        <div class="presets-list">
            {{range .Data.Presets}}
            <div class="preset-card">
                <div class="preset-header">
                    <h4>{{.Name}} {{if .IsDefault}}<span class="badge">default</span>{{end}}</h4>
                    <details class="delete-overlay">
                        <summary class="button small danger">Delete</summary>
                        <div class="overlay-panel">
                            <p>Are you sure you want to delete preset <strong>{{.Name}}</strong>?</p>
                            <form method="post" action="/settings/presets/{{.ID}}/delete" class="form-actions">
                                <button type="submit" class="danger">Yes, Delete</button>
                            </form>
                        </div>
                    </details>
                </div>

                {{if .Description}}
                <p class="preset-description">{{.Description}}</p>
                {{end}}
                
                <div class="preset-flags">
                    <strong>Effective flags:</strong>
                    <pre>{{presetFlags .}}</pre>
                </div>

                <div class="preset-actions">
                    <details>
                        <summary class="button small"><span class="edit-text">Edit</span><span class="cancel-text">Cancel</span></summary>
                        <form method="post" action="/settings/presets/{{.ID}}" class="edit-form">
                            {{template "preset_form" .}}
                            <div class="form-actions">
                                <button type="submit" class="primary">Update Preset</button>
                            </div>
                        </form>
                    </details>
                </div>
            </div>
            {{else}}
            <p>No presets yet. Create one below.</p>
            {{end}}
        </div>

        <h4>Create Preset</h4>
        <form method="post" action="/settings/presets" class="form-card">
            {{template "preset_form_create" .}}

            <div class="form-actions">
                <button type="submit" class="primary">Create Preset</button>
            </div>
        </form>
    </section>
</div>
{{end}}

{{define "preset_form"}}
    <div class="form-group">
        <label for="name">Name *</label>
        <input type="text" name="name" required 
               value="{{if .}}{{.Name}}{{end}}">
    </div>

    <div class="form-group">
        <label for="description">Description</label>
        <input type="text" name="description" 
               value="{{if .}}{{.Description}}{{end}}">
    </div>

    <div class="form-group checkbox">
        <label>
            <input type="checkbox" name="is_default" value="1" 
                   {{if .}}{{if .IsDefault}}checked{{end}}{{end}}>
            Set as default preset
        </label>
    </div>

    <div class="conditional-section">
        <label>Format Selection</label>
        <div class="radio-group format-mode">
            <label>
                <input type="radio" name="format_mode" value="default" class="conditional-trigger"
                       {{if .}}{{if or (eq .FormatMode "default") (eq .FormatMode "")}}checked{{end}}{{else}}checked{{end}}>
                yt-dlp default
            </label>
            <label>
                <input type="radio" name="format_mode" value="preset" class="conditional-trigger"
                       {{if .}}{{if eq .FormatMode "preset"}}checked{{end}}{{end}}>
                Preset format
            </label>
            <label>
                <input type="radio" name="format_mode" value="custom" class="conditional-trigger"
                       {{if .}}{{if eq .FormatMode "custom"}}checked{{end}}{{end}}>
                Custom format
            </label>
        </div>
        
        <div class="conditional-content format-preset">
            <div class="form-row">
                <div class="form-group">
                    <label for="format">Format</label>
                    <select name="format">
                        <option value="best" {{if .}}{{if eq .Format "best"}}selected{{end}}{{end}}>best</option>
                        <option value="worst" {{if .}}{{if eq .Format "worst"}}selected{{end}}{{end}}>worst</option>
                        <option value="bestvideo+bestaudio" {{if .}}{{if eq .Format "bestvideo+bestaudio"}}selected{{end}}{{end}}>bestvideo+bestaudio</option>
                        <option value="bestvideo" {{if .}}{{if eq .Format "bestvideo"}}selected{{end}}{{end}}>bestvideo</option>
                        <option value="bestaudio" {{if .}}{{if eq .Format "bestaudio"}}selected{{end}}{{end}}>bestaudio</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="quality">Max Quality</label>
                    <select name="quality">
                        <option value="" {{if .}}{{if eq .Quality ""}}selected{{end}}{{end}}>No limit</option>
                        <option value="720" {{if .}}{{if eq .Quality "720"}}selected{{end}}{{end}}>720p</option>
                        <option value="1080" {{if .}}{{if eq .Quality "1080"}}selected{{end}}{{end}}>1080p</option>
                        <option value="1440" {{if .}}{{if eq .Quality "1440"}}selected{{end}}{{end}}>1440p</option>
                        <option value="2160" {{if .}}{{if eq .Quality "2160"}}selected{{end}}{{end}}>4K (2160p)</option>
                    </select>
                </div>
            </div>
        </div>
        
        <div class="conditional-content format-custom">
            <div class="form-group">
                <label for="custom_format">Custom Format</label>
                <input type="text" name="custom_format" placeholder="e.g., bestvideo+bestaudio/best or format ID like 22"
                       value="{{if .}}{{.CustomFormat}}{{end}}">
                <small>Overrides the format selection. Use yt-dlp format syntax.</small>
            </div>
        </div>
    </div>

    <div class="conditional-section">
        <div class="form-group checkbox">
            <label>
                <input type="checkbox" name="extract_audio" value="1" class="conditional-trigger"
                       {{if .}}{{if .ExtractAudio}}checked{{end}}{{end}}>
                Extract audio only
            </label>
        </div>
        <div class="conditional-content">
            <div class="form-group">
                <label>Audio Format</label>
                <div class="radio-group">
                    <label><input type="radio" name="audio_format" value="mp3" {{if .}}{{if eq .AudioFormat "mp3"}}checked{{end}}{{end}}> MP3</label>
                    <label><input type="radio" name="audio_format" value="m4a" {{if .}}{{if eq .AudioFormat "m4a"}}checked{{end}}{{end}}> M4A</label>
                    <label><input type="radio" name="audio_format" value="ogg" {{if .}}{{if eq .AudioFormat "ogg"}}checked{{end}}{{end}}> OGG</label>
                    <label><input type="radio" name="audio_format" value="flac" {{if .}}{{if eq .AudioFormat "flac"}}checked{{end}}{{end}}> FLAC</label>
                    <label><input type="radio" name="audio_format" value="wav" {{if .}}{{if eq .AudioFormat "wav"}}checked{{end}}{{end}}> WAV</label>
                    <label><input type="radio" name="audio_format" value="opus" {{if .}}{{if eq .AudioFormat "opus"}}checked{{end}}{{end}}> Opus</label>
                    <label><input type="radio" name="audio_format" value="aac" {{if .}}{{if eq .AudioFormat "aac"}}checked{{end}}{{end}}> AAC</label>
                    <label><input type="radio" name="audio_format" value="" {{if .}}{{if eq .AudioFormat ""}}checked{{end}}{{else}}checked{{end}}> Default (no conversion)</label>
                </div>
            </div>
        </div>
    </div>

    <div class="conditional-section">
        <div class="form-group checkbox">
            <label>
                <input type="checkbox" name="embed_subs" value="1" class="conditional-trigger"
                       {{if .}}{{if .EmbedSubs}}checked{{end}}{{end}}>
                Embed subtitles
            </label>
        </div>
        <div class="conditional-content">
            <div class="form-group">
                <label for="sub_langs">Subtitle Languages</label>
                <input type="text" name="sub_langs" placeholder="e.g., en,de,fr or all" 
                       value="{{if .}}{{.SubLangs}}{{else}}en{{end}}">
                <small>Comma-separated language codes or "all"</small>
            </div>
        </div>
    </div>

    <div class="form-group checkbox">
        <label>
            <input type="checkbox" name="embed_thumbnail" value="1" 
                   {{if .}}{{if .EmbedThumbnail}}checked{{end}}{{else}}checked{{end}}>
            Embed thumbnail
        </label>
    </div>

    <div class="form-group checkbox">
        <label>
            <input type="checkbox" name="embed_metadata" value="1" 
                   {{if .}}{{if .EmbedMetadata}}checked{{end}}{{else}}checked{{end}}>
            Embed metadata
        </label>
    </div>

    <div class="form-group checkbox">
        <label>
            <input type="checkbox" name="write_info_json" value="1" 
                   {{if .}}{{if .WriteInfoJSON}}checked{{end}}{{else}}checked{{end}}>
            Write info JSON
        </label>
    </div>

    <div class="form-group">
        <label for="output_template">Output Template</label>
        <input type="text" name="output_template" 
               value="{{if .}}{{.OutputTemplate}}{{else}}%(title)s [%(id)s].%(ext)s{{end}}">
        <small>Use / for subfolders. Example: %(playlist_title)s/%(title)s.%(ext)s</small>
    </div>

    <div class="form-group">
        <label for="custom_flags">Custom Flags</label>
        <textarea name="custom_flags" rows="2" placeholder="Any additional yt-dlp flags...">{{if .}}{{.CustomFlags}}{{end}}</textarea>
    </div>
{{end}}

{{define "preset_form_create"}}
    <div class="form-group">
        <label for="name">Name *</label>
        <input type="text" name="name" required>
    </div>

    <div class="form-group">
        <label for="description">Description</label>
        <input type="text" name="description">
    </div>

    <div class="form-group checkbox">
        <label>
            <input type="checkbox" name="is_default" value="1">
            Set as default preset
        </label>
    </div>

    <div class="conditional-section">
        <label>Format Selection</label>
        <div class="radio-group format-mode">
            <label>
                <input type="radio" name="format_mode" value="default" class="conditional-trigger" checked>
                yt-dlp default
            </label>
            <label>
                <input type="radio" name="format_mode" value="preset" class="conditional-trigger">
                Preset format
            </label>
            <label>
                <input type="radio" name="format_mode" value="custom" class="conditional-trigger">
                Custom format
            </label>
        </div>
        
        <div class="conditional-content format-preset">
            <div class="form-row">
                <div class="form-group">
                    <label for="format">Format</label>
                    <select name="format">
                        <option value="best" selected>best</option>
                        <option value="worst">worst</option>
                        <option value="bestvideo+bestaudio">bestvideo+bestaudio</option>
                        <option value="bestvideo">bestvideo</option>
                        <option value="bestaudio">bestaudio</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="quality">Max Quality</label>
                    <select name="quality">
                        <option value="" selected>No limit</option>
                        <option value="720">720p</option>
                        <option value="1080">1080p</option>
                        <option value="1440">1440p</option>
                        <option value="2160">4K (2160p)</option>
                    </select>
                </div>
            </div>
        </div>
        
        <div class="conditional-content format-custom">
            <div class="form-group">
                <label for="custom_format">Custom Format</label>
                <input type="text" name="custom_format" placeholder="e.g., bestvideo+bestaudio/best or format ID like 22">
                <small>Overrides the format selection. Use yt-dlp format syntax.</small>
            </div>
        </div>
    </div>

    <div class="conditional-section">
        <div class="form-group checkbox">
            <label>
                <input type="checkbox" name="extract_audio" value="1" class="conditional-trigger">
                Extract audio only
            </label>
        </div>
        <div class="conditional-content">
            <div class="form-group">
                <label>Audio Format</label>
                <div class="radio-group">
                    <label><input type="radio" name="audio_format" value="mp3"> MP3</label>
                    <label><input type="radio" name="audio_format" value="m4a"> M4A</label>
                    <label><input type="radio" name="audio_format" value="ogg"> OGG</label>
                    <label><input type="radio" name="audio_format" value="flac"> FLAC</label>
                    <label><input type="radio" name="audio_format" value="wav"> WAV</label>
                    <label><input type="radio" name="audio_format" value="opus"> Opus</label>
                    <label><input type="radio" name="audio_format" value="aac"> AAC</label>
                    <label><input type="radio" name="audio_format" value="" checked> Default (no conversion)</label>
                </div>
            </div>
        </div>
    </div>

    <div class="conditional-section">
        <div class="form-group checkbox">
            <label>
                <input type="checkbox" name="embed_subs" value="1" class="conditional-trigger">
                Embed subtitles
            </label>
        </div>
        <div class="conditional-content">
            <div class="form-group">
                <label for="sub_langs">Subtitle Languages</label>
                <input type="text" name="sub_langs" placeholder="e.g., en,de,fr or all" value="en">
                <small>Comma-separated language codes or "all"</small>
            </div>
        </div>
    </div>

    <div class="form-group checkbox">
        <label>
            <input type="checkbox" name="embed_thumbnail" value="1" checked>
            Embed thumbnail
        </label>
    </div>

    <div class="form-group checkbox">
        <label>
            <input type="checkbox" name="embed_metadata" value="1" checked>
            Embed metadata
        </label>
    </div>

    <div class="form-group checkbox">
        <label>
            <input type="checkbox" name="write_info_json" value="1" checked>
            Write info JSON
        </label>
    </div>

    <div class="form-group">
        <label for="output_template">Output Template</label>
        <input type="text" name="output_template" value="%(title)s [%(id)s].%(ext)s">
        <small>Use / for subfolders. Example: %(playlist_title)s/%(title)s.%(ext)s</small>
    </div>

    <div class="form-group">
        <label for="custom_flags">Custom Flags</label>
        <textarea name="custom_flags" rows="2" placeholder="Any additional yt-dlp flags..."></textarea>
    </div>
{{end}}