@props(['tab' => 'overview'])
@php
    // Übersicht + Docker are open to any role (read-only); the server shell is an operate action.
    $tabs = array_filter([
        ['key' => 'overview', 'label' => __('servers.tab_overview'), 'icon' => 'server', 'show' => true],
        ['key' => 'docker', 'label' => __('servers.tab_docker'), 'icon' => 'box', 'show' => true],
        ['key' => 'terminal', 'label' => __('servers.tab_terminal'), 'icon' => 'terminal', 'show' => (bool) auth()->user()?->can('operate')],
    ], fn ($t) => $t['show']);
@endphp
<div class="flex items-center gap-1 overflow-x-auto no-scrollbar border-b border-line" role="tablist" aria-label="{{ __('servers.tabs_aria') }}">
    @foreach ($tabs as $t)
        <button type="button" wire:click="$set('tab', '{{ $t['key'] }}')" role="tab"
            aria-selected="{{ $tab === $t['key'] ? 'true' : 'false' }}"
            @class([
                'flex items-center gap-2 whitespace-nowrap border-b-2 px-3.5 py-2.5 font-mono text-[12px] transition-colors -mb-px',
                'border-accent text-accent-text' => $tab === $t['key'],
                'border-transparent text-ink-3 hover:text-ink' => $tab !== $t['key'],
            ])>
            <x-icon :name="$t['icon']" class="h-3.5 w-3.5" />
            {{ $t['label'] }}
        </button>
    @endforeach
</div>