<div class="c-accordion js-accordion">
    <ul class="c-accordion__list">
        @foreach($accordionItems as $accordionItem)
            @php $accordionItemSlug = !empty($accordionItem->slug) ? $accordionItem->slug : 'accordion-label-' . $loop->iteration @endphp
            <li class="c-accordion__item">
                <a class="c-accordion__label  js-toggle-trigger" href="#{{$accordionItemSlug}}" data-toggle-id="{{ $accordionItemSlug }}">
                    <span class="c-accordion__number">@include('components.ring', ['modifiers' => 'on-light', 'ringBody' => $loop->iteration,])</span>
                    <h2 class="c-accordion__heading">
                        <span>{{ $accordionItem->name }}</span>
                        <span class="c-accordion__arrow">@include('components.icons.arrowheadDown')</span>
                    </h2>
                </a>
                <div class="c-accordion__content  js-toggle-target" data-toggle-id="{{ $accordionItemSlug }}">
                    {!! $accordionItem->description !!}
                </div>
            </li>
        @endforeach
    </ul>
</div>