@props([
    'auditions',
    ])
<x-card.card {{ $attributes->merge(['class'=>'grow mx-2 my-2']) }}>
    <x-card.heading>
        {{ $slot }}
    </x-card.heading>
    <div class="p-3 flex-col" x-data="{ checked: false }">
        <div class="pb-2 mb-3 -mt-0.5 border-b">
            <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>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2">
            @foreach($auditions->chunk($auditions->count() /2) as $chunk)
                <div>
                    @foreach($chunk as $audition)
                        <div class="relative flex items-start">
                            <div class="flex h-6 items-center">
                                <input id="auditions-{{ $audition->id }}" name="auditions[{{$audition->id}}]" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" x-bind:checked="checked">
                            </div>
                            <div class="ml-3 text-sm leading-6">
                                <label for="comments" class="font-medium text-gray-900">{{ $audition->name }}</label>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endforeach
        </div>
    </div>
</x-card.card>