@php use App\Models\Product\Product; @endphp
@php use App\Models\Slider\Slider; @endphp
@php use App\Http\Resources\Shop\Product\ProductResource; @endphp
@php /** @var Product $product */ @endphp
@php /** @var Slider $slider */ @endphp

@if($slider)
    <section class="section">
        <div class="container-lg">
            <div class="section__header">
                <div class="row  align-items-center">
                    <div class="col-lg-6">
                        <h2 class="section__title">
                            <img class="section__title-icon" src="{{ asset('shop/images/top-icon.svg') }}"
                                 alt="{{ $slider->title }}">
                            {{ $slider->title }}
                        </h2>
                        <div class="section__text  section__text--indent">
                            {{ $slider->sub_title }}
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="slider-data">
                            <div class="slider-arrows">
                                <button class="slider__arrows-prev" type="button"
                                        data-slick-arrows-for="#{{ $slider->type }}">
                                    {{ trans('shop-home.page_previous') }}
                                </button>
                                <button class="slider__arrows-next" type="button"
                                        data-slick-arrows-for="#{{ $slider->type }}">
                                    {{ trans('shop-home.page_next') }}
                                </button>
                            </div>
                            <a class="link  link--gray" href=" {{ route('search.'. $slider->type->value) }}">
                                <b>{{ trans('shop-home.page_see_all') }} »</b>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="products-slider" data-slider="productsSlider" id="{{ $slider->type }}">
            @foreach($slider->products as $product)
                <div class="slider-item">
                    {{--TODO needs refactoring --}}
                    <product-item
                            :product="{{ ProductResource::make($product)->toJson() }}"
                            :display="'grid'"
                            :class="'col-xl-2 col-sm-6'"
                    ></product-item>
                </div>
            @endforeach
        </div><!-- /.products-slider -->
    </section>
@endif