@php use App\Enums\ToitureTypesEnum; @endphp
<div class="d-flex flex-column gap-5">

    <div class="d-flex flex-wrap gap-4 align-items-baseline">
        <x-secondary-button class="pe-4" wire:click="showStep('consommation-step')">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24"
                 height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                 stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M15 6l-6 6l6 6"/>
            </svg>
            Retour
        </x-secondary-button>
        <h4 class='step-header'>Où souhaitez-vous fixer vos panneaux photovoltaïques ?</h4>
    </div>

    <div class="d-flex flex-wrap justify-content-center gap-4" x-data="{
                        value: @entangle("toiture_type"),
                        select(option){
                            this.value = option;
                            $wire.set('toiture_type', option);
                        },
                        isSelected(option) { return this.value === option },
                    }">

        <x-card-checkbox title="Toiture Plate"
                         img_path="img/toiture-plate.svg"
                         :value="ToitureTypesEnum::PLAT->value"/>

        <x-card-checkbox title="Toiture inclinée"
                         img_path="img/toiture-inclinee.svg"
                         :value="ToitureTypesEnum::INCLINE->value"/>

        <x-card-checkbox title="Fixation au sol"
                         img_path="img/fixation-sol.svg"
                         :value="ToitureTypesEnum::SOL->value"/>

        <x-card-checkbox title="Fixation façade"
                         img_path="img/fixation-facade.svg"
                         :value="ToitureTypesEnum::FACADE->value"/>
    </div>

    @error('toiture_type')
        <div class="text-danger mt-2">{{ $message }}</div>
    @enderror
</div>
