動画を確認画面つきで複数削除できるようにする（ステップ13）

internal/web/templates/layout.html

@@ -30,6 +30,10 @@
       {{template "series_page" .Series}}
     {{else if .Video}}
       {{template "video_page" .Video}}
+    {{else if .DeleteConfirm}}
+      {{template "delete_confirm_page" .DeleteConfirm}}
+    {{else if .DeleteResult}}
+      {{template "delete_result_page" .DeleteResult}}
     {{else}}
       <h1>{{.Title}}</h1>
     {{end}}

internal/web/templates/library.html

@@ -2,9 +2,11 @@
 <h1>ライブラリ</h1>
 {{if .Series}}
   <p>{{.SeriesCount}}番組・{{.EpisodeCount}}本・{{.TotalSizeText}}</p>
-  <div class="episode-grid">
+  <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">
@@ -21,6 +23,8 @@
       </article>
     {{end}}
   </div>
+  <p><button type="submit">選択した番組を削除</button></p>
+  </form>
 {{else}}
   <p>ダウンロード済みの動画はありません</p>
 {{end}}
@@ -35,17 +39,27 @@
   ／
   {{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}}
-    <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 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"}}
@@ -58,7 +72,44 @@
   {{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="動画ファイルと記録を削除しますか？">
+<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}}