@props([
    'steps' => [],
    'title' => null,
])

{{--
    A completion rail, not a wizard.

    Registration stays a single page — a receptionist with the patient standing
    at the desk should never be blocked behind a "next" button — so this only
    reports what is filled in and jumps to a card when clicked. The ticks are set
    from resources/js by reading the fields inside each section.
--}}
<nav class="clinic-form-progress" data-clinic-form-progress aria-label="{{ $title }}">
    @if ($title)
        <p class="clinic-form-progress__title">{{ $title }}</p>
    @endif

    <ol class="clinic-form-progress__list">
        @foreach ($steps as $step)
            <li class="clinic-form-progress__step" data-clinic-progress-step="{{ $step['id'] }}">
                <a class="clinic-form-progress__link" href="#{{ $step['id'] }}">
                    <span class="clinic-form-progress__dot" aria-hidden="true">
                        <i class="bi bi-check"></i>
                    </span>
                    <span class="clinic-form-progress__label">{{ $step['label'] }}</span>
                    @if (! empty($step['required']))
                        <span class="clinic-form-progress__required" aria-hidden="true">*</span>
                    @endif
                </a>
            </li>
        @endforeach
    </ol>

    <p class="clinic-form-progress__meta" data-clinic-progress-summary role="status"></p>
</nav>