@extends('layouts.app')
@section('head')
    <style>
        .blog-category a:hover {
            color: var(--black-color);
        }
    </style>
@endsection
@section('content')
    <div class="breadcumb-wrapper"
         data-bg-src="{{ $category && $category->has_cover ? $category->cover : asset('assets/img/breadcumb/breadcumb-bg-3.jpg') }}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                @if($category)
                    <h1 class="breadcumb-title"><span> {{ $category->h1 ?? $category->name }}</span></h1>
                    <div class="breadcumb-menu-wrap" aria-label="Breadcrumb">
                        <ul class="breadcumb-menu" itemscope itemtype="http://schema.org/BreadcrumbList">
                            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                                <a href="{{route('index')}}" itemprop="item">
                                    <span itemprop="name">@lang("Accueil")</span>
                                    <meta itemprop="position" content="1"/>
                                </a>
                            </li>
                            @if($category->category)
                                <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                                    <a href="{{route('search',$category->category->slug)}}" class="mad-link" itemprop="item">
                                        <span itemprop="name">{{ $category->category->name }}</span>
                                        <meta itemprop="p osition" content="2"/>
                                    </a>
                                </li>
                            @endif
                            <li><span itemprop="name">{{ $category->name }}</span>
                                <meta itemprop="position" content="3"/>
                            </li>
                        </ul>
                    </div>
                @else
                    <h1 class="breadcumb-title"><span> @lang("Nos soins")</span></h1>
                    <div class="breadcumb-menu-wrap" aria-label="Breadcrumb">
                        <ul class="breadcumb-menu" itemscope itemtype="http://schema.org/BreadcrumbList">
                            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                                <a href="{{route('index')}}" itemprop="item"><span itemprop="name">@lang("Accueil")</span></a>
                            </li>
                            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                                <span itemprop="name">@lang("Nos soins")</span>
                            </li>
                        </ul>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <div id="app">
        <listing
            route="{{ route('get-product')}}"
            :categories="{{ $categories }}"
            :category="{{ $category ? $category : json_encode(false) }}"
            :config="{{ $config }}"
            locale="{{ app()->getLocale() }}"
        ></listing>
    </div>
@endsection