Make randomized page order an unfoldable option

Change-Id: I5a61a86af9784ce847a7912b83a97e576e5859f8
diff --git a/src/main/resources/assets/export.js b/src/main/resources/assets/export.js
index f7206de..af5ae84 100644
--- a/src/main/resources/assets/export.js
+++ b/src/main/resources/assets/export.js
@@ -38,6 +38,24 @@
     window.dynCall(P)
   };
 
+  // Toggle advanced options
+  const toggle = document.getElementById("options-toggle");
+  if (toggle) {
+    toggle.onclick = function () {
+      const advContent = document.getElementById("advanced-options-content");
+      const marker = document.getElementById("options-marker");
+      if (advContent) {
+        if (advContent.style.display === "none") {
+          advContent.style.display = "flex";
+          if (marker) marker.innerText = '\u25BC';
+        } else {
+          advContent.style.display = "none";
+          if (marker) marker.innerText = '\u25B6';
+        };
+      };
+    };
+  };
+
   // Set plugin object globally
   window.Plugin = P;
 
diff --git a/src/main/resources/assets/templates/export.ftl b/src/main/resources/assets/templates/export.ftl
index 2b14a5b..56bd2c3 100644
--- a/src/main/resources/assets/templates/export.ftl
+++ b/src/main/resources/assets/templates/export.ftl
@@ -50,7 +50,7 @@
       }
 
       label > .desc {
-        font-size: 90%;
+        font-size: 80%;
         display: block;
       }
 
@@ -69,7 +69,7 @@
         }
         
         #hitc {
-          width: 8em;
+          width: 20em;
         }
         .form-table input {
           min-width: 0;
@@ -130,24 +130,37 @@
           <fieldset class="form-line">
             <legend>${dict.hitc}</legend>
             <div style="display: flex; margin-top: 0.5em; align-items: flex-start; flex-wrap: wrap; gap: 1em 0.3em;">
-              <div>
+              <div style="margin-right: 1em;">
                 <input name="hitc" id="hitc" type="number" min="1" max="${maxHitc?c}" value="${defaultHitc}" />
                 <p style="font-size: 80%; margin-top: .2em; margin-bottom: 0;">${dict.max_hitc} <tt>${maxHitc}</tt></p>
               </div>
-              <div style="display: flex; align-items: center; gap: 1em;">
-                <input type="checkbox"
-                       id="randomizePageOrder"
-                       name="randomizePageOrder"
-                       value="true"
-                       style="align-self: center; min-width: 0;" />
-                <label for="randomizePageOrder">
-                  ${dict.randomize_page_order}
-                  <span class="desc">${dict.randomize_page_order_desc?replace("{0}", pageSize?c)}</span>
-                </label>
-              </div>
-              <div style="display: flex; align-items: center;">
-                <label for="seed">${dict.seed}:</label>
-                <input name="seed" id="seed" type="number" min="0" value="42" style="width: 7em;" />
+
+              <!-- Advanced Options Box -->
+              <div id="advanced-options" style="border: 1px solid #ccc; background-color: #f8f8f8; border-radius: 4px; padding: 4px 10px; align-self: flex-start; display: flex; flex-direction: column;">
+                  
+                  <!-- Header / Toggle -->
+                  <div id="options-toggle" style="cursor: pointer; font-size: 80%; font-weight: bold; user-select: none;">
+                      ${dict.options} <span id="options-marker">&#9654;</span>
+                  </div>
+
+                  <!-- Content (Hidden by default) -->
+                  <div id="advanced-options-content" style="display: none; flex-wrap: wrap; gap: 1em 2em; align-items: center; margin-top: 0.5em;">
+                      <div style="display: flex; align-items: center; gap: 0.5em;">
+                        <input type="checkbox"
+                               id="randomizePageOrder"
+                               name="randomizePageOrder"
+                               value="true"
+                               style="align-self: center; min-width: 0;" />
+                        <label for="randomizePageOrder">
+                          ${dict.randomize_page_order}
+                          <span class="desc" style="margin-top: 0.2em;">${dict.randomize_page_order_desc?replace("{0}", pageSize?c)}</span>
+                        </label>
+                      </div>
+                      <div style="display: flex; align-items: center; white-space: nowrap;">
+                        <label for="seed" style="margin-right: 0.5em;">${dict.seed}:</label>
+                        <input name="seed" id="seed" type="number" min="0" value="42" style="width: 5em;" />
+                      </div>
+                  </div>
               </div>
             </div>
           </fieldset>
diff --git a/src/main/resources/locales/export.properties b/src/main/resources/locales/export.properties
index d7f4008..5adbcff 100644
--- a/src/main/resources/locales/export.properties
+++ b/src/main/resources/locales/export.properties
@@ -8,5 +8,6 @@
 in_cq = in
 info = Depending on the settings and add-ons of your browser, it may not be possible to export corpus excerpts that require authentication.
 randomize_page_order = Randomized page order
-randomize_page_order_desc = (page size={0}).
-seed = Seed
\ No newline at end of file
+randomize_page_order_desc = (page size={0})
+seed = Seed
+options = Options
diff --git a/src/main/resources/locales/export_de.properties b/src/main/resources/locales/export_de.properties
index 3b76a34..cc53004 100644
--- a/src/main/resources/locales/export_de.properties
+++ b/src/main/resources/locales/export_de.properties
@@ -11,5 +11,6 @@
 in_cq = in
 info = Abh\u00e4ngig von Ihren Browser-Einstellungen und -Erweiterungen kann der Export von Korpusbelegen, die eine Authentifizierung ben\u00f6tigen, nicht m\u00f6glich sein.
 randomize_page_order = Randomisierte Seitenreihenfolge
-randomize_page_order_desc = (Seitengr\u00f6\u00dfe={0}).
+randomize_page_order_desc = (Seitengr\u00f6\u00dfe={0})
 seed = Seed
+options = Optionen