@extends('app')
@section('content')
    <section class="bg-white dark:bg-gray-900">
        <div class="max-w-screen-xl pt-20 pb-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:pt-28 px-6">
            <div class="mt-6">
                <ul class="flex flex-wrap items-center justify-center text-gray-900 dark:text-white">
                <!-- La liste des categories -->
                    @foreach ($otherCategories as $cat)
                        <li><a href="{{ $cat['url'] }}" class="me-4 hover:underline md:me-6">{{ $cat['label'] }}</a></li>
                    @endforeach
                </ul>
            </div>
            <h3 class="text-gray-600 text-2xl font-medium mt-6">Liste des articles proposés à la vente</h3>
            <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-6">

                @foreach ($articles as $article)
                    <div class="w-full max-w-sm mx-auto rounded-md shadow-md overflow-hidden">
                        <div class="flex items-end justify-end h-56 w-full bg-cover">
                            <a href="{{ $article->url }}"><img class="object-cover h-56 w-full mx-auto" src="image.php?i={{ $article->imghash }}" /></a>
                            <a href="{{ $article->url }}" class="p-2 rounded-full bg-blue-600 text-white mx-5 -mb-4 hover:bg-blue-500 focus:outline-none focus:bg-blue-500">
                                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                                    <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </a>
                        </div>
                        <div class="px-5 py-3">
                            <h3 class="text-gray-700 uppercase"><a href="{{ $article->url }}">{{ $article->label }}</a></h3>
                            <span class="text-gray-500 mt-2">{{ $article->price }}</span>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
@endsection