@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')
<section>
  <div class="container my-3">
    <nav>
      <ol class="breadcrumb grey lighten-3">
        
        <li class="breadcrumb-item">
          <a href="{{route("home")}}" class="font-weight-bold fosco-text"><i class="fas fa-home"></i> HOME</a>
        </li>
        <li class="breadcrumb-item disabled font-weight-bolder black-text">CATEGORIA</li>
        
        @if ($category)
        <li class="breadcrumb-item active font-weight-bolder black-text" >{!! strtoupper($category->name) !!}</li>
        @endif
        
      </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">{!! strtoupper($category->name) !!}</p>
      <span class="line"></span>
    </div>
    
    <div class="d-md-block d-none">
      <div class="row">
        <div class="col-lg-3">
          @include(config('site.domain').'.layouts.front.sidebar-left')
        </div>
        <div class="col-lg">
          
          <div class="row">
            @include(config('site.domain').'.front.products.product-list', ['products' => $products])
          </div>
          
          @if($products->count() > 0)
          <div class="d-flex justify-content-center my-4">
            {!!$products->paginate(config('site.por_pagina'))->links()!!}
          </div>
          @endif
          
        </div>
      </div>
    </div>
    
    <div class="d-block d-md-none">
      @include(config('site.domain').'.front.products.product-list-mobile', ['products' => $products])
    </div>
    
    @else
    
    <div class="alert alert-warning" role="alert">
      Não há produtos cadastrados
    </div>
    
    @endif
    
  </div>
  
</section>
@endsection