feat: htmx powered requests, improved loading indicator

feat: loading indicator and htmx form submit

templates/booking/create_step_4.html.twig

@@ -21,7 +21,7 @@
         </div>
     {% endif %}
 
-    <div>
+    <div id="form-wrapper">
             <h2 class="mb-6">Buchung bestätigen</h2>
 
             {# Travel Summary #}
@@ -290,7 +290,15 @@
             </div>
 
             {# Confirmation Form #}
-            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
+            {{ form_start(form, {
+                'attr': {
+                    'novalidate': 'novalidate',
+                    'hx-post': path('app_booking_create_step_4'),
+                    'hx-target': '#form-wrapper',
+                    'hx-select': '#form-wrapper',
+                    'hx-swap': 'outerHTML'
+                }
+            }) }}
 
             <div class="mb-8 p-6 bg-blue-50 border border-blue-200 rounded-lg">
                 {{ form_row(form.confirmationAccepted, {
@@ -300,7 +308,7 @@
 
             <div class="flex justify-between pt-6">
                 <a href="{{ path('app_booking_create_step_3') }}" class="button bg-button bg-button--secondary">Zurück</a>
-                <button type="submit" class="button bg-button bg-button--primary">Verbindlich buchen</button>
+                <button type="submit" class="button bg-button bg-button--primary" {{ stimulus_action('loading', 'toggle') }}>Verbindlich buchen</button>
             </div>
 
             {{ form_end(form) }}