<div class="min-w-0" role="region" [attr.aria-label]="'teams.switcher.regionAria' | transloco">
    @if (showBrand() && !compact()) {
    <div class="mb-2 flex items-center justify-between gap-2 px-1">
        <div class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--p-text-muted-color)]">{{ "teams.switcher.label" | transloco }}</div>
        @if (showAdd()) {
        <button
            type="button"
            data-testid="team-switcher-add"
            class="team-switcher__action flex size-8 items-center justify-center rounded-lg text-muted-color transition-colors hover:bg-surface-100 hover:text-[var(--p-text-color)] focus:outline-none focus:ring-2 focus:ring-primary-500 dark:hover:bg-surface-800"
            [attr.aria-label]="'teams.switcher.addTeamAria' | transloco"
            [disabled]="interactionDisabled()"
            (click)="onCreateTeam()"
        >
            <i class="pi pi-plus text-sm" aria-hidden="true"></i>
        </button>
        }
    </div>
    } @if (loading()) {
    <p-skeleton height="44px" borderRadius="999px" />
    } @else {
    <div class="flex min-w-0 items-center gap-2">
        <p-select
            data-testid="team-switcher-trigger"
            [options]="teams()"
            [formControl]="teamForm.selectedTeam().control()"
            optionLabel="name"
            dataKey="id"
            appendTo="body"
            [placeholder]="'teams.switcher.placeholder' | transloco"
            class="team-switcher__select w-full min-w-0 text-sm"
            [class.team-switcher__select--compact]="compact()"
            [attr.aria-label]="'teams.switcher.selectAria' | transloco"
            (onChange)="onTeamChange($event.value)"
        >
            <ng-template pTemplate="selectedItem" let-selected>
                @if (selected) {
                <div class="flex min-w-0 items-center gap-3">
                    <img [src]="teamLogoUrl(selected)" [alt]="selected.name" class="team-switcher__avatar size-7 shrink-0" />
                    <div class="min-w-0 flex-1">
                        <div class="truncate text-sm font-semibold text-[var(--p-text-color)]">{{ selected.name }}</div>
                    </div>
                </div>
                } @else {
                <span class="truncate text-sm text-[var(--p-text-muted-color)]">{{ activeTeamName() }}</span>
                }
            </ng-template>

            <ng-template pTemplate="item" let-team>
                <div class="flex min-w-0 items-center gap-3">
                    <img [src]="teamLogoUrl(team)" [alt]="team.name" class="team-switcher__avatar size-7 shrink-0" />
                    <div class="min-w-0 flex-1">
                        <div class="truncate text-sm font-medium text-[var(--p-text-color)]">{{ team.name }}</div>
                        <div class="mt-1 text-[11px] font-medium uppercase tracking-[0.18em] text-[var(--p-text-muted-color)]">{{ roleLabel(team.role) }}</div>
                    </div>
                </div>
            </ng-template>
        </p-select>

        @if (showAdd() && (!showBrand() || compact())) {
        <button
            type="button"
            data-testid="team-switcher-add"
            class="team-switcher__action flex size-9 shrink-0 items-center justify-center rounded-lg text-muted-color transition-colors hover:bg-surface-100 hover:text-[var(--p-text-color)] focus:outline-none focus:ring-2 focus:ring-primary-500 dark:hover:bg-surface-800"
            [attr.aria-label]="'teams.switcher.addTeamAria' | transloco"
            [disabled]="interactionDisabled()"
            (click)="onCreateTeam()"
        >
            <i class="pi pi-plus text-sm" aria-hidden="true"></i>
        </button>
        }
    </div>
    }
</div>
