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

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

        <div class="form-group">
            <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>
        </div>

        <div class="form-group">
            <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>
        </div>

        <div class="form-group">
            <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>
        </div>

        <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>
            <a href="/queue" class="button secondary">Cancel</a>
        </div>
    </form>

    {{if .Data.ShowFormats}}
    {{if .Data.Formats}}
    <div class="formats-table-container">
        <h4>Available Formats</h4>
        <table class="formats-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>
    </div>
    {{else}}
    <div class="empty-state">
        <p>No formats found. Check the URL and try again.</p>
    </div>
    {{end}}
    {{end}}
</div>
{{end}}