<div class="o-workflow" data-kal="fade">
    <div class="o-workflow__main">
        <div class="o-workflow__bullets">
            <ul class="o-workflow__list" data-kal="slide-up">
                @if(isset($methodSteps))
                    @foreach($methodSteps as $methodStep)
                        <li class="o-workflow__item">
                            <a class="o-workflow__link" @if(isset($links) && isset($links->method)) href="{{ $links->method->route }}#{{ $methodStep->slug }}" @endif>
                                <div class="o-workflow__number">
                                    @include('components.ring', ['ringBody' => $loop->iteration,])
                                </div>
                                <p class="o-workflow__label">{{ $methodStep->name }}</p>
                            </a>
                        </li>
                    @endforeach
                @endif
            </ul>
        </div>

        <div class="o-workflow__body">
            <div class="o-workflow__content" data-kal="slide-down">
                @if(isset($components) && $components->has(($componentKey ?? 'method')))
                    <div class="s-text  s-text--on-dark">
                        {!! $components->get(($componentKey ?? 'method'))->text !!}
                    </div>
                @endif

                <div class="o-workflow__action">
                    @include('components.button', [
                        'modifiers' => 'secondary',
                        'buttonText' => __('site/global.method.buttonText'),
                        'buttonLink' => $links->method->route ?? '/',
                    ])
                </div>
            </div>
        </div>
    </div>
</div>