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

<div class="settings-layout">
    <article>
        <h3>Global Settings</h3>
        <form method="post" action="/settings">
            <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}}">

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

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

            <label for="cookies">Cookies (cookies.txt format)</label>
            <textarea id="cookies" name="cookies" rows="6" placeholder="Paste cookies.txt content here...">{{.Data.Settings.Cookies}}</textarea>
            <small>Paste the contents of a cookies.txt file. Will be passed to yt-dlp via --cookies.</small>

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

    <article>
        <h3>Tools</h3>
        <table class="tools-table">
            <tbody>
                <tr>
                    <th scope="row">yt-dlp</th>
                    <td>{{.Data.Tools.YTDLPVersion}}</td>
                    <td><code>{{.Data.Tools.YTDLPPath}}</code></td>
                    <td>{{.Data.Tools.YTDLPMode}}</td>
                </tr>
                <tr>
                    <th scope="row">JS runtime (deno)</th>
                    <td>{{.Data.Tools.DenoVersion}}</td>
                    <td><code>{{.Data.Tools.DenoPath}}</code></td>
                    <td>{{.Data.Tools.DenoMode}}</td>
                </tr>
            </tbody>
        </table>

        <form method="post" action="/settings/tools">
            <label>
                <input type="checkbox" name="tool_auto_update" value="1"
                       {{if .Data.Tools.AutoUpdate}}checked{{end}}>
                Check for tool updates once a day
            </label>

            <label>
                <input type="checkbox" name="js_runtime_enabled" value="1"
                       {{if .Data.Tools.JSRuntime}}checked{{end}}>
                Install a JS runtime for sites with JavaScript challenges
            </label>
            <small>Deno is about 130&nbsp;MB unpacked. yt-dlp picks it up from the
            managed directory automatically.</small>

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

        <form method="post" action="/settings/tools/update">
            <small>Last automatic check:
            {{if .Data.Tools.CheckedAt.IsZero}}never{{else}}{{.Data.Tools.CheckedAt.Format "2006-01-02 15:04"}}{{end}}</small>
            <div class="form-actions">
                <button type="submit" class="secondary">Update Now</button>
            </div>
            <small>Runs each managed tool's own updater. This can take a few minutes.</small>
        </form>
    </article>

    <article>
        <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>
    </article>

    <article>
        <h3>Presets</h3>
        
        <div class="presets-list">
            {{range .Data.Presets}}
            <article>
                <div class="preset-header">
                    <h4>{{.Name}} {{if .IsDefault}}<span class="badge">default</span>{{end}}</h4>
                    <details class="overlay">
                        <summary role="button" class="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 role="button" class="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>
            </article>
            {{else}}
            <p>No presets yet. Create one below.</p>
            {{end}}
        </div>

        <article>
            <h4>Create Preset</h4>
            <form method="post" action="/settings/presets">
                {{template "preset_form" emptyPreset}}

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

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

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

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

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

        <fieldset class="comment-options">
        <legend>Comments</legend>
        <label class="comment-toggle">
            <input type="checkbox" name="write_comments" value="1"
                   {{if .}}{{if .WriteComments}}checked{{end}}{{end}}>
            Write comments to info JSON
        </label>
            <div class="comment-settings-fields">
                <label>Comment sort</label>
            <input type="text" name="comment_sort" placeholder="e.g., top or newest"
                   value="{{if .}}{{.CommentSort}}{{end}}">
            <small>Extractor-specific value; leave blank for yt-dlp's default.</small>

            <label>Maximum comments</label>
            <input type="number" name="max_comments" min="0"
                   value="{{if .}}{{.MaxComments}}{{end}}">
            <small>0 leaves the extractor default.</small>

            <label>Additional extractor arguments</label>
                <input type="text" name="comment_extractor_args"
                       placeholder="e.g., youtube:player_client=web"
                       value="{{if .}}{{.CommentExtractorArgs}}{{end}}">
                <small>Raw value passed to <code>--extractor-args</code>.</small>
            </div>
        </fieldset>
    </div>

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