<x-appc>
    <x-slot name="title">Lauck - Home - Productos</x-slot>
    <x-slot name="navTitle">Productos</x-slot>

    <div class="w-6xl mx-auto flex flex-col justify-start items-stretch gap-5 my-5">
        <a href="{{route('productos.create')}}" class="w-fit mx-auto px-4 py-2 rounded-full text-white font-semibold bg-stone-500 hover:scale-105 transition">
            Agregar Producto
        </a>
        <div class="overflow-x-auto rounded-lg shadow-xl">
            <table class="w-full min-w-xl text-sm text-left rtl:text-right text-neutral-500 dark:text-neutral-400">
                <thead class="text-xs text-neutral-700 uppercase bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">Nombre</th>
                        <th scope="col" class="px-6 py-3">Marca</th>
                        <th scope="col" class="px-6 py-3">Modelo</th>
                        <th scope="col" class="px-6 py-3">Rodado</th>
                        <th scope="col" class="px-6 py-3">Color</th>
                        <th scope="col" class="px-6 py-3">Tipo</th>
                        <th scope="col" class="px-6 py-3">Precio</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($products as $prod)
                        <tr class="bg-white border-b dark:bg-neutral-800 dark:border-neutral-700 border-neutral-200">
                            <th scope="row"
                                class="px-6 py-4 font-medium text-neutral-900 whitespace-nowrap dark:text-white">
                                <a href="{{route('productos.show',$prod)}}">{{ $prod->nombre }}</a>
                            </th>
                            <td class="px-6 py-4">{{ $prod->marca }}</td>
                            <td class="px-6 py-4">{{ $prod->modelo }}</td>
                            <td class="px-6 py-4">{{ $prod->rodado }}</td>
                            <td class="px-6 py-4">{{ $prod->color }}</td>
                            <td class="px-6 py-4">{{ $prod->tipo }}</td>
                            <td class="px-6 py-4">{{ $prod->precio }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{$products->links()}}
    </div>

</x-appc>
