@extends('layouts.app')

@section('content')

    <!--<nav-component></nav-component>-->

    <div class="flex items-center w-full pin-t bg-white h-16 shadow">
        <div class="flex mx-2">
            <a href="{{route('products')}}"><img src="{{asset('storage/logo.png')}}" class="h-12"></a>
        </div>
        <div class="flex">
            <p class="text-green-dark font-bold px-3">Votre plateforme Web to Print personnalisée à votre image</p>
        </div>
    </div>

    <div class="flex flex-wrap m-2">
        @foreach ($products as $product)
        <div class="flex w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4 px-2">
            <div class="flex flex-col p-2 my-2 text-center items-center border border-green-dark rounded shadow-md">
                <!-- Column Content -->
                <h3 class="text-green-dark mb-2">{{$product->title}}</h3>
                <img class="w-1/2 mb-2 border" src="{{ asset('storage/images/products/'.$product->image) }}">
                <a href="{{route('product', $product)}}" class="w-1/2 no-underline text-sm px-4 py-2 leading-none border rounded text-green-dark border-green-dark hover:border-green-dark hover:text-white hover:bg-green-dark mt-4 lg:mt-0">Détails</a>
            </div>

        </div>
        @endforeach

    </div>

@endsection