{{--
    Вкладки.

    ⚠️ Разметка приходит РАЗВЁРНУТОЙ: все вкладки видны друг под другом,
    каждая со своим заголовком. Сворачивает их скрипт, добавляя контейнеру
    класс `is-ready`. Сделай наоборот — и не загрузившийся скрипт оставил бы
    карточку товара без описания и характеристик, а робота — без текста,
    ради которого страница и существует.
--}}
<div class="kz-tabs" data-kz-tabs>
    <div class="kz-tabs__bar" role="tablist">
        @foreach ($tabs as $index => $tab)
            <button type="button"
                    class="kz-tabs__tab"
                    role="tab"
                    aria-controls="{{ $tab['id'] }}"
                    aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
                    data-kz-tab>{{ $tab['title'] }}</button>
        @endforeach
    </div>

    <div class="kz-tabs__panes">
        @foreach ($tabs as $tab)
            <section class="kz-tabs__pane" id="{{ $tab['id'] }}" role="tabpanel" data-kz-pane>
                <h3 class="kz-tabs__pane-title">{{ $tab['title'] }}</h3>
                {!! $tab['html'] !!}
            </section>
        @endforeach
    </div>
</div>

<script src="{{ $script }}" defer></script>