@props([
    'tabs' => [],
    'activeTab' => null,
    'minimal' => true,
    'borderless' => false
])

@php
    $attributes = $attributes->class([
        'nav nav-tabs',
        'minimal-tabs' => $minimal,
        'border-0' => $borderless
    ]);
@endphp

<ul {{ $attributes }} role="tablist">
    @foreach($tabs as $tab)
        <li class="nav-item" role="presentation">
            <button 
                class="nav-link @if($loop->first && !$activeTab || $activeTab === $tab['id']) active @endif"
                type="button"
                role="tab"
                @if(isset($tab['onclick']))
                    x-on:click="{{ $tab['onclick'] }}; tab = '{{ $tab['id'] }}'"
                @else
                    x-on:click="tab = '{{ $tab['id'] }}'"
                @endif
            >
                @if(isset($tab['icon']))
                    <x-ui.nicon :name="$tab['icon']" class="me-2" />
                @endif
                {{ $tab['name'] }}
            </button>
        </li>
    @endforeach
</ul>