@extends('layouts.app')
@section('content')
    <div class="bg-white">
        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
            <h2 class="text-4xl font-semibold pb-16">Notre boutique</h2>

            <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
                @foreach($products as $product)
                    <a href="{{ route('shop.show', ['id' => $product->id]) }}" class="group">
                        <img src="{{ $product->thumbnail }}" alt="Image de couverture du produit {{ $product->name }}" class="aspect-square w-full rounded-lg bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-7/8" />
                        <h3 class="mt-4 text-sm text-gray-700">{{ $product->name }}</h3>
                        <p class="mt-1 text-lg font-medium text-gray-900">{{ $product->price }}€</p>
                    </a>
                @endforeach
            </div>
            @if(count($products) === 0)
                <p class="text-base font-semibold text-center">Aucun produit à afficher.</p>
            @endif
            {{ $products->links('vendor.pagination.tailwind') }}
        </div>
    </div>

@endsection