@php
    /**
     * @var \App\Models\Audition[] $drawnAuditions A collection of all auditions that have been drawn
     */
@endphp
<x-layout.app>

    @include('admin.draw.clear-draw-warning')

    <x-form.form method="DELETE" action="{{ route('admin.draw.destroy') }}">
        <x-card.card class="mb-5 mx-auto max-w-3xl" id="drawn-auditions-card" x-data="{ checked: false, showModal: false }">
            <x-card.heading>
                Previously Drawn Auditions
                <x-slot:right_side>
                    <button @click="checked = 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 = 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($drawnAuditions 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"/>
                        {{$audition->name}}
                    </div>
                @endforeach
            </div>
            <div class="flex w-full justify-between ">
                <div></div>
                <div class="mb-5 mr-10 ">
                    <x-form.button type="button" class="ml-auto" @click="showModal=true">Clear Draw</x-form.button>
                </div>
            </div>
            @include('admin.draw.clear-draw-modal-confirm')
        </x-card.card>

    </x-form.form>
</x-layout.app>