@extends('layouts.app')

@section('title', 'Products')
@section('heading', 'Products')

@section('content')
<div class="space-y-6">
    @can('create', App\Models\Product::class)
    <div class="flex justify-end">
        <a href="{{ route('products.create') }}" class="inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">Add product</a>
    </div>
    @endcan

    @if($products->isEmpty())
        <div class="rounded-xl border border-slate-200 bg-white p-8 text-center text-slate-600">
            <p>No products yet.</p>
            @can('create', App\Models\Product::class)
            <a href="{{ route('products.create') }}" class="mt-2 inline-block text-indigo-600 hover:text-indigo-500">Add your first product</a>
            @endcan
        </div>
    @else
        @php
            $columns = ['name' => 'Name', 'sku' => 'SKU', 'price' => 'Price', 'status' => 'Status', 'file' => 'File'];
        @endphp
        <x-data-table
            :items="$products->getCollection()"
            :columns="$columns"
            base-route="products"
        />
        <div class="mt-4">
            {{ $products->links() }}
        </div>
    @endif
</div>
@endsection