{% trans_default_domain 'admin' %}

<div {{ attributes }}>
    <div class="space-y-6">
        <div>
            <h3 class="text-lg font-semibold leading-6 text-gray-900 dark:text-white">Neue freie Buchung</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                Erfassen Sie eine manuelle Buchung für diesen Debitor. Ein positiver Wert erhöht das Guthaben.
            </p>
        </div>

        <div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-6">
            <div class="sm:col-span-2">
                <label for="bookingValue" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">Buchungswert</label>
                <div class="mt-2 relative rounded-md shadow-sm">
                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                        <span class="text-gray-500 sm:text-sm">€</span>
                    </div>
                    <input data-model="bookingValue" type="number" id="bookingValue" step="0.01"
                           class="block w-full rounded-md bg-white px-3 py-1.5 pl-7 text-base text-gray-900 border-0 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-primary-500"
                           placeholder="0,00">
                </div>
            </div>

            <div class="sm:col-span-4">
                <label for="postingRecord" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">Buchungstext</label>
                <div class="mt-2">
                    <input data-model="postingRecord" id="postingRecord" type="text"
                           class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 border-0 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-primary-500">
                </div>
            </div>
        </div>

        <div class="mt-5 sm:mt-6 flex justify-end gap-x-3">
            <twig:Admin:Button command="close" commandfor="admin-modal-dialog">Abbrechen</twig:Admin:Button>
            <twig:Admin:Button variant="primary" data-action="live#action" data-live-action-param="submit">Buchung erstellen</twig:Admin:Button>
        </div>
    </div>

    {% if submitted %}
        <twig:Turbo:Stream:Update target="#modal" />
    {% endif %}
</div>
