<div class="border-b border-booklio-border p-4">
    <p class="text-xs font-bold uppercase tracking-wide text-booklio-muted">Current business</p>
    <div class="mt-3 flex items-center gap-3 rounded-lg bg-blue-50 p-3">
        <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-booklio-primary text-sm font-extrabold text-white">{{ $currentBusinessRow['initials'] ?? 'B' }}</span>
        <div class="min-w-0">
            <p class="truncate text-sm font-extrabold text-booklio-dark">{{ $currentBusinessRow['name'] ?? 'Business' }}</p>
            <p class="truncate text-xs font-semibold text-booklio-primary">{{ $currentBusinessRow['plan'] ?? 'Trial Plan' }} - {{ $currentBusinessRow['status'] ?? 'Active' }}</p>
        </div>
    </div>
</div>

<div class="max-h-[260px] overflow-y-auto p-2 booklio-scrollbar">
    @forelse ($businesses as $business)
        @if ($business['active'] || empty($business['switch_route']))
            <button type="button" class="flex w-full cursor-default items-center gap-3 rounded-lg p-3 text-left">
                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-booklio-primary text-xs font-extrabold text-white">
                    {{ $business['initials'] }}
                </span>
                <span class="min-w-0 flex-1">
                    <span class="block truncate text-sm font-extrabold text-booklio-dark">{{ $business['name'] }}</span>
                    <span class="block truncate text-xs font-medium text-booklio-muted">{{ $business['plan'] }} - {{ $business['status'] }}</span>
                </span>
                <x-ui.icon name="check" class="h-4 w-4 text-booklio-primary" />
            </button>
        @else
            <form method="POST" action="{{ $business['switch_route'] }}">
                @csrf
                <button type="submit" class="flex w-full items-center gap-3 rounded-lg p-3 text-left transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-blue-100">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-xs font-extrabold text-slate-600">
                        {{ $business['initials'] }}
                    </span>
                    <span class="min-w-0 flex-1">
                        <span class="block truncate text-sm font-extrabold text-booklio-dark">{{ $business['name'] }}</span>
                        <span class="block truncate text-xs font-medium text-booklio-muted">{{ $business['plan'] }} - {{ $business['status'] }}</span>
                    </span>
                </button>
            </form>
        @endif
    @empty
        <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-4 text-center">
            <p class="text-sm font-extrabold text-booklio-dark">No businesses found</p>
            <p class="mt-1 text-xs leading-5 text-booklio-muted">Create a workspace to start using Booklio.</p>
        </div>
    @endforelse
</div>

<div class="grid gap-2 border-t border-booklio-border p-3">
    <x-ui.button variant="outline" class="w-full" href="{{ route('admin.businesses.create') }}">
        <x-ui.icon name="plus" class="h-4 w-4" />
        Add New Business
    </x-ui.button>
    <a href="{{ route('admin.businesses.index') }}" class="rounded-lg px-3 py-2 text-center text-sm font-bold text-booklio-primary hover:bg-blue-50">Manage businesses</a>
</div>
