From 8da77ee13ba6687e3528156a115dd463a0273818 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 23 Jul 2025 15:48:59 +0200
Subject: [PATCH] wip: collapsible forms

---
 templates/booking/create_step_2.html.twig | 70 +++++++++++++----------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/templates/booking/create_step_2.html.twig b/templates/booking/create_step_2.html.twig
index 3d3eb97..be407ee 100644
--- a/templates/booking/create_step_2.html.twig
+++ b/templates/booking/create_step_2.html.twig
@@ -12,36 +12,46 @@
             {% block participants_form %}
                 <div id="participants-form" class="space-y-8 pb-8"{% if htmx_oob_swap is defined and htmx_oob_swap %} hx-swap-oob="true"{% endif %}>
                     {% for participant in form.participants %}
-                        <fieldset class="border rounded-md p-8 pt-4">
-                            <legend class="font-bold text-xl px-2">
-                                Teilnehmer:in {{ loop.index }}
-                            </legend>
-                            <div class="grid grid-cols-2 gap-4 pb-4">
-                                {{ form_row(participant.firstName) }}
-                                {{ form_row(participant.lastName) }}
-                                {{ form_row(participant.dateOfBirth) }}
-                                {{ form_row(participant.gender) }}
-                                {{ form_row(participant.nationality) }}
-                            </div>
-                            <div class="grid grid-cols-2 gap-4">
-                                {{ form_row(participant.email) }}
-                                {{ form_row(participant.mobile) }}
-                            </div>
-                            <div class="grid grid-cols-2 gap-4">
-                                {{ form_row(participant.bodyDimensions.height) }}
-                                {{ form_row(participant.bodyDimensions.shoeSize) }}
-                                {{ form_row(participant.bodyDimensions.weight) }}
-                            </div>
-                            <div class="grid grid-cols-1 gap-4 pt-4">
-                                {# hx-swap="none" tells HTMX not to do a normal swap, as OOB will handle it #}
-                                {{ form_row(participant.assignedRoomId, {
-                                    'attr': {
-                                        'hx-post': path('app_booking_create_step_2_refresh'),
-                                        'hx-swap': 'none'
-                                    }
-                                }) }}
-                            </div>
-                        </fieldset>
+                        {% set participantDataValid = participant.vars.valid %}
+                        <div class="{{ html_classes('border rounded px-4 py-2', { 'border-gray-300': participantDataValid, 'border-red-700': not participantDataValid }) }}" {{ stimulus_controller('toggle', {'open': participant.vars.valid == false}, { 'closed': 'hidden' }) }}>
+                            <fieldset>
+                                <legend class="w-full flex items-center justify-between">
+                                    <span class="font-bold text-xl">Teilnehmer:in {{ loop.index }}</span>
+                                    <button type="button" tabindex="0" {{ stimulus_action('toggle', 'toggle') }}>
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                                        </svg>
+                                    </button>
+                                </legend>
+                                <div class="hidden py-4" {{ stimulus_target('toggle', 'toggle') }}>
+                                    <div class="grid grid-cols-2 gap-4 pb-4">
+                                        {{ form_row(participant.firstName) }}
+                                        {{ form_row(participant.lastName) }}
+                                        {{ form_row(participant.dateOfBirth) }}
+                                        {{ form_row(participant.gender) }}
+                                        {{ form_row(participant.nationality) }}
+                                    </div>
+                                    <div class="grid grid-cols-2 gap-4">
+                                        {{ form_row(participant.email) }}
+                                        {{ form_row(participant.mobile) }}
+                                    </div>
+                                    <div class="grid grid-cols-2 gap-4">
+                                        {{ form_row(participant.bodyDimensions.height) }}
+                                        {{ form_row(participant.bodyDimensions.shoeSize) }}
+                                        {{ form_row(participant.bodyDimensions.weight) }}
+                                    </div>
+                                    <div class="grid grid-cols-1 gap-4 pt-4">
+                                        {# hx-swap="none" tells HTMX not to do a normal swap, as OOB will handle it #}
+                                        {{ form_row(participant.assignedRoomId, {
+                                            'attr': {
+                                                'hx-post': path('app_booking_create_step_2_refresh'),
+                                                'hx-swap': 'none'
+                                            }
+                                        }) }}
+                                    </div>
+                                </div>
+                            </fieldset>
+                        </div>
                     {% endfor %}
                 </div>
             {% endblock %}