@php
    $canManageBranches = app(\App\Services\Frontdesk\FrontdeskPermissions::class)->can(
        auth()->user() ? app(\App\Services\Frontdesk\OrganizationResolver::class)->memberFor(auth()->user(), $organization) : null,
        'admin.branches.manage'
    );
@endphp

<x-app-layout title="Branches">
    <x-settings.page title="Branches" description="Organize locations and sites so visits, devices, and staff stay scoped to the right branch.">
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
            <div class="flex flex-wrap items-center gap-2 text-sm">
                <a href="{{ route('frontdesk.settings') }}" class="text-slate-500 hover:text-slate-800">Settings</a>
                <span class="text-slate-300">/</span>
                <span class="font-medium text-slate-900">Branches</span>
                @if (app(\App\Services\Frontdesk\FrontdeskPermissions::class)->can(
                    auth()->user() ? app(\App\Services\Frontdesk\OrganizationResolver::class)->memberFor(auth()->user(), $organization) : null,
                    'admin.members.view'
                ))
                    <a href="{{ route('frontdesk.members.index') }}" class="ml-3 text-indigo-600 hover:text-indigo-800">Team</a>
                @endif
            </div>
            @if ($canManageBranches)
                <a href="{{ route('frontdesk.branches.create') }}" class="btn-primary">Add branch</a>
            @endif
        </div>

        <x-settings.card title="All branches" description="{{ number_format($heroStats['total']) }} total · {{ number_format($heroStats['active']) }} active · {{ number_format($heroStats['buildings']) }} building(s)">
            @forelse ($branches as $branch)
                <div class="flex items-center justify-between gap-4 border-b border-slate-50 py-3 last:border-b-0">
                    <div>
                        <p class="font-medium text-slate-900">{{ $branch->name }}</p>
                        <p class="text-sm text-slate-500">{{ $branch->address ?? 'No address' }} · {{ $branch->buildings_count }} building(s)</p>
                    </div>
                    <div class="flex items-center gap-3">
                        <a href="{{ route('frontdesk.buildings.index', $branch) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Buildings</a>
                        @if ($canManageBranches)
                            <a href="{{ route('frontdesk.branches.edit', $branch) }}" class="text-sm font-medium text-slate-600 hover:text-slate-900">Edit</a>
                        @endif
                    </div>
                </div>
            @empty
                <p class="text-sm text-slate-500">No branches yet.</p>
            @endforelse
        </x-settings.card>
    </x-settings.page>
</x-app-layout>