From a8bbed30827a3d4f6689e316b0d3b1feca50c907 Mon Sep 17 00:00:00 2001
From: OUNZAR Aymane <aymane.ounzar@imt-atlantique.net>
Date: Wed, 12 Nov 2025 10:59:25 +0100
Subject: [PATCH] Instead of selecting the mode using radio buttons, the mode
 is by default 'DEFAULT', to change it to 'CUSTOM' the user checks the
 'Custom' Checkbox. Added an 'Advanced Settings' checkbox, when unchecked it
 resets to default values.

---
 .../templates/multi-page-layout.html          | 76 +++++++++++--------
 1 file changed, 45 insertions(+), 31 deletions(-)

diff --git a/app/core/src/main/resources/templates/multi-page-layout.html b/app/core/src/main/resources/templates/multi-page-layout.html
index 59ee843fa..0510935ee 100644
--- a/app/core/src/main/resources/templates/multi-page-layout.html
+++ b/app/core/src/main/resources/templates/multi-page-layout.html
@@ -21,16 +21,11 @@
                 <div class="mb-3">
                   <label class="form-label" th:text="#{pageLayout.mode}"></label>
                   <div class="form-check">
-                    <input class="form-check-input" type="radio" id="modeDefault" name="mode" value="DEFAULT" checked>
-                    <label class="form-check-label" for="modeDefault" th:text="#{pageLayout.default}">Default</label>
-                  </div>
-
-                  <div class="form-check">
-                    <input class="form-check-input" type="radio" id="modeCustom" name="mode" value="CUSTOM">
+                    <input class="form-check-input" type="checkbox" id="modeCustom" name="mode" value="CUSTOM">
                     <label class="form-check-label" for="modeCustom" th:text="#{pageLayout.custom}">Custom</label>
                   </div>
                 </div>
-                <div id="defaultSection" class="mb-3">
+                <div id="defaultSection" class="mb-3" style="border:1px solid #eee; padding:1em; border-radius:8px; margin-bottom:1em;">
                   <label for="pagesPerSheet" th:text="#{pageLayout.pagesPerSheet}"></label>
                   <select class="form-control" id="pagesPerSheet" name="pagesPerSheet" required>
                     <option value="2">2</option>
@@ -40,35 +35,41 @@
                     <option value="16">16</option>
                   </select>
                 </div>
-                <div id="customSection" class="mb-3">
+                <div id="customSection" class="mb-3" style="border:1px solid #eee; padding:1em; border-radius:8px; margin-bottom:1em;">
                   <div class="mb-3">
                     <label for="rows" th:text="#{pageLayout.rows}"></label>
-                    <input class="form-control" type="number" id="rows" name="rows" step="1" min="1" value="1" required>
+                    <input class="form-control" type="number" id="rows" name="rows" step="1" min="1" max="300" value="1" required>
                   </div>
                   <div class="mb-3">
                     <label for="cols" th:text="#{pageLayout.columns}"></label>
-                    <input class="form-control" type="number" id="cols" name="cols" step="1" min="1" value="1" required>
+                    <input class="form-control" type="number" id="cols" name="cols" step="1" min="1" max="300" value="1" required>
                   </div>
-                </div> 
-                <div class="mb-3">
-                  <label for="pageOrder" th:text="#{pageLayout.pageOrder}"></label>
-                  <select class="form-control" id="pageOrder" name="pageOrder">
-                    <option value="LR_TD" th:text="#{pageLayout.leftRightTopDown}"></option>
-                    <option value="RL_TD" th:text="#{pageLayout.rightLeftTopDown}"></option>
-                    <option value="TD_LR" th:text="#{pageLayout.topDownLeftRight}"></option>
-                    <option value="TD_RL" th:text="#{pageLayout.topDownRightLeft}"></option>
-                  </select>
-                </div>
-                <div class="mb-3">
-                  <label for="orientation" th:text="#{pageLayout.orientation}"></label>
-                  <select class="form-control" id="orientation" name="orientation">
-                    <option value="PORTRAIT" th:text="#{pageLayout.portrait}"></option>
-                    <option value="LANDSCAPE" th:text="#{pageLayout.landscape}"></option>
-                  </select>
                 </div>
                 <div class="form-check mb-3">
