@props(['steps'])

{{-- Wizard chrome (Bootstrap/Vuexy) — mismo concepto que el form-wizard Tailwind:
     stepper horizontal verde + área de contenido. --}}
<div class="card shadow-sm bs-form-wizard">
    <div class="card-header border-bottom px-3 py-4">
        <ul class="list-unstyled d-flex align-items-center justify-content-between mb-0 specs-stepper">
            @foreach ($steps as $step)
                <li class="step-item text-center {{ $step->isCurrent() ? 'active' : '' }} {{ $step->isPrevious() ? 'done' : '' }}">
                    <div class="d-flex flex-column align-items-center">
                        <span class="step-icon avatar-initial rounded-circle bg-label-secondary d-flex align-items-center justify-content-center position-relative">
                            <i class="{{ $step->icon }}"></i>
                            <span class="step-badge badge rounded-pill text-white border border-2 border-white position-absolute top-0 start-100 translate-middle"
                                style="font-size: .6rem;">{{ $loop->iteration }}</span>
                        </span>
                        <span class="step-label small fw-medium mt-2 text-capitalize d-none d-sm-block">{{ $step->label }}</span>
                    </div>
                </li>
                @if (! $loop->last)
                    <li class="step-line mx-2 {{ $step->isPrevious() ? 'done' : '' }}"></li>
                @endif
            @endforeach
        </ul>
    </div>

    <div class="p-3 p-md-4">
        {{ $slot }}
    </div>
</div>