@php
    $step = $steps[$index];
    $active = $index == 0 ? 'active' : '';
@endphp

<div class="tab-pane fade show {{ $active }}" id="cadastro-{{ $step['code'] }}-pane" role="tabpanel"
    aria-labelledby="cadastro-{{ $step['code'] }}-tab" tabindex="0" data-order="{{ $order }}">

    <h3 class="text-light-primary text-center my-3 d-flex justify-content-left justify-content-md-center">
        <svg width="32" height="32" fill="currentColor"
            class="align-text-bottom bi bi-{{ $step['tabtitleicon'] }} m-1 text-start" viewBox="0 0 16 16">
            <use href="#{{ $step['tabtitleicon'] }}" />
        </svg>
        <div class="d-flex align-items-center"><span class="align-middle">{{ $step['tabtitle'] }}</span></div>
    </h3>

    {{ $slot }}

    <div class="row g-0">
        <div class="col d-flex justify-content-end">

            @if ($order !== 'first')
                <button class="btn btn-secondary-light btn-prev m-2" id="cadastro-{{ $step['code'] }}-tab-prev"
                    type="button" role="tab" aria-controls="cadastro-{{ $steps[$index - 1]['code'] }}-pane"
                    aria-selected="false"><svg width="16" height="16" fill="currentColor"
                        class="align-bottom bi bi-arrow-left m-1 text-start" viewBox="0 0 16 16">
                        <use href="#arrow-left" />
                    </svg><span>Anterior</span></button>
            @else
                <button disabled class="btn btn-secondary-light btn-prev m-2" id="cadastro-none-tab-prev" type="button"
                    role="tab" aria-selected="false"><svg width="16" height="16" fill="currentColor"
                        class="align-bottom bi bi-arrow-left m-1 text-start" viewBox="0 0 16 16">
                        <use href="#arrow-left" />
                    </svg><span>Anterior</span></button>
            @endif
        </div>
        <div class="col d-flex justify-content-start">
            @if ($order !== 'last')
                <button class="btn btn-primary-light btn-next m-2" id="cadastro-{{ $step['code'] }}-tab-next"
                    type="button" role="tab" aria-controls="cadastro-{{ $steps[$index + 1]['code'] }}-pane"
                    aria-selected="false"><span>Próximo</span><svg width="16" height="16" fill="currentColor"
                        class="align-bottom bi bi-arrow-right m-1 text-start" viewBox="0 0 16 16">
                        <use href="#arrow-right" />
                    </svg>
                </button>
            @else
                <button type="submit" class="btn btn-success-light m-2">
                    Finalizar<svg width="16" height="16" fill="currentColor"
                        class="align-bottom bi bi-check-lg m-1 text-start" viewBox="0 0 16 16">
                        <use href="#check-lg" />
                    </svg>
                </button>
            @endif
        </div>
    </div>
</div>