<div>
    <div class="d-flex flex-wrap gap-4 align-items-baseline">
        <x-secondary-button class="pe-4" wire:click="showStep('mono-tri-phase-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'>Voici les trois solutions pour l’installation de vos panneaux photovoltaïques 😊</h4>
    </div>

    <div>

        <div class="container d-flex flex-column gap-3" x-data="{
                    value: @entangle("solution_id").defer,
                    select(option){
                        this.value = option;
                        $wire.set('solution_id', option, true);
                    },
                    isSelected(option) { return this.value === option },
                }">

            @foreach($solutions as $solution)
                <x-solution-card :value="$solution->id"
                                 :recommended="$solution->recommended"
                                 :index="$loop->iteration"
                                 :solution="$solution"
                />
            @endforeach


            <div class="mt-3">
                <x-primary-button wire:click="submit">
                    Envoyer ma demande
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" 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="M5 12l5 5l10 -10" /></svg>
                </x-primary-button>
            </div>
        </div>

    </div>

</div>
