<div class="d-flex align-items-center justify-content-center min-vh-100 bg-light">
    <div style="width: 100%; max-width: 560px;" class="px-3">

        <div class="text-center mb-4">
            <h2 class="fw-bold mb-1">Select a Workspace</h2>
            <p class="text-muted">Signed in as <strong>{{ auth()->user()->name ?? auth()->user()->username }}</strong></p>
        </div>

        <div class="input-group mb-3 shadow-sm">
            <span class="input-group-text bg-white border-end-0">
                <i class="mdi mdi-magnify text-muted"></i>
            </span>
            <input type="text"
                   class="form-control border-start-0 ps-0"
                   placeholder="Search workspaces..."
                   wire:model.live.debounce.200ms="search"
                   autofocus>
        </div>

        @if($solicitors->isEmpty())
            <div class="text-center py-5 text-muted">
                <i class="mdi mdi-office-building-outline" style="font-size: 48px;"></i>
                <p class="mt-2">No workspaces found.</p>
            </div>
        @else
            <div class="d-flex flex-column gap-2">
                @foreach($solicitors as $solicitor)
                    <button type="button"
                            wire:click="selectWorkspace({{ $solicitor->id }})"
                            wire:loading.attr="disabled"
                            class="btn btn-white border bg-white text-start p-3 shadow-sm d-flex align-items-center gap-3 rounded">
                        <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:42px; height:42px;">
                            @if($solicitor->logo_path)
                                <img src="{{ Storage::url($solicitor->logo_path) }}"
                                     style="width:32px; height:32px; object-fit:contain; border-radius:4px;">
                            @else
                                <span class="fw-bold text-primary" style="font-size:14px;">
                                    {{ strtoupper(substr($solicitor->name, 0, 2)) }}
                                </span>
                            @endif
                        </div>
                        <div class="flex-grow-1">
                            <div class="fw-semibold">{{ $solicitor->name }}</div>
                            @if($solicitor->domain)
                                <div class="text-muted small">{{ $solicitor->domain }}</div>
                            @endif
                        </div>
                        <i class="mdi mdi-chevron-right text-muted"></i>
                    </button>
                @endforeach
            </div>
        @endif

        <div class="text-center mt-4">
            <a href="{{ route('logout') }}"
               onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
               class="text-muted small">Sign out</a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                @csrf
            </form>
        </div>

    </div>
</div>
