@extends('components.quiz.layouts.default', ['title' => 'Localisation du box'])

@section('quiz.content')
<div class="grid grid-cols-2 gap-4 w-full text-center">
    <button @class([
        'w-full rounded-xl bg-neutral-100 border-2 relative overflow-hidden aspect-square',
        'transition-all duration-300',
        'hover:border-blue-700',
        "!bg-blue-600 text-white border-blue-700" => $box_location == "Anse"
    ]) type="button" wire:click='updateAttribute("box_location", "Anse")'>

        <p>Anse</p>

        <div wire:loading class="absolute inset-0 pointer-events-none">
            <div class="w-full h-full flex items-center justify-center p-4 z-10 bg-blue-600 fill-white">
                @include('components.quiz.public.loading.blocks-spinner')
            </div>
        </div>
    </button>
    <button @class([
        'w-full rounded-xl bg-neutral-100 border-2 relative overflow-hidden aspect-square',
        'transition-all duration-300',
        'hover:border-blue-700',
        "!bg-blue-600 text-white border-blue-700" => $box_location == "Villefranche-Sur-Saône"
    ]) type="button" wire:click='updateAttribute("box_location", "Villefranche-Sur-Saône")'>
        <p>Villefranche-Sur-Saône</p>
        <div wire:loading class="absolute inset-0 pointer-events-none">
            <div class="w-full h-full flex items-center justify-center p-4 z-10 bg-blue-600/20 backdrop-blur-sm fill-white">
                @include('components.quiz.public.loading.blocks-spinner')
            </div>
        </div>
    </button>
</div>
@overwrite