@extends('layouts.front.app')

@section('og')
<meta property="og:type" content="home" />
<meta property="og:title" content="{{ config('app.name') }} - Inicial" />
<meta property="og:description" content="{{ config('app.description') }}" />
@endsection

@section('content')

@include('layouts.front.shared.breadcrumb')

<section id="modal_cart_vue">
  <div class="container">
    
    @include(config('site.domain').'.front.shared.modal-add-cart-vue')
    
    <div class="row"> 
      
      <div class="col-lg-3 d-md-block d-none">
        @include(config('site.domain').'.layouts.front.sidebar')
      </div>
      
      <div class="col-lg">
        
        <div class="d-flex justify-content-center mb-2">
          @if (isset($search))
          {{ $products->appends(['search' => isset($search) ? $search : ''])->links() }}
          @else
          {{ $products->links() }}
          @endif
        </div>
        
        <div class="row">
          @include(config('site.domain').'.front.products.product-list', $products)
        </div>
        
        <div class="d-flex justify-content-center my-2">
          @if (isset($search))
          {{ $products->appends(['search' => isset($search) ? $search : ''])->links() }}
          @else
          {{ $products->links() }}
          @endif
        </div>
        
      </div>      
    </div>
    
  </div>
</section>

@endsection

@section("js")
<script src="{{ asset('js/axios.js') }}"></script>

@include('layouts.front.js.add-cart')

<script>
  (function addClasses(){
    
    const breadcrumb = document.querySelector("ol.breadcrumb")
    
    if(breadcrumb){
      breadcrumb.classList.add("bg-white", "rounded", "shadow-1")
    }
  })();
</script>
@endsection