{{define "newer_page"}}
<h1>新着</h1>
<form id="newer-controls" action="/" method="get"
      hx-get="/newer" hx-trigger="change, submit"
      hx-target="#newer-results" hx-swap="outerHTML">
  <label for="genre">ジャンル</label>
  <select id="genre" name="genre">
    <option value="drama" {{if eq .Genre "drama"}}selected{{end}}>ドラマ</option>
    <option value="variety" {{if eq .Genre "variety"}}selected{{end}}>バラエティ</option>
  </select>
  <input type="hidden" name="hide_previews" value="0">
  <label for="hide-previews">
    <input id="hide-previews" type="checkbox" name="hide_previews" value="1" {{if .HidePreviews}}checked{{end}}>
    予告を隠す
  </label>
  <button type="submit">表示</button>
</form>
{{template "newer_results" .}}
{{end}}

{{define "newer_results"}}
<section id="newer-results" aria-label="新着一覧" aria-live="polite">
  {{if .Failed}}
    <p role="status">{{.ErrorText}}</p>
  {{else if not .Episodes}}
    <p>表示する新着はありません</p>
  {{else}}
    <div class="episode-grid">
      {{range .Episodes}}
        <article class="episode-card">
          <a href="{{.URL}}">
            <img src="{{.ThumbnailURL}}" alt="" loading="lazy">
            <div class="episode-copy">
              <h2>{{.SeriesTitle}}</h2>
              <p>{{.Title}}</p>
              <p>放送局: {{.BroadcasterName}}</p>
              <p>長さ: {{.DurationMinutes}}分</p>
              <p>放送日: {{.BroadcastDateLabel}}</p>
              <p>配信終了: <time datetime="{{.EndAtISO}}">{{.EndAtText}}</time></p>
            </div>
          </a>
          {{template "episode_action" .}}
          {{template "subscription_action" .SubscriptionAction}}
        </article>
      {{end}}
    </div>
  {{end}}
</section>
{{end}}

{{define "episode_action"}}
<div class="episode-action">
  {{if not .Status}}
    <form action="/episodes/enqueue" method="post" hx-post="/episodes/enqueue" hx-target="closest .episode-action" hx-swap="outerHTML">
      <input type="hidden" name="episode_id" value="{{.ID}}">
      <input type="hidden" name="genre" value="{{.Genre}}">
      <button type="submit">ダウンロード</button>
    </form>
  {{else}}
    <span role="status">{{.StatusText}}</span>
    {{if or (eq .Status "failed") (eq .Status "canceled")}}
      <form action="/episodes/retry" method="post" hx-post="/episodes/retry" hx-target="closest .episode-action" hx-swap="outerHTML">
        <input type="hidden" name="episode_id" value="{{.ID}}">
        <input type="hidden" name="genre" value="{{.Genre}}">
        <button type="submit">再試行</button>
      </form>
    {{end}}
  {{end}}
</div>
{{end}}