@php
    $isStepValid = $stepInstance->isValid();
    $isFailedStep = $stepInstance->validationFails;
    $stepIsGreaterThan = $this->stepIsGreaterThan($stepInstance->getOrder());
    $isCurrent = $this->stepIs($stepInstance->getOrder());
    $color = $isFailedStep? 'danger' : ($isCurrent? 'primary' : ($stepIsGreaterThan? 'success' :  'light'));
@endphp
<li role="tab" @class(['text-center', 'current' => $isCurrent]) aria-disabled="false" aria-selected="true">
    <x-ui.button
        class="btn-icon mb-1"
        :color="$color"
        wire:click="setStep({{ $stepInstance->getOrder() }})"
        icon="{{ $stepInstance->icon() }}"
    />
    <div @class(['text-center', 'fw-bold' => $isCurrent])>{{ $stepInstance->title() }}</div>
</li>