{{ form_start(form, {'attr': {
	'class': 'space-y-2 md:space-y-4 w-full',
	'data-action': 'live#action:prevent',
	'data-live-action-param': 'save',
	'data-model': 'norender|*'
	}
}) }}

{# Lieu de pension #}
<div>
	<label class="label-style">
		{{ form_label(form.stable) }}
	</label>
	{{ form_widget(form.stable, {
        'attr': {
            'class': 'input-style w-full ' ~ (form_errors(form.stable) ? 'input-error')
        }
    }) }}
	<div class="input-error-message">
		{{ form_errors(form.stable) }}
	</div>
</div>

{# Première ligne : période + type #}
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-4">
	<div>
		<label class="label-style">
			{{ form_label(form.periode) }}
		</label>
		{{ form_widget(form.periode, {
            'attr': {
                'class': 'input-style w-fit ' ~ (form_errors(form.periode) ? 'input-error')
            }
        }) }}
		<div class="input-error-message">
			{{ form_errors(form.periode) }}
		</div>
	</div>

	<div class="md:col-span-2">
		<label class="label-style">
			{{ form_label(form.type) }}
		</label>
		{{ form_widget(form.type, {
            'attr': {
                'class': 'input-style w-full ' ~ (form_errors(form.type) ? 'input-error')
            }
        }) }}
		<div class="input-error-message">
			{{ form_errors(form.type) }}
		</div>
	</div>
</div>

{# Deuxième ligne : prix + date paiement + type paiement #}
<div class="flex flex-col md:flex-row gap-2 md:gap-10">
	<div class="w-full md:w-fit">
		<label class="label-style">
			{{ form_label(form.price) }}
		</label>
		{{ form_widget(form.price, {
            'attr': {
                'class': 'input-style w-20 ' ~ (form_errors(form.price) ? 'input-error')
            }
        }) }}
		<div class="input-error-message">
			{{ form_errors(form.price) }}
		</div>
	</div>

	<div class="w-full md:w-fit">
		<label class="label-style">
			{{ form_label(form.paymentDate) }}
		</label>
		{{ form_widget(form.paymentDate, {
            'attr': {
                'class': 'input-style w-fit ' ~ (form_errors(form.paymentDate) ? 'input-error')
            }
        }) }}
		<div class="input-error-message">
			{{ form_errors(form.paymentDate) }}
		</div>
	</div>

	<div class="flex-1 flex flex-col md:flex-row gap-2" data-controller="view-cheque-number">
		<div>
			<label class="label-style">
				{{ form_label(form.paymentType) }}
			</label>
			{{ form_widget(form.paymentType, {
                'attr': {
                    'data-view-cheque-number-target': 'type',
                    'class': 'input-select-style ' ~ (form_errors(form.paymentType) ? 'input-error')
                }
            }) }}
			<div class="input-error-message">
				{{ form_errors(form.paymentType) }}
			</div>
		</div>
		<div class="flex-1 flex flex-col justify-end">
			<div class="hidden" data-view-cheque-number-target="chequeNumber">
				{{ form_widget(form.chequeNumber, {
                    'attr': {
                        'class': 'input-style w-full ' ~ (form_errors(form.chequeNumber) ? 'input-error')
                    }
                }) }}
				<div class="input-error-message">
					{{ form_errors(form.chequeNumber) }}
				</div>
			</div>
		</div>
	</div>
</div>

{# Bouton #}
<div class="flex justify-center mt-6">
	<button type="submit" class="button-style button-save button-flex">
		{{ ux_icon('famicons:save-outline', { class: 'inline w-5 h-5'}) }}
		Enregistrer
	</button>
</div>

{{ form_end(form) }}