{{define "queue"}}
<div class="page-header">
    <h2>Queue</h2>
    <div class="actions">
        <form method="get" action="/queue" class="inline filter-form">
            <select name="status">
                <option value="all" {{if eq .Data.Status "all"}}selected{{end}}>All</option>
                <option value="queued" {{if eq .Data.Status "queued"}}selected{{end}}>Queued</option>
                <option value="downloading" {{if eq .Data.Status "downloading"}}selected{{end}}>Active</option>
                <option value="completed" {{if eq .Data.Status "completed"}}selected{{end}}>Completed</option>
                <option value="error" {{if eq .Data.Status "error"}}selected{{end}}>Failed</option>
            </select>
            <select name="sort">
                <option value="date" {{if eq .Data.SortBy "date"}}selected{{end}}>Date</option>
                <option value="progress" {{if eq .Data.SortBy "progress"}}selected{{end}}>Progress</option>
                <option value="status" {{if eq .Data.SortBy "status"}}selected{{end}}>Status</option>
            </select>
            <button type="submit">Filter</button>
        </form>
    </div>
</div>

<div class="queue-list">
    {{range .Data.Items}}
    <div class="queue-item {{.Status}}">
        <div class="queue-header">
            <div class="queue-url"><a href="/queue/{{.ID}}">{{.URL}}</a></div>
            <div class="queue-status">
                <span class="status-badge {{.Status}}">{{.Status}}</span>
                {{if eq .Status "downloading"}}
                <span class="progress">{{.ProgressPercent}}%</span>
                {{if .CurrentSpeed}}<span class="speed">{{.CurrentSpeed}}</span>{{end}}
                {{if .ETA}}<span class="eta">ETA: {{.ETA}}</span>{{end}}
                {{end}}
            </div>
            <form method="post" action="/queue/{{.ID}}/delete" class="inline">
                <button type="submit" class="small danger">Remove</button>
            </form>
        </div>
        {{if eq .Status "downloading"}}
        <div class="progress-bar">
            <div class="progress-fill" style="width: {{.ProgressPercent}}%"></div>
        </div>
        {{end}}
        {{if .ErrorMessage}}
        <div class="error-message">{{.ErrorMessage}}</div>
        {{end}}
        <div class="queue-meta">
            <span>Created: {{.CreatedAt.Format "2006-01-02 15:04"}}</span>
            {{if .StartedAt.Valid}}
            <span>Started: {{.StartedAt.Time.Format "2006-01-02 15:04"}}</span>
            {{end}}
        </div>
    </div>
    {{else}}
    <div class="empty-state">
        <p>Queue is empty. <a href="/download">Start a download</a>.</p>
    </div>
    {{end}}
</div>
{{end}}