@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')
    <div class="page-content">

        <div class="breadcrumbs-wrapper">
            <div class="container">
                {{breadcrumbs('category',$category)}}
            </div>
        </div>

        <div class="catalog">
            <div class="container">
                <div class="catalog-top">
                    <h1>{{$category->h1}}</h1>
                    <div class="catalog-top-desc">
                        {!! $category->body !!}
                    </div>
                    @if($category->allChildren->isNotEmpty())
                        <div class="catalog-top-links">
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    @foreach($category->allChildren->where('level','<',3)->sortBy('name') as $childCategory)
                                        <div class="swiper-slide">
                                            <a href="{{route('catalog.category',[$gender,...array_filter([$type->alias ?? null,$childCategory->alias]) ])}}">
                                                {{$childCategory->name}}
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <button type="button" class="slider-nav slider-nav--prev">
                                <img src="{{asset('front-assets/img/icons/arrow-right.svg')}}" alt="arrow-right">
                            </button>
                            <button type="button" class="slider-nav slider-nav--next">
                                <img src="{{asset('front-assets/img/icons/arrow-right.svg')}}" alt="arrow-right">
                            </button>
                        </div>
                    @endif
                </div>

                @include('front.templates.catalog.default')

            </div>
        </div>
    </div>
@endsection