@props(['step', 'total'])
@php
    $steps = [
        1 => __('two-factor.security.2fa.setup.stepper.step1'),
        2 => __('two-factor.security.2fa.setup.stepper.step2'),
        3 => __('two-factor.security.2fa.setup.stepper.step3'),
    ];
@endphp
<nav aria-label="{{ __('two-factor.security.2fa.setup.stepper.label') }}" class="wd-stepper">
    <ol class="wd-stepper__list">
        @for ($i = 1; $i <= $total; $i++)
            @php
                $state = $i < $step ? 'done' : ($i === $step ? 'current' : 'pending');
                $stateLabel = match($state) {
                    'done'    => __('two-factor.security.2fa.setup.stepper.status.done'),
                    'current' => __('two-factor.security.2fa.setup.stepper.status.current'),
                    'pending' => __('two-factor.security.2fa.setup.stepper.status.pending'),
                };
            @endphp
            <li class="wd-stepper__item is-{{ $state }}"
                @if($state === 'current') aria-current="step" @endif>
                <span class="wd-stepper__bullet" aria-hidden="true">
                    @if($state === 'done')
                        <svg viewBox="0 0 16 16" width="14" height="14" focusable="false" class="wd-stepper__check">
                            <path d="M3.5 8.5l3 3 6-7" fill="none" stroke="currentColor"
                                  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    @else
                        <span class="wd-stepper__num">{{ $i }}</span>
                    @endif
                </span>
                <span class="wd-stepper__label">
                    <span class="visually-hidden">
                        {{ __('two-factor.security.2fa.setup.stepper.position', ['n' => $i, 'total' => $total]) }} —
                        {{ $stateLabel }} :
                    </span>
                    {{ $steps[$i] ?? '' }}
                </span>
            </li>
        @endfor
    </ol>
</nav>