@props([
    'tabName' => 'tab',
    'tabs' => [],
    'index' => 'name'
])

@php
    $attributes = $attributes->class([
        'nav nav-tabs nav-tabs-mb-icon nav-tabs-card',
    ]);
@endphp

<ul {{ $attributes }}>
    @foreach($tabs as $tab)
    <li
        class="nav-item"
        x-bind:class="{'active': {{ $tabName }} == '{{ $tab[$index] }}'}"
    >
        <a
            class="nav-link"
            x-bind:class="{'active': {{ $tabName }} == '{{ $tab[$index] }}'}"
            x-on:click="
                {{ $tabName }} = '{{ $tab[$index] }}';
                if(!loaded.includes({{ $tabName }}) && {{ isset($tab['onclick'])? 1 : 0 }}) {
                    loaded.push({{ $tabName }});
                    {!! $tab['onclick']?? 'return' !!};
                }
            "
        >
            @if(isset($tab['icon']))
                <x-ui.nicon :name="$tab['icon']"/>
            @endif
            <span class="fs-11px">{{ $tab['name'] }}</span>
        </a>
    </li>
    @endforeach

    {{ $slot }}
</ul>