abiball/templates/ticket/_partials/_form.html.twig

48 lines
3.0 KiB
Twig

<div class="bg-white/50 backdrop-blur-sm rounded-2xl border border-gray-100 p-4 hover:shadow-md transition-all duration-300">
<div class="grid grid-cols-12 gap-4">
<div class="relative col-span-4">
<twig:ux:icon name="mingcute:ticket-fill" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
<select name="ticket" class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all">
<option value="" disabled selected>Ticket wählen*</option>
<option value="1">All-Inclusive</option>
<option value="2">After-Show</option>
<option value="3">Kind (6-12)</option>
<option value="4">Kind (0-6)</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
<twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-gray-400" />
</div>
</div>
<div class="relative col-span-3">
<twig:ux:icon name="mdi:food" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
<select name="food" class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all">
<option value="" disabled selected>Ernährung wählen*</option>
<option value="1">Mit Fleisch</option>
<option value="2">Vegetarisch</option>
<option value="3">Vegan</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
<twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-gray-400" />
</div>
</div>
<div class="relative col-span-4">
<twig:ux:icon name="mdi:note" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
<input type="text"
placeholder="z.B. Allergien"
name="note"
class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-gray-200 text-gray-800 text-[15px] placeholder-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" />
</div>
<div class="flex justify-center items-center col-span-1">
<button data-action="form#removeEntry"
class="group p-2.5 hover:bg-red-50 rounded-xl transition-all duration-300"
title="Ticket entfernen">
<twig:ux:icon name="mingcute:delete-fill"
class="w-6 h-6 text-red-400 group-hover:text-red-500 transition-colors" />
</button>
</div>
</div>
</div>