{{define "queue_page"}}
<h1>待ち行列</h1>
{{template "queue_list" .}}
{{end}}

{{define "queue_list"}}
<div id="queue-list" {{if .Poll}}hx-get="/queue/list" hx-trigger="every 5s" hx-target="this" hx-swap="outerHTML"{{end}}>
  <section aria-label="ダウンロード中">
    <h2>ダウンロード中</h2>
    {{range .Running}}{{template "queue_job" .}}{{else}}<p>ありません</p>{{end}}
  </section>
  <section aria-label="待機中">
    <h2>待機中</h2>
    {{range .Queued}}{{template "queue_job" .}}{{else}}<p>ありません</p>{{end}}
  </section>
  <section aria-label="失敗">
    <h2>失敗</h2>
    {{range .Failed}}{{template "queue_job" .}}{{else}}<p>ありません</p>{{end}}
  </section>
  <section aria-label="取り消し">
    <h2>取り消し</h2>
    {{range .Canceled}}{{template "queue_job" .}}{{else}}<p>ありません</p>{{end}}
  </section>
  <section aria-label="完了">
    <h2>完了（直近50件）</h2>
    {{range .Succeeded}}{{template "queue_job" .}}{{else}}<p>ありません</p>{{end}}
  </section>
</div>
{{end}}

{{define "queue_job"}}
<article class="queue-job">
  <h3>{{.SeriesTitle}} — {{.Title}}</h3>
  <p>放送局: {{.BroadcasterName}}／登録元: {{.SourceText}}／登録日時: {{.CreatedAtText}}</p>
  {{if eq .Status "running"}}
    <p>段階: {{if .PhaseText}}{{.PhaseText}}{{else}}準備中{{end}}
      {{if .PercentText}}／{{.PercentText}}{{end}}
      {{if .SpeedText}}／{{.SpeedText}}{{end}}
      {{if .ETAText}}／{{.ETAText}}{{end}}
      {{if .FragmentText}}／{{.FragmentText}}{{end}}</p>
    <form action="/jobs/{{.ID}}/cancel" method="post" hx-post="/jobs/{{.ID}}/cancel" hx-target="#queue-list" hx-swap="outerHTML">
      <button type="submit">取り消し</button>
    </form>
  {{end}}
  {{if eq .Status "failed"}}
    <p>失敗理由: {{.ErrorKindText}}</p>
    {{if .ErrorMessage}}<details><summary>詳細</summary><pre>{{.ErrorMessage}}</pre></details>{{end}}
  {{end}}
  {{if eq .Status "queued"}}
    <form action="/jobs/{{.ID}}/cancel" method="post" hx-post="/jobs/{{.ID}}/cancel" hx-target="#queue-list" hx-swap="outerHTML">
      <button type="submit">取り消し</button>
    </form>
  {{else if or (eq .Status "failed") (eq .Status "canceled")}}
    <form action="/jobs/{{.ID}}/retry" method="post" hx-post="/jobs/{{.ID}}/retry" hx-target="#queue-list" hx-swap="outerHTML">
      <button type="submit">再試行</button>
    </form>
  {{end}}
</article>
{{end}}