{{define "download_form"}}
<div class="page-header">
    <h2>Download</h2>
</div>

<div class="download-form">
    <article>
    <form method="post" action="/download">
        <label for="url">Video/Playlist URL</label>
        <input type="url" id="url" name="url" placeholder="https://youtube.com/watch?v=..." required value="{{.Data.URL}}">

        <label for="preset_id">Preset</label>
        <select id="preset_id" name="preset_id">
            <option value="">-- No preset (manual) --</option>
            {{range .Data.Presets}}
            <option value="{{.ID}}" {{if $.Data.DefaultPreset}}{{if eq .ID $.Data.DefaultPreset.ID}}selected{{end}}{{end}}>
                {{.Name}} {{if .IsDefault}}(default){{end}}
            </option>
            {{end}}
        </select>

        <label for="output_dir">Output Directory</label>
        <input type="text" id="output_dir" name="output_dir" placeholder="e.g., videos/music (relative to library folder)" value="{{.Data.OutputDir}}">
        <small>Optional sub-directory within the library folder. Use / for nested paths.</small>

        <label for="format_override">Format Override</label>
        <input type="text" id="format_override" name="format_override" placeholder="e.g., bestvideo+bestaudio/best or format ID like 22" value="{{.Data.FormatOverride}}">
        <small>Overrides the preset format selection. Use yt-dlp format syntax or specific format IDs.</small>

        <label for="custom_flags">Custom Flags</label>
        <textarea id="custom_flags" name="custom_flags" rows="3" placeholder="Any additional yt-dlp flags...">{{.Data.CustomFlags}}</textarea>
        <small>Additional flags appended after preset flags. Example: --no-playlist --write-thumbnail</small>

        {{template "ytdlp_notes" false}}

        <div class="form-actions">
            <button type="submit" class="primary">Start Download</button>
            <button type="submit" class="secondary" formaction="/download" formmethod="get" name="list_formats" value="1">List Available Formats</button>
        </div>
    </form>
    </article>

    {{if .Data.ShowFormats}}
    {{if .Data.Formats}}
    <article>
        <h4>Available Formats</h4>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Extension</th>
                    <th>Resolution</th>
                    <th>FPS</th>
                    <th>Note</th>
                </tr>
            </thead>
            <tbody>
                {{range .Data.Formats}}
                <tr>
                    <td><code>{{.ID}}</code></td>
                    <td>{{.Ext}}</td>
                    <td>{{.Resolution}}</td>
                    <td>{{.FPS}}</td>
                    <td>{{.Note}}</td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </article>
    {{else}}
    <div class="empty-state">
        <p>No formats found. Check the URL and try again.</p>
    </div>
    {{end}}
    {{end}}
</div>
{{end}}