@section('componentable-area-' . $loop->iteration)

@php $componentLoop = $loop; @endphp

<div class="o-tabs  js-tabs">
    <div class="o-tabs__controls">

        @foreach($component->tabs as $tab)
            @if($tab->label || $tab->text)
                <button class="o-tabs__button  js-tabs-trigger @if($tab->id == 1) is-active @endif" data-tab-id="{{$tab->id}}" @if($tab->id == 1) tabindex="-1" @endif>
                    @if(!empty($tab->label))
                        {{ $tab->label }}
                    @else
                        {{'Tab '.$tab->id }}
                    @endif
                </button>
            @endif
        @endforeach

    </div>
    <div class="o-tabs__container  js-tabs-container">

        @foreach($component->tabs as $tab)
            @if($tab->label || $tab->text)
                <div class="o-tabs__content  js-tabs-content @if($tab->id == 1) is-active @endif" data-tab-id="{{$tab->id}}">

                    @if(!empty($tab->label))
                        <p class="o-tabs__label">{{ $tab->label }}</p>
                    @endif

                    <div class="s-text">
                        @if(!empty($tab->text))
                            {!! $tab->text  !!}
                        @endif
                    </div>

                </div>
            @endif

        @endforeach

    </div>
</div>

@endsection

@include('organisms.componentables.componentableRow')