@php
    /**
     * @var \App\Models\Event[] $events A collection of all events with auditions
     */
@endphp

<x-layout.app>
    <x-form.form action="{{ route('admin.draw.store') }}" method="POST" id="draw-form">
        @foreach($events as $event)
            @continue($event->auditions->isEmpty())
            <x-card.card class="mb-5 mx-auto max-w-3xl" id="event-section-{{$event->id}}" x-data="{ checked{{$event->id}}: false }">
                <x-card.heading>
                    {{ $event->name }}
                    <x-slot:right_side>
                        <button @click="checked{{$event->id}} = true" class="rounded bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100 mr-3" type="button">Check All</button>
                        <button @click="checked{{$event->id}} = false" class="rounded bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100" type="button">Uncheck All</button>
                    </x-slot:right_side>
                </x-card.heading>
                <div class="grid gap-y-3 md:grid-cols-2 lg:grid-cols-3 px-5 my-3 pb-3 border-b border-gray-100">
                    @foreach($event->auditions as $audition)
                        <div id="auditiongroup-{{$audition->id}}" class="flex align-middle">
                            <x-form.checkbox id="auditionCheckbox-{{$audition->id}}"  name="audition[{{$audition->id}}]" x-bind:checked="checked{{$event->id}}"/>
                            {{$audition->name}}
                        </div>
                    @endforeach
                </div>
                <div class="flex w-full justify-between ">
                    <div></div>
                    <div class="mb-5 mr-10 ">
                        <x-form.button type="submit" class="ml-auto">Run Draw</x-form.button>
                    </div>
                </div>
            </x-card.card>
        @endforeach
    </x-form.form>
</x-layout.app>