{{--
    @notes: need to provide your own Boostrap JS listener for the custom tab handling    
--}}

<section class="content">
    <div class="container-fluid">

        <div class="row">
            <div class="col-12">
                <div class="card card-gray card-outline card-outline-tabs" @if($id) id="{{ $id }}" @endif>
                    <div class="card-header p-0 border-bottom-0">
                        <ul class="nav nav-tabs" role="tablist">
                            @foreach($tabs as $tab)
                                <li class="nav-item">
                                    <a class="nav-link {{ $tab['selected'] ? 'active' :'' }}"
                                        href="#{{ $tab['group'] }}"
                                        aria-controls="{{ $tab['group'] }}"
                                        aria-selected="{{ $tab['selected'] ? 'true' : 'false' }}">
                                        {{ $tab['title'] }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            @php
                                $num_slot_selected = 0;
                            @endphp
                            @foreach($tabs as $tab)
                                @if(isset(${ $tab['group'] }))
                                    <div class="tab-pane fade show {{ $tab['selected'] && ++$num_slot_selected ? 'active' : '' }}" role="tabpanel">
                                        {{ ${ $tab['group'] } }}
                                    </div>
                                @endif
                            @endforeach

                            @if(isset($slot_common))
                                <div class="tab-pane fade show tab-pane-common {{ $num_slot_selected ? '' : 'active' }}" role="tabpanel">
                                    {{ $slot_common }}
                                </div>
                            @endif
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
        </div>

        {{ $slot_rows }}
    </div>
</section>