{{define "queue_detail"}}
<div class="detail-view">
    <div class="detail-header">
        <a href="/queue" class="back-link">← Back to Queue</a>
        <h2>Queue Details</h2>
        <div class="download-status-header">
            <span class="status-badge {{.Data.Status}}">{{.Data.Status}}</span>
            {{if eq .Data.Status "downloading"}}
            <span class="progress">{{.Data.ProgressPercent}}%</span>
            {{end}}
        </div>
    </div>

    <div class="download-info">
        <dl>
            <dt>URL</dt>
            <dd><a href="{{.Data.URL}}" target="_blank">{{.Data.URL}}</a></dd>
            
            <dt>Created</dt>
            <dd>{{.Data.CreatedAt.Format "2006-01-02 15:04:05"}}</dd>
            
            {{if .Data.StartedAt.Valid}}
            <dt>Started</dt>
            <dd>{{.Data.StartedAt.Time.Format "2006-01-02 15:04:05"}}</dd>
            {{end}}
            
            {{if .Data.CompletedAt.Valid}}
            <dt>Completed</dt>
            <dd>{{.Data.CompletedAt.Time.Format "2006-01-02 15:04:05"}}</dd>
            {{end}}
            
            {{if .Data.ErrorMessage}}
            <dt>Error</dt>
            <dd class="error-text">{{.Data.ErrorMessage}}</dd>
            {{end}}
        </dl>
    </div>

    {{if eq .Data.Status "downloading"}}
    <div class="progress-bar large">
        <div class="progress-fill" style="width: {{.Data.ProgressPercent}}%"></div>
    </div>
    {{end}}

    <div class="logs-container">
        <h3>Logs</h3>
        <pre class="logs">{{if .Data.Logs}}{{.Data.Logs}}{{else}}No logs available yet...{{end}}</pre>
    </div>
</div>
{{end}}