@extends('main')
@section('styles')
@endsection
@section('page-title')
@endsection
@section('content')
  <div class="breadcrumbs">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <ul>
            <li class="home">
              <a href="{{ Route('site.home.page') }}">{{ __('Home') }}</a>
              <span>/</span>
            </li>
            <li>
              <a href="{{ Route('product.index') }}">{{ __('Products') }}</a>
              <span>/</span>
            </li>
            <li >
              {!! siteName() !!}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <section class="main-container col2-left-layout">
    {{-- @dump(session('list_view')) --}}
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div class="block-title mb-15">
            <h1>{{ __('Products') }} <span class="page-heading-title"> ( <b>{!! siteName() !!}</b>) </span></h1>
          </div>
        </div>
        <div class="col-sm-9 col-xs-12 col-sm-push-3">
          <article class="col-main">

            <div class="clearfix"></div>
            <div class="category-products">
              @if (Session::get('list_view') == 'list')
                <ol class="products-list" id="products-list">
                  @foreach ($products as $key => $product)
                    @livewire('front-end.product.item-list' , ['product' => $product], key($loop->index))
                  @endforeach
                </ol>
              @else
                <ul class="products-grid">
                  @foreach ($products as $key => $product)
                    <li class="item-warp col-md-3 col-sm-4 col-xs-6">
                      @livewire('front-end.product.item-inner' , ['product' => $product], key($loop->index))
                    </li>
                  @endforeach
                </ul>
              @endif
          </div>
          {{ $products->links() }}

        </article>
      </div>
      <div class="col-left sidebar col-sm-3 col-xs-12 col-sm-pull-9">
        <aside class="col-left sidebar">
          @if (isDesktop())
            @widget('ListCategoriesMenu')
            @widget('Sidebar\BlockBanner')

          @else

          @endif
          @widget('Sidebar\DeliveryReturns')
          @widget('MostPopularFood')
        </div>
      </div>
    </section>
  @endsection
  @section('scripts')
    <script language="javascript">
      jQuery(document).ready(function($) {
        $('.item-inner').matchHeight();
        $('.products-grid .item .item-title').matchHeight({
          byRow: true,
          property: 'height',
          target: null,
          remove: false
        });
      });
    </script>
  @endsection