@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">
    <div class="space-y-6">
        <x-frontdesk.page-hero
            badge="Locations · Buildings · Reception desks"
            title="Branches"
            description="Organize your sites, buildings, and reception desks so visits and devices stay scoped to the right location."
            :stats="[
                ['value' => number_format($heroStats['total']), 'label' => 'Branches'],
                ['value' => number_format($heroStats['active']), 'label' => 'Active'],
                ['value' => number_format($heroStats['buildings']), 'label' => 'Buildings'],
            ]">
            @if ($canManageBranches)
                <x-slot name="actions">
                    <a href="{{ route('frontdesk.branches.create') }}" class="btn-primary">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                        Add branch
                    </a>
                </x-slot>
            @endif
        </x-frontdesk.page-hero>

        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <div class="border-b border-slate-100 px-6 py-4">
                <h2 class="text-sm font-semibold text-slate-900">All branches</h2>
            </div>
            @forelse ($branches as $branch)
                <div class="flex items-center justify-between border-b border-slate-50 px-6 py-4 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 gap-2">
                        <a href="{{ route('frontdesk.buildings.index', $branch) }}" class="text-sm text-indigo-600 hover:text-indigo-700">Buildings</a>
                        <a href="{{ route('frontdesk.branches.edit', $branch) }}" class="text-sm text-slate-600 hover:text-slate-800">Edit</a>
                    </div>
                </div>
            @empty
                <p class="px-6 py-10 text-center text-sm text-slate-500">No branches yet.</p>
            @endforelse
        </div>
    </div>
</x-app-layout>