Move verse selector to htmx

assets/templates/base.njk

@@ -1,7 +1,8 @@
 {# The shell every page is wrapped in. Rendered by sw.js, not by the build,
    so editing this file changes every page without regenerating any of them.
 
-   Context: title, content (safe HTML fragment), mark (bookmark or null).
+   Context: title, content (safe HTML fragment), mark (bookmark or null),
+   reference (the navbar picker's model, or null).
 
    Bootstrap is the whole stylesheet. The fragments carry semantic USFM
    classes and no Bootstrap ones, so the body text is styled by Reboot; the
@@ -76,29 +77,7 @@
      data-bs-theme="dark">
   <div class="container-xl">
     <a class="navbar-brand" href="./">Bible</a>
-    {# The reference picker: which book you are in, and where in it to go.
-       Outside the collapse deliberately -- it is the main way of moving around
-       a book now that the chapter list is gone from the page, and a chapter
-       picker behind a hamburger is no use on a phone.
-
-       Empty here and filled by app.js from the book on the page. The verse
-       list has to be rebuilt in the browser every time the chapter changes, so
-       there is nothing for a template to usefully render first.
-
-       d-none for the empty state rather than the hidden attribute: Bootstrap
-       declares .d-flex after Reboot's [hidden] rule, both !important and at
-       the same specificity, so the utility would win. #}
-    <div class="reference navbar-text d-none align-items-center gap-1 ms-3"
-         id="reference">
-      <span class="reference-book text-light fw-semibold" id="reference-book"></span>
-      <label class="visually-hidden" for="reference-chapter">Chapter</label>
-      <select class="reference-chapter form-select form-select-sm"
-              id="reference-chapter"></select>
-      <span class="reference-sep text-light">:</span>
-      <label class="visually-hidden" for="reference-verse">Verse</label>
-      <select class="reference-verse form-select form-select-sm"
-              id="reference-verse"></select>
-    </div>
+    {% include "reference.njk" %}
     <button class="navbar-toggler" type="button"
             data-bs-toggle="collapse" data-bs-target="#site-nav"
             aria-controls="site-nav" aria-expanded="false"
@@ -129,7 +108,7 @@
 </main>
 
 {# Chrome, so it is written once here instead of built in JavaScript on every
-   page. app.js only fills in the reference and shows it. #}
+   page. app.js only fills in the verse it was opened for and shows it. #}
 <div class="modal fade" id="verse-dialog" tabindex="-1"
      aria-labelledby="verse-dialog-ref" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">