refactor: Updated title for edition

templates/stanzas.html

@@ -5,12 +5,14 @@
 {% block title %}Poetic Text - La Sfera{% endblock title %}
 
 {% block extra_css %}
+  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
   <style>
     .annotated-text {
-      background-color: #fff3cd;
-      border-bottom: 2px solid #ffc107;
+      background-color: #A8DCD9;
       cursor: help;
       position: relative;
+      color: #1A1A1A;
+      border-radius: 4px;
     }
 
     /* Sidebar styles */
@@ -50,26 +52,82 @@
     <section id="manuscript" class="w-full p-4 my-10">
       <div>
         <h3 class="text-4xl pb-8 font-bold" id="top">
-          Poetic Text
+          "The Globe" (La sfera) by Gregorio Dati
         </h3>
 
-        <div class="flex flex-col md:flex-row pb-8 mb-8 border-b border-slate-500">
-          <div class="w-full md:w-1/3 mb-4 md:mb-0 md:px-2">
-            <label for="manuscript" class="block text-gray-700 text-sm font-bold mb-2">Jump to a book:</label>
-            <p class="mb-5"><a href="#libre-1">Libro 1</a> | <a href="#libre-2">Libro 2</a> | <a href="#libre-3">Libro 3</a> | <a href="#libre-4">Libro 4</a></p>
-          </div>
-          <div class="w-full md:w-1/3">
-            <div class="mb-4">
-              <input type="checkbox" id="toggleLineCodes" class="mr-2" checked>
-              <label for="toggleLineCodes">Show line codes</label>
-            </div>
-            <div class="mb-4">
-              <input type="checkbox" id="toggleLineCodeShortened" class="mr-2">
-              <label for="toggleLineCodeShortened">Shorten line codes</label>
+        <div x-data="{ isOpen: true }" class="mb-8">
+    <!-- Filter Panel Header -->
+          <button
+            @click="isOpen = !isOpen"
+            class="w-full flex items-center justify-between p-4 bg-gray-100 hover:bg-gray-200 rounded-t-lg border border-gray-300"
+          >
+            <span class="font-semibold">Text Options</span>
+            <svg
+              class="w-5 h-5 transition-transform duration-200"
+              :class="{'rotate-180': !isOpen}"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+            </svg>
+          </button>
+
+    <!-- Filter Panel Content -->
+          <div
+            x-show="isOpen"
+            x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="opacity-0 transform -translate-y-2"
+            x-transition:enter-end="opacity-100 transform translate-y-0"
+            x-transition:leave="transition ease-in duration-200"
+            x-transition:leave-start="opacity-100 transform translate-y-0"
+            x-transition:leave-end="opacity-0 transform -translate-y-2"
+            class="border border-t-0 border-gray-300 rounded-b-lg p-4 bg-white"
+          >
+            <div class="flex flex-col md:flex-row">
+            <!-- Left Column -->
+              <div class="w-full md:w-1/3 mb-4 md:mb-0 md:px-2">
+                <label for="manuscript" class="block text-gray-700 text-sm font-bold mb-2">Jump to a book:</label>
+                <ul class="list-disc pl-5 space-y-2 mb-5">
+                  <li><a href="#libre-1" class="text-blue-500 hover:underline">Book/Libro 1</a></li>
+                  <li><a href="#libre-2" class="text-blue-500 hover:underline">Book/Libro 2</a></li>
+                  <li><a href="#libre-3" class="text-blue-500 hover:underline">Book/Libro 3</a></li>
+                  <li><a href="#libre-4" class="text-blue-500 hover:underline">Book/Libro 4</a></li>
+                </ul>
+              </div>
+
+            <!-- Middle Column -->
+              <div class="w-full md:w-1/3 mb-4 md:mb-0 md:px-2">
+                <label for="manuscript-select" class="block text-gray-700 text-sm font-bold mb-2">Select Manuscript:</label>
+                <select id="manuscript-select" class="w-1/3 p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
+                  {% for manuscript in manuscripts %}
+                    {% if manuscript.iiif_url %}
+                      <option value="{{ manuscript.siglum }}"
+                              {% if manuscript.siglum == default_manuscript.siglum %}selected{% endif %}>
+                        {{ manuscript.siglum }}{% if manuscript.name %} - {{ manuscript.name }}{% endif %}
+                      </option>
+                    {% endif %}
+                  {% endfor %}
+                </select>
+              </div>
+
+
+            <!-- Right Column -->
+              <div class="w-full md:w-1/3 mb-4 md:mb-0 md:px-2">
+                <div class="mb-4">
+                  <input type="checkbox" id="toggleLineCodes" class="mr-2" checked>
+                  <label for="toggleLineCodes">Show line codes</label>
+                </div>
+                <div class="mb-4">
+                  <input type="checkbox" id="toggleLineCodeShortened" class="mr-2">
+                  <label for="toggleLineCodeShortened">Shorten line codes</label>
+                </div>
+              </div>
             </div>
           </div>
         </div>
 
+
         <div class="space-y-4">
           {% for book_number, stanza_pairs in paired_books.items %}
             <div>
@@ -183,10 +241,10 @@ <h2 id="book-{{book_number}}" class="text-xl font-bold mb-4">Book {{ book_number
       const style = document.createElement("style");
       style.textContent = `
         .annotated-text {
-            background-color: #fff3cd;
-            border-bottom: 2px solid #ffc107;
+            background-color: #A8DCD9;
             cursor: help;
             position: relative;
+            color: #1A1A1A;
         }
 
         .annotation-popup {