{{define "library_page"}}
<h1>ライブラリ</h1>
{{if .Series}}
  <p>{{.SeriesCount}}番組・{{.EpisodeCount}}本・{{.TotalSizeText}}</p>
  <form action="/library/delete/confirm" method="post">
  <div class="episode-grid library-select-grid">
    {{range .Series}}
      <article class="episode-card">
        <label class="library-selection"><input type="checkbox" name="series_id" value="{{.SeriesID}}"> この番組を選択</label>
        <a href="/library/series/{{.SeriesID}}">
          <div class="library-card-image">
            <img src="{{.ThumbnailURL}}" alt="" loading="lazy">
            <span class="episode-count-badge">{{.EpisodeCount}}本</span>
          </div>
          <div class="episode-copy">
            <h2>{{.SeriesTitle}} {{if .Subscribed}}<span class="subscription-badge">登録中</span>{{end}}</h2>
            <p>放送局: {{.BroadcasterName}}</p>
            <p>最新: {{.LatestTitle}}</p>
            <p>最終完了: {{.LatestFinishedText}}</p>
            <p>合計サイズ: {{.TotalSizeText}}</p>
          </div>
        </a>
      </article>
    {{end}}
  </div>
  <p><button type="submit">選択した番組を削除</button></p>
  </form>
{{else}}
  <p>ダウンロード済みの動画はありません</p>
{{end}}
{{end}}

{{define "series_page"}}
<nav class="breadcrumbs" aria-label="パンくず"><a href="/library">ライブラリ</a><span aria-hidden="true">›</span><span>{{.SeriesTitle}}</span></nav>
<h1>{{.SeriesTitle}} {{if .Subscribed}}<span class="subscription-badge">登録中</span>{{end}}</h1>
<p>{{.BroadcasterName}}・{{.EpisodeCount}}本・{{.TotalSizeText}}</p>
<p class="library-sort">並び順:
  {{if eq .Sort "latest"}}<strong>完了が新しい順</strong>{{else}}<a href="/library/series/{{.SeriesID}}">完了が新しい順</a>{{end}}
  ／
  {{if eq .Sort "natural"}}<strong>話の順</strong>{{else}}<a href="/library/series/{{.SeriesID}}?sort=natural">話の順</a>{{end}}
</p>
<form action="/library/delete/confirm" method="post">
<div class="library-episode-list">
  {{range .Items}}
    <div class="library-episode-select-row">
      <label class="library-selection"><input type="checkbox" name="id" value="{{.ID}}"> 選択</label>
      <a class="library-episode-row" href="/library/{{.ID}}">
        <img src="{{.ThumbnailURL}}" alt="" loading="lazy">
        <span class="library-episode-title">{{.Title}}</span>
        <span>{{.FinishedAtText}}</span>
        <span>{{.DurationText}}</span>
        <span>{{.FileSizeText}}</span>
      </a>
    </div>
  {{end}}
</div>
<p><button type="submit">選択した回を削除</button></p>
</form>
<form action="/library/delete/confirm" method="post">
  <input type="hidden" name="series_id" value="{{.SeriesID}}">
  <button type="submit">この番組をすべて削除</button>
</form>
{{end}}

{{define "video_page"}}
<nav class="breadcrumbs" aria-label="パンくず"><a href="/library">ライブラリ</a><span aria-hidden="true">›</span><a href="{{.SeriesURL}}">{{.SeriesTitle}}</a><span aria-hidden="true">›</span><span>{{.Title}}</span></nav>
<h1>{{.SeriesTitle}}</h1>
<h2>{{.Title}}</h2>
<video controls preload="metadata" src="{{.VideoURL}}"></video>
<p>放送局: {{.BroadcasterName}}／長さ: {{.DurationText}}／サイズ: {{.FileSizeText}}／完了日時: {{.FinishedAtText}}</p>
<nav class="episode-navigation" aria-label="前後の回">
  {{if .Previous}}<a href="/library/{{.Previous.ID}}">← 前の回: {{.Previous.Title}}</a>{{else}}<span aria-disabled="true">前の回はありません</span>{{end}}
  {{if .Next}}<a href="/library/{{.Next.ID}}">次の回: {{.Next.Title}} →</a>{{else}}<span aria-disabled="true">次の回はありません</span>{{end}}
</nav>
<form action="/library/delete/confirm" method="post">
  <input type="hidden" name="id" value="{{.ID}}">
  <button type="submit">削除</button>
</form>
{{end}}

{{define "delete_confirm_page"}}
<nav class="breadcrumbs" aria-label="パンくず"><a href="/library">ライブラリ</a><span aria-hidden="true">›</span><span>削除確認</span></nav>
<h1>動画の削除確認</h1>
<p class="delete-warning">ファイルと記録を削除します。この操作は取り消せません。</p>
<p>{{.Count}}本・合計{{.TotalSizeText}}</p>
{{range .Groups}}
  <section class="delete-group">
    <h2>{{.SeriesTitle}}</h2>
    <p>{{len .Items}}本・{{.TotalSizeText}}</p>
    <ul>
      {{range .Items}}<li>{{.Title}}（{{.FileSizeText}}）</li>{{end}}
    </ul>
  </section>
{{end}}
<form action="/library/delete" method="post">
  {{range .IDs}}<input type="hidden" name="id" value="{{.}}">{{end}}
  <button type="submit">削除を実行</button>
  <a href="{{.CancelURL}}">取り消す</a>
</form>
{{end}}

{{define "delete_result_page"}}
<nav class="breadcrumbs" aria-label="パンくず"><a href="/library">ライブラリ</a><span aria-hidden="true">›</span><span>削除結果</span></nav>
<h1>動画の削除結果</h1>
<p>削除: {{.DeletedCount}}件／失敗: {{len .Failures}}件／対象外: {{.ExcludedCount}}件</p>
{{if .Failures}}
  <h2>失敗した回</h2>
  <ul>{{range .Failures}}<li>{{.Title}}: {{.Reason}}</li>{{end}}</ul>
{{end}}
<p><a href="/library">ライブラリへ戻る</a></p>
{{if .SeriesLinks}}
  <h2>回が残っている番組</h2>
  <ul>{{range .SeriesLinks}}<li><a href="/library/series/{{.SeriesID}}">{{.SeriesTitle}}</a></li>{{end}}</ul>
{{end}}
{{end}}