@extends("main")
@setmenu("category")
@section('metaTags')
    @pageTitle(seoTitle($page->meta,$page->{'name_'._clang()}))
    @pageDescription(seoDescription($page->meta,$page->{'content_'._clang()}))
    @pageImage($page->getPhoto())
@endsection
@section("content")
    <div class="sub-page">
        <div class="sub-hero" style="background-image:url({{ str_replace("\\", "/", $page->getPhoto()) }});">
            <div class="wrap">
                <div class="breadcrumb">
                    <section>
                        <a href="{{ route("front.home") }}">{{ trans("breadcrumb.home") }}</a>
                        <i>/</i>
                        <a href="#">{{ trans("breadcrumb.products") }}</a>
                        <i>/</i>
                        <strong>{{ $page->name }}</strong>
                    </section>
                </div>
            </div>
        </div>
    </div>

    <div class="w100">

        <div class="category-page">
            <div class="wrap">

                <div class="block-flexed align-center">
                    <div class="flex-left">
                        <div class="page-title"><strong>{{ $page->name }}</strong></div>
                    </div>
                    <div class="flex-left">
                        <div class="page-text">{!! $page->spot !!}</div>
                    </div>
                </div>

                <div class="product-list top-50">
                    <ul>
                        @foreach($allProducts as $product)
                            <li>
                                <a href="{{ route("front.product", ["category_slug" => $product->category->slug, "slug" => $product->slug]) }}"
                                   class="product-item">
                                    <picture><img src="{{ $product->getCover() }}" alt=""/></picture>
                                    <strong>{{ $product->name }}</strong>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

            </div>
        </div>

    </div>

@endsection