@php
    /** @var array<string, array{label: string, subtitle: string, icon: string, theme: string}> $employeeSteps */
    $stepsListClass = trim('employee-create__steps ' . ($stepsClass ?? ''));
@endphp

<nav aria-label="Employee sections">
    <ol class="{{ $stepsListClass }}">
        @foreach($employeeSteps as $key => $step)
            <li
                class="employee-create__step employee-create__step--{{ $step['theme'] }}"
                :class="{
                    'is-active': isActive('{{ $key }}'),
                    'is-done': isDone('{{ $key }}')
                }"
            >
                <span class="employee-create__step-index" aria-hidden="true">
                    <span x-show="!isDone('{{ $key }}')">{{ $loop->iteration }}</span>
                    <i class="bi bi-check-lg" x-show="isDone('{{ $key }}')" x-cloak></i>
                </span>
                <button type="button" class="employee-create__step-card" @click="tab = '{{ $key }}'">
                    <span class="employee-create__step-icon">
                        <i class="bi {{ $step['icon'] }}"></i>
                    </span>
                    <span class="employee-create__step-copy">
                        <span class="employee-create__step-title">{{ $step['label'] }}</span>
                        <span class="employee-create__step-subtitle">{{ $step['subtitle'] }}</span>
                    </span>
                </button>
            </li>
        @endforeach
    </ol>
</nav>