@extends('layouts.front.app')

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

@section('content')

@php $cat = isset( $category->name) ? $category->name : "Produtos" @endphp
<section>
  <div class="container my-3">
    <nav>
      <ol class="breadcrumb grey lighten-3">
        <li class="breadcrumb-item "><a href="{{ route('home') }}" class="fosco-text font-weight-bold">
          <i class="fas fa-home mr-1"></i> Home</a>
        </li>
        <li class="breadcrumb-item black-text font-weight-bolder">
          {!! ucfirst($titleGrupo) !!}
        </li>
        <li class="breadcrumb-item active black-text font-weight-bolder">
          {!!$cat!!}
        </li>
      </ol>
    </nav>
  </div>
</section>

<section>
  <div class="container">
    
    @if ($category)
    
    <div class="title d-flex mt-5 justify-content-center font-weight-bold fosco-text">
      <span class="line"></span>
      <p class="mt-n3 fosco-text h2">{!!$cat!!}</p>
      <span class="line"></span>
    </div>
    
    <div class="d-md-block d-none">
      <div class="row px-3">
        @include(config('site.domain').'.front.products.product-list', ['products' => $products])
      </div>
      
      <div class="d-flex justify-content-center my-4">
        {!!$products->links()!!}
      </div>
    </div>
    
    <div class="d-block d-md-none">
      <div class="row px-3">
        @include(config('site.domain').'.front.products.product-list-mobile', $products)
      </div>
      <div class="d-flex justify-content-center my-4">
        {!!$products->links()!!}
      </div>
    </div>
    
    @else
    
    <div class="alert alert-warning" role="alert">
      Não há produtos cadastrados
    </div>
    
    @endif
    
  </div>
  
  <hr class="clearfix w-100 d-md-none">
  
</section>
@endsection

@section('js')

<script type="text/javascript">
  
  $(function () {
    $('.pagination').addClass('pg-red')
  })
</script>
@endsection