{{define "library_page"}}
<h1>ライブラリ</h1>
{{if .Series}}
  <p>{{.SeriesCount}}番組・{{.EpisodeCount}}本・{{.TotalSizeText}}</p>
  <div class="episode-grid">
    {{range .Series}}
      <article class="episode-card">
        <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>
{{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>
<div class="library-episode-list">
  {{range .Items}}
    <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>
  {{end}}
</div>
{{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/{{.ID}}/delete" method="post" hx-confirm="動画ファイルと記録を削除しますか？">
  <button type="submit">削除</button>
</form>
{{end}}