@extends('components.quiz.layouts.default', ['title' => "Durée souhaitée"])

@section('quiz.content')
<div class="flex flex-col max-w-xs mx-auto gap-4 w-full text-center">

    <button @class([
        'w-full rounded-xl bg-neutral-100 border-2 relative overflow-hidden p-4',
        'transition-all duration-300',
        'hover:border-blue-700',
        "!bg-blue-600 text-white border-blue-700" => $duration == "De 1 à 3 mois"
    ]) type="button" wire:click='updateAttribute("duration", "De 1 à 3 mois")'>

        <p>De 1 à 3 mois</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 p-4',
        'transition-all duration-300',
        'hover:border-blue-700',
        "!bg-blue-600 text-white border-blue-700" => $duration == "De 3 à 6 mois"
    ]) type="button" wire:click='updateAttribute("duration", "De 3 à 6 mois")'>

        <p>De 3 à 6 mois</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 p-4',
        'transition-all duration-300',
        'hover:border-blue-700',
        "!bg-blue-600 text-white border-blue-700" => $duration == "Plus de 6 mois"
    ]) type="button" wire:click='updateAttribute("duration", "Plus de 6 mois")'>

        <p>Plus de 6 mois</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>
</div>
@overwrite