<div
    @if ($pollingInterval)
        wire:poll.{{ $pollingInterval }}
    @endif
    data-testid="tenant-dashboard-context-chips"
    class="flex w-full flex-col items-start gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-start md:flex-nowrap"
>
    <div data-testid="tenant-dashboard-context-chip-workspace" class="inline-flex min-w-0 w-full max-w-full items-center gap-2 rounded-2xl border border-gray-200 bg-white/80 px-4 py-2 text-sm font-medium text-gray-700 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/5 dark:text-gray-200 sm:w-auto sm:max-w-[20rem] lg:max-w-[24rem]">
        <x-filament::icon icon="heroicon-o-building-office" class="h-5 w-5 text-gray-400 dark:text-gray-500" />
        <span class="truncate" title="{{ __('localization.dashboard.overview.context_workspace_chip', ['workspace' => $context['workspace']]) }}">{{ __('localization.dashboard.overview.context_workspace_chip', ['workspace' => $context['workspace']]) }}</span>
    </div>

    @if (filled($context['provider'] ?? null))
        <div data-testid="tenant-dashboard-context-chip-provider" data-provider-key="{{ $context['providerKey'] ?? '' }}" class="inline-flex items-center gap-2 whitespace-nowrap rounded-2xl border border-gray-200 bg-white/80 px-4 py-2 text-sm font-medium text-gray-700 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/5 dark:text-gray-200">
            @if (($context['providerKey'] ?? null) === 'microsoft')
                <svg data-testid="tenant-dashboard-context-chip-provider-microsoft-logo" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" class="h-4 w-4 shrink-0">
                    <rect x="1" y="1" width="6" height="6" fill="#f25022" />
                    <rect x="9" y="1" width="6" height="6" fill="#7fba00" />
                    <rect x="1" y="9" width="6" height="6" fill="#00a4ef" />
                    <rect x="9" y="9" width="6" height="6" fill="#ffb900" />
                </svg>
            @else
                <x-filament::icon icon="heroicon-o-globe-alt" class="h-5 w-5 text-gray-400 dark:text-gray-500" />
            @endif

            <span>{{ __('localization.dashboard.overview.context_provider_chip', ['provider' => $context['provider']]) }}</span>
        </div>
    @endif

    @if (filled($context['latestActivity'] ?? null))
        <div data-testid="tenant-dashboard-context-chip-latest-activity" class="inline-flex items-center gap-2 whitespace-nowrap rounded-2xl border border-gray-200 bg-white/80 px-4 py-2 text-sm font-medium text-gray-700 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/5 dark:text-gray-200">
            <x-filament::icon data-testid="tenant-dashboard-context-chip-latest-activity-icon" icon="heroicon-o-clock" class="h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500" />
            <span>{{ __('localization.dashboard.overview.context_latest_activity_chip', ['time' => $context['latestActivity']]) }}</span>
        </div>
    @endif
</div>