-                  <input id="addBorder" name="addBorder" type="checkbox">
-                  <label for="addBorder" th:text="#{pageLayout.addBorder}"></label>
+                  <input id="advancedSettingsToggle" type="checkbox">
+                  <label for="advancedSettingsToggle" th:text="#{pageLayout.advancedSettings}"></label>
+                </div>
+                <div id="advancedSettings" style="display:none; border:1px solid #eee; padding:1em; border-radius:8px; margin-bottom:1em;">
+                  <div class="mb-3">
+                    <label for="pageOrder" th:text="#{pageLayout.pageOrder}"></label>
+                    <select class="form-control" id="pageOrder" name="pageOrder">
+                      <option value="LR_TD" th:text="#{pageLayout.leftRightTopDown}"></option>
+                      <option value="RL_TD" th:text="#{pageLayout.rightLeftTopDown}"></option>
+                      <option value="TD_LR" th:text="#{pageLayout.topDownLeftRight}"></option>
+                      <option value="TD_RL" th:text="#{pageLayout.topDownRightLeft}"></option>
+                    </select>
+                  </div>
+                  <div class="mb-3">
+                    <label for="orientation" th:text="#{pageLayout.orientation}"></label>
+                    <select class="form-control" id="orientation" name="orientation">
+                      <option value="PORTRAIT" th:text="#{pageLayout.portrait}"></option>
+                      <option value="LANDSCAPE" th:text="#{pageLayout.landscape}"></option>
+                    </select>
+                  </div>
+                  <div class="form-check mb-3">
+                    <input id="addBorder" name="addBorder" type="checkbox">
+                    <label for="addBorder" th:text="#{pageLayout.addBorder}"></label>
+                  </div>
                 </div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pageLayout.submit}"></button>
               </form>
@@ -76,7 +77,7 @@
               <script>
                 (function(){
                   const form = document.getElementById('multiPdfForm');
-                  const modeRadios = form.querySelectorAll('input[name="mode"]');
+                  const modeCheckbox = form.querySelector('input[name="mode"]');
                   const defaultSection = document.getElementById('defaultSection');
                   const customSection  = document.getElementById('customSection');
                   const pagesPerSheet  = document.getElementById('pagesPerSheet');
@@ -84,7 +85,7 @@
                   const colsInput      = document.getElementById('cols');
 
                   function sync() {
-                    const mode = [...modeRadios].find(r => r.checked)?.value || 'DEFAULT';
+                    const mode = modeCheckbox.checked? 'CUSTOM' : 'DEFAULT';
                     const isDefault = mode === 'DEFAULT';
 
                     // Enable/disable relevant fields
@@ -101,7 +102,20 @@
                     }
                   }
 
-                  modeRadios.forEach(r => r.addEventListener('change', sync));
+                  modeCheckbox.addEventListener('change', sync);
+                  
+                  // Show/hide advanced settings
+                  const advancedToggle = document.getElementById('advancedSettingsToggle');
+                  const advancedSettings = document.getElementById('advancedSettings');
+
+                  if (advancedToggle && advancedSettings) {
+                    advancedToggle.addEventListener('change', function() {
+                      advancedSettings.style.display = this.checked ? 'block' : 'none';
+                      advancedSettings.querySelector('#addBorder').checked = false;
+                      advancedSettings.querySelector('#pageOrder').value = 'LR_TD';
+                      advancedSettings.querySelector('#orientation').value = 'PORTRAIT';
+                    });
+                  }
                   // initial state
                   sync();
                 })();