{{define "queue"}}
<div class="page-header">
    <h2>Queue</h2>
    <div class="actions">
        <form method="post" action="/queue/clear" class="inline">
            <button type="submit" class="secondary">Clear All</button>
        </form>
        <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>
                <option value="cancelled" {{if eq .Data.Status "cancelled"}}selected{{end}}>Cancelled</option>
            </select>
            <select name="sort">
                <option value="date" {{if eq .Data.SortBy "date"}}selected{{end}}>Date</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}}
    <article class="queue-item {{.Status}}">
        <a href="/queue/{{.ID}}" class="queue-link" aria-label="View download details"></a>
        <div class="queue-header">
            <div class="queue-url">{{.URL}}</div>
            <div class="queue-status">
                <span class="status-badge {{.Status}}">{{.Status}}</span>
            </div>
            <form method="post" action="/queue/{{.ID}}/delete" class="inline queue-action">
                <button type="submit" class="small danger">Remove</button>
            </form>
        </div>
        {{if .ErrorMessage.Valid}}
        <div class="error-message">{{.ErrorMessage.String}}</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>
    </article>
    {{else}}
    <div class="empty-state">
        <p>Queue is empty. <a href="/download">Start a download</a>.</p>
    </div>
    {{end}}
</div>
{{end}}