<div class="user-show-master">
    <x-title>
        {{ $user->name_first }} {{ $user->name_last }}
        <x-slot:buttons>
            @can('users.impersonate', $user)
                <livewire:admin.users.impersonate-user :user="$user"/>
            @endcan
            @can('edit', $user)
                <x-ui.button href="{{ route('admin.users.edit', $user) }}" class="btn btn-primary">Edit</x-ui.button>
            @endcan
        </x-slot:buttons>
    </x-title>

    {{-- MASTER TAB NAVIGATION --}}
    <ul class="nav nav-tabs mb-4">
        <li class="nav-item">
            <button class="nav-link {{ $activeTab === 'profile' ? 'active fw-bold' : '' }}"
                    wire:click="setTab('profile')">
                Profile & Permissions
            </button>
        </li>

        @can('manageApiKeys', $user)
            <li class="nav-item">
                <button class="nav-link {{ $activeTab === 'api_keys' ? 'active fw-bold' : '' }}"
                        wire:click="setTab('api_keys')">
                    API Keys
                </button>
            </li>
        @endcan

        @can('manageSessions', $user)
            <li class="nav-item">
                <button class="nav-link {{ $activeTab === 'sessions' ? 'active fw-bold' : '' }}"
                        wire:click="setTab('sessions')">
                    Active Sessions
                </button>
            </li>
        @endcan
    </ul>

    <div class="tab-content">
        @if($activeTab === 'profile')
            <livewire:admin.users.user-profile :user="$user" :key="'profile-'.$user->id"/>
        @elseif($activeTab === 'api_keys')
            <livewire:admin.users.user-api-keys :user="$user" :key="'apikeys-'.$user->id"/>
        @elseif($activeTab === 'sessions')
            <livewire:admin.users.user-sessions :user="$user" :key="'sessions-'.$user->id"/>
        @endif
    </div>
</div>