{{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">新着を取得できませんでした</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>
        </article>
      {{end}}
    </div>
  {{end}}
</section>
{{end}}