From 0a252aa4df75cf7d48ef30d964a18991368159f4 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Sat, 7 Jun 2025 09:12:44 +0200
Subject: [PATCH] fix(backend): Reflect formElementSection changes in thymeleaf
 template

---
 .../templates/application_form_template.html  | 44 ++++++++++++++-----
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/legalconsenthub-backend/src/main/resources/templates/application_form_template.html b/legalconsenthub-backend/src/main/resources/templates/application_form_template.html
index 5081671..5b898b0 100644
--- a/legalconsenthub-backend/src/main/resources/templates/application_form_template.html
+++ b/legalconsenthub-backend/src/main/resources/templates/application_form_template.html
@@ -52,11 +52,30 @@
             margin-bottom: 15px;
         }
 
-        .form-element {
-            margin-bottom: 20px;
+        .form-section {
+            margin-bottom: 30px;
         }
 
-        .form-element h3 {
+        .form-section h3 {
+            font-size: 1.2em;
+            color: #444;
+            margin-bottom: 10px;
+            border-bottom: 1px solid #ddd;
+            padding-bottom: 5px;
+        }
+
+        .form-section p.description {
+            font-style: italic;
+            color: #666;
+            margin: 5px 0 15px;
+        }
+
+        .form-element {
+            margin-bottom: 20px;
+            margin-left: 20px;
+        }
+
+        .form-element h4 {
             font-size: 1.1em;
             margin-bottom: 5px;
         }
@@ -101,14 +120,19 @@
 
 <div class="contract-section">
     <h2>Formularelemente</h2>
-    <div th:each="elem : ${applicationForm.formElements}" class="form-element">
-        <h3 th:text="${elem.title}"></h3>
-        <p class="description" th:if="${elem.description}" th:text="${elem.description}"></p>
+    <div th:each="section : ${applicationForm.formElementSections}" class="form-section">
+        <h3 th:text="${section.title}"></h3>
+        <p class="description" th:if="${section.description}" th:text="${section.description}"></p>
+        
+        <div th:each="elem : ${section.formElements}" class="form-element">
+            <h4 th:text="${elem.title}"></h4>
+            <p class="description" th:if="${elem.description}" th:text="${elem.description}"></p>
 
-        <ul>
-            <li th:each="option : ${elem.options}" th:if="${option.value == 'true'}" th:text="${option.label}"></li>
-        </ul>
-        <p th:if="${elem.options.?[value == 'true'].isEmpty()}">Keine Auswahl getroffen</p>
+            <ul>
+                <li th:each="option : ${elem.options}" th:if="${option.value == 'true'}" th:text="${option.label}"></li>
+            </ul>
+            <p th:if="${elem.options.?[value == 'true'].isEmpty()}">Keine Auswahl getroffen</p>
+        </div>
     </div>
 </div>