<x-layouts.admin title="Brands">
    <x-admin.page-header title="Brands" subtitle="{{ $brands->total() }} total">
        <x-slot:actions>
            <a href="{{ route('admin.brands.create') }}">
                <x-admin.button variant="accent"><i class="fa-solid fa-plus text-xs"></i> New Brand</x-admin.button>
            </a>
        </x-slot:actions>
    </x-admin.page-header>

    <x-admin.card :padded="false">
        @if ($brands->isEmpty())
            <x-admin.empty-state icon="fa-solid fa-copyright" title="No brands yet">
                <x-slot:action>
                    <a href="{{ route('admin.brands.create') }}">
                        <x-admin.button variant="accent">Create your first brand</x-admin.button>
                    </a>
                </x-slot:action>
            </x-admin.empty-state>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Brand</th>
                            <th>Products</th>
                            <th>Status</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($brands as $brand)
                            <tr>
                                <td>
                                    <div class="flex items-center gap-3">
                                        <div class="h-9 w-9 shrink-0 overflow-hidden rounded-lg bg-black/5">
                                            @if ($brand->logo)
                                                <img src="{{ Storage::url($brand->logo) }}" alt="" class="h-full w-full object-contain p-1">
                                            @endif
                                        </div>
                                        <span class="font-medium text-ink">{{ $brand->name }}</span>
                                    </div>
                                </td>
                                <td class="tabular-nums text-ink/60">{{ $brand->products_count }}</td>
                                <td>
                                    <x-admin.badge :color="$brand->status->value === 'active' ? 'green' : 'gray'">
                                        {{ ucfirst($brand->status->value) }}
                                    </x-admin.badge>
                                </td>
                                <td>
                                    <div class="flex items-center justify-end gap-3">
                                        <a href="{{ route('admin.brands.edit', $brand) }}" class="text-ink/50 hover:text-ink" title="Edit">
                                            <i class="fa-solid fa-pen"></i>
                                        </a>
                                        <x-admin.delete-form :action="route('admin.brands.destroy', $brand)" confirm-title="Delete '{{ $brand->name }}'?" />
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="border-t border-black/5 px-5 py-4">
                {{ $brands->links() }}
            </div>
        @endif
    </x-admin.card>
</x-layouts.admin>
