Files
myep/templates/booking/create_step_3.html.twig
T
Björn Fromme 9eda12981a feat: htmx powered requests, improved loading indicator
feat: loading indicator and htmx form submit
2025-10-14 18:07:59 +02:00

90 lines
3.3 KiB
Twig

{% extends 'layout.html.twig' %}
{# Local form theme override for consistent fieldset rendering #}
{% use 'forms.html.twig' %}
{% block form_row %}
{%- if form.vars.expanded is defined and form.vars.expanded -%}
{# Expanded forms get fieldset wrapper #}
<fieldset class="mb-1">
<legend class="font-semibold mb-1">
{{- form.vars.label -}}
</legend>
{{- form_widget(form, {
'attr': attr|default({})
}) -}}
{{- form_errors(form) -}}
{{- form_help(form) -}}
</fieldset>
{%- else -%}
{{- parent() -}}
{%- endif -%}
{% endblock %}
{% block content %}
{% include '_partials/_flashes.html.twig' %}
<h1>Neue Buchung</h1>
<div class="grid grid-cols-3 gap-8">
<div id="form-wrapper" class="col-span-2">
<h2 class="mb-6">Zahlungsart</h2>
{{ form_start(form, {
'attr': {
'novalidate': 'novalidate',
'hx-post': path('app_booking_create_step_3'),
'hx-target': '#form-wrapper',
'hx-select': '#form-wrapper',
'hx-swap': 'outerHTML'
}
}) }}
{# Payment method selection with HTMX #}
<div id="form-payment"
hx-post="{{ path('app_booking_create_step_3_refresh') }}"
hx-trigger="change from:input[type='radio']"
hx-target="#form-payment"
hx-select="#form-payment"
hx-swap="outerHTML">
{{ form_row(form.paymentMethod) }}
{# Bank account section - conditionally rendered #}
{% if form.bankAccount is defined %}
<div class="border border-gray-300 rounded-lg p-4 bg-gray-50 mt-4">
<h3 class="font-semibold text-lg mb-4">Bankverbindung</h3>
<div class="space-y-4">
{{ form_row(form.bankAccount.iban) }}
{{ form_row(form.bankAccount.accountHolder) }}
{{ form_row(form.bankAccount.bankName) }}
<div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded">
{{ form_row(form.bankAccount.sepaMandateAccepted, {
'label_attr': {'class': 'text-sm'}
}) }}
</div>
</div>
</div>
{% endif %}
</div>
<div class="flex justify-between pt-6">
<a href="{{ path('app_booking_create_step_2') }}" class="button bg-button bg-button--secondary">Zurück</a>
<button type="submit" class="button bg-button bg-button--secondary" {{ stimulus_action('loading', 'toggle') }}>Weiter</button>
</div>
{{ form_end(form) }}
</div>
<div id="booking-summary">
{% include 'booking/_summary.html.twig' with {
'bookingCreateDto': bookingCreateDto,
'participantCount': participantsCount,
'groupedSelectedRooms': groupedSelectedRooms,
'assignmentCounts': assignmentCounts
} %}
</div>
</div>
{% endblock %}