From 14632473a629db4b7eaf1ba8f8af1614a55fcb66 Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel@bitbadger.solutions>
Date: Sat, 10 Feb 2024 20:46:14 -0500
Subject: [PATCH] WIP on chapter edit form (#6)

---
 src/admin-theme/chapter-edit.liquid | 79 +++++++++++++++++------------
 1 file changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/admin-theme/chapter-edit.liquid b/src/admin-theme/chapter-edit.liquid
index 172236f..bb13c16 100644
--- a/src/admin-theme/chapter-edit.liquid
+++ b/src/admin-theme/chapter-edit.liquid
@@ -1,71 +1,86 @@
-<h2 class=my-3>{% if model.index < 0 %}Add{% else %}Edit{% endif %} Chapter</h2>
+<h3 class=my-3>{% if model.index < 0 %}Add{% else %}Edit{% endif %} Chapter</h3>
+<p class=form-text>Times may be entered as seconds; minutes and seconds; or hours, minutes and seconds. Fractional
+  seconds are supported to two decimal places.
 <form method=post hx-target=#chapter_list class=container>
   <input type=hidden name=PostId value="{{ model.post_id }}">
   <input type=hidden name=Index value={{ model.index }}>
   <div class=row>
-    <div class="col">
+    <div class="col-6 col-lg-3 mb-3">
       <div class=form-floating>
-        <input type=text id=start_time name=StartTime class=form-control value="{{ model.start_time }}">
+        <input type=text id=start_time name=StartTime class=form-control required autofocus placeholder="Start Time"
+               {%- unless model.index < 0 %} value="{{ start_time }}"{% endunless %}>
         <label for=start_time>Start Time</label>
       </div>
     </div>
-    <div class="col">
-      <div class=form-floating>
-        <input type=text id=title name=Title class=form-control value="{{ model.title }}" placeholder=Title>
-        <label for=title>Chapter Title</label>
-      </div>
-    </div>
-  </div>
-  <div class=row>
-    <div class="col">
-      <div class=form-floating>
-        <input type=text id=image_url name=ImageUrl class=form-control value="{{ model.image_url }}"
-               placeholder="Image URL">
-        <label for=image_url>Image URL</label>
-      </div>
-    </div>
-    <div class="col">
-      <div class="form-check form-switch">
-        <input type=checkbox id=is_hidden name=IsHidden class=form-check-input value=true
-               {%- if model.is_hidden %} checked{% endif %}>
-        <label for=is_hidden>Hidden Chapter</label>
-      </div>
-    </div>
-    <div class="col">
+    <div class="col-6 col-lg-3 mb-3">
       <div class=form-floating>
         <input type=text id=end_time name=EndTime class=form-control value="{{ model.end_time }}"
                placeholder="End Time">
         <label for=end_time>End Time</label>
+        <span class=form-text>Optional; ends when next starts</span>
       </div>
     </div>
+    <div class="col-12 col-lg-6 mb-3">
+      <div class=form-floating>
+        <input type=text id=title name=Title class=form-control value="{{ model.title }}" placeholder=Title>
+        <label for=title>Chapter Title</label>
+        <span class=form-text>Optional</span>
+      </div>
+    </div>
+    <div class="col-12 col-lg-6 offset-xl-1 mb-3">
+      <div class=form-floating>
+        <input type=text id=image_url name=ImageUrl class=form-control value="{{ model.image_url }}"
+               placeholder="Image URL">
+        <label for=image_url>Image URL</label>
+        <span class=form-text>Optional; a separate image to display while this chapter is playing</span>
+      </div>
+    </div>
+    <div class="col-12 col-lg-6 col-xl-4 mb-3 align-self-end d-flex flex-column">
+      <div class="form-check form-switch mb-3">
+        <input type=checkbox id=is_hidden name=IsHidden class=form-check-input value=true
+               {%- if model.is_hidden %} checked{% endif %}>
+        <label for=is_hidden>Hidden Chapter</label>
+      </div>
+      <span class="form-text">Not displayed, but may update image and location</span>
+    </div>
   </div>
   <div class=row>
-    <div class="col">
-      <div class="form-check form-switch">
+    <div class="col-12 col-md-4 col-lg-3 offset-lg-1 mb-3 align-self-end">
+      <div class="form-check form-switch mb-3">
         <input type=checkbox id=has_location class=form-check-input value=true
                {%- if model.location_name != "" %} checked{% endif %}>
         <label for=has_location>Associate Location</label>
       </div>
     </div>
-    <div class="col">
+    <div class="col-12 col-md-8 col-lg-6 offset-lg-1 mb-3">
       <div class=form-floating>
         <input type=text id=location_name name=LocationName class=form-control value="{{ model.location_name }}"
                placeholder="Location Name">
         <label for=location_name>Name</label>
       </div>
     </div>
-    <div class="col">
+    <div class="col-6 col-lg-4 offset-lg-2 mb-3">
       <div class=form-floating>
         <input type=text id=location_geo name=LocationGeo class=form-control value="{{ model.location_geo }}"
                placeholder="Location Geo URL">
         <label for=location_geo>Geo URL</label>
+        <em class=form-text>
+          Optional;
+          <a href="https://github.com/Podcastindex-org/podcast-namespace/blob/main/location/location.md#geo-recommended"
+             target="_blank" rel="noopener">see spec</a>
+        </em>
       </div>
     </div>
-    <div class="col">
+    <div class="col-6 col-lg-4 mb-3">
       <div class=form-floating>
         <input type=text id=location_osm name=LocationOsm class=form-control value="{{ model.location_osm }}"
                placeholder="Location OSM Query">
-        <label for=location_osm>OSM Query</label>
+        <label for=location_osm>OpenStreetMap ID</label>
+        <em class=form-text>
+          Optional; <a href="https://www.openstreetmap.org/" target="_blank" rel="noopener">get ID</a>, 
+          <a href="https://github.com/Podcastindex-org/podcast-namespace/blob/main/location/location.md#osm-recommended"
+             target="_blank" rel="noopener">see spec</a>
+        </em>
       </div>
     </div>
   </div>