@extends('web.layout.app')

@section('content')
<main id="content" class="wrapper layout-page">
  <section class="page-title z-index-2 position-relative">
    <div class="bg-body-secondary">
      <div class="container">
        <nav class="py-4 lh-30px" aria-label="breadcrumb">
          <ol class="breadcrumb justify-content-center py-1">
            <li class="breadcrumb-item"><a href="{{url('/')}}">{{translate('Home')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{translate('Products')}}</li>
          </ol>
        </nav>
      </div>
    </div>
    <div class="text-center py-13">
      <div class="container">
        <h2 class="mb-0">{{translate('Products')}}</h2></div>
    </div>
  </section>

  <div class="container container-xxl pb-16 pb-lg-18 mb-lg-3">
    <div class="row gy-50px">


      @foreach($products as $product)
        <div class="col-sm-6  col-lg-4 col-xl-3">
          <div class="card card-product grid-1 bg-transparent border-0" data-animate="fadeInUp">
            <figure class="card-img-top position-relative mb-7 overflow-hidden ">
              <a href="{{url('product/'.$product->getTranslation('slug'))}}" class="hover-zoom-in d-block"
                 title="Shield Conditioner">
                <img src="{{url('product/'.$product->getTranslation('slug'))}}" data-src="{{asset($product->image)}}"
                     class="img-fluid lazy-image w-100" alt="Shield Conditioner" width="330"
                     height="440">
              </a>
            </figure>
            <div class="card-body text-center p-0">

              <h4 class="product-title card-title text-primary-hover text-body-emphasis fs-15px fw-500 mb-3">
                <a class="text-decoration-none text-reset" href="{{url('product/'.$product->getTranslation('slug'))}}">{{$product->getTranslation('name')}}</a></h4>
            </div>
          </div>
        </div>


      @endforeach
    </div>
    <nav class="d-flex mt-13 pt-3 justify-content-center " aria-label="pagination" data-animate="fadeInUp">
      {{ $products->links() }}
    </nav>
  </div>
</main>


@endsection