1 files changed, 72 insertions, 0 deletions
diff --git a/internal/web/templates/reader.html b/internal/web/templates/reader.html
new file mode 100644
index 0000000..c82d08e
--- /dev/null
+++ b/internal/web/templates/reader.html
@@ -0,0 +1,72 @@
+{{/* reader.html — lectio-web Bible reader: pick a book (sigla-dialect names),
+     navigate chapters, compare corpus versions. The controls form re-fetches
+     /reader and hx-selects #reader-root (so the book/chapter/version selects
+     re-render in sync); the theme/mono controls live OUTSIDE #reader-root so
+     they persist across swaps, exactly like index.html. Reuses the same
+     reading-pane templates, role classes and themes as the daily view. */}}
+<!doctype html>
+<html lang="{{.Lang}}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>lectio — reader</title>
+<link rel="stylesheet" href="/static/base.css">
+<link id="theme" rel="stylesheet" href="/theme.css?name={{.Theme}}">
+<script src="/static/htmx.min.js"></script>
+</head>
+<body{{if .Mono}} class="mono"{{end}}>
+<div class="page">
+  <div id="reader-root">
+    <form class="controls" action="/reader" method="get"
+          hx-get="/reader" hx-target="#reader-root" hx-select="#reader-root" hx-swap="outerHTML" hx-trigger="change">
+      <a class="nav-link" href="/">&larr; {{.L.BannerReadings}}</a>
+
+      <label>{{.L.WebBook}}
+        <select name="book">
+          {{range .BookOpts}}<option value="{{.Value}}" {{if .Selected}}selected{{end}}>{{.Label}}</option>{{end}}
+        </select>
+      </label>
+
+      <span class="chap-nav">
+        <button type="button" hx-get="/reader" hx-target="#reader-root" hx-select="#reader-root"
+                hx-swap="outerHTML" hx-vals='{"chap":"{{.PrevChap}}"}'>&larr;</button>
+        <label>{{.L.WebChapter}}
+          <select name="chap">
+            {{range .ChapOpts}}<option value="{{.N}}" {{if .Selected}}selected{{end}}>{{.N}}</option>{{end}}
+          </select>
+        </label>
+        <button type="button" hx-get="/reader" hx-target="#reader-root" hx-select="#reader-root"
+                hx-swap="outerHTML" hx-vals='{"chap":"{{.NextChap}}"}'>&rarr;</button>
+      </span>
+
+      {{range .VersionOpts}}
+      <label><input type="checkbox" name="v" value="{{.Code}}" {{if .Checked}}checked{{end}}> {{.Code}}</label>
+      {{end}}
+
+      <label>{{.L.Layout}}
+        <select name="display">
+          <option value="vertical" {{if eq .Display "vertical"}}selected{{end}}>{{.L.OptColumns}}</option>
+          <option value="horizontal" {{if eq .Display "horizontal"}}selected{{end}}>{{.L.OptHorizontal}}</option>
+          <option value="interlinear" {{if eq .Display "interlinear"}}selected{{end}}>{{.L.OptInterlinear}}</option>
+        </select>
+      </label>
+
+      <div id="pane">{{.Reading}}</div>
+    </form>
+  </div>
+
+  <label class="theme-picker">{{.L.Theme}}
+    <select id="theme-select"
+            onchange="var o=document.getElementById('theme'),n=o.cloneNode(false);n.setAttribute('href','/theme.css?name='+encodeURIComponent(this.value));o.replaceWith(n);">
+      {{range .ThemeOpts}}
+      <option value="{{.Name}}" {{if .Selected}}selected{{end}}>{{.Name}}</option>
+      {{end}}
+    </select>
+  </label>
+
+  <label class="mono-toggle"><input type="checkbox" {{if .Mono}}checked{{end}}
+         onchange="document.body.classList.toggle('mono', this.checked)"> {{.L.Mono}}</label>
+
+</div>
+</body>
+</html>