@extends('site.master')

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="header-slider" id="image-slider">
        <div class="placeholder">
            <figure data-order="0" class="image-placeholder active">
                <span class="large" style="background-image: url('/img/mechanic.jpg');"></span>
            </figure>
        </div>
    </div>

    @if(\Auth::check() && isset($links) && isset($links->products))

        <section class="grid-row featured-products">
            <div class="grid-col header">
                <h2>@lang('site/global.featuredProducts')</h2>
                <a class="button arrow" href="/{{$links->products->route}}">@lang('site/global.allProducts')</a>
            </div>


            @include('shop.partials.itemsGridLoop', ['products' => $featuredProducts, 'parentlink' => $links->products->route])

        </section>

    @endif

    @if(!empty($page->translation->intro))
        @include('site.partials.home.intro', [ 'block' => $page->translation->intro ])
    @endif

    <section class="grid-row brands">
        <h4>@lang('site/global.brands')</h4>
        <div class="brand">
            <figure class="image-placeholder">
                <span class="large" style="background-image: url('/img/stahlkaiser.svg');"></span>
            </figure>
        </div>
        <div class="brand">
            <figure class="image-placeholder">
                <span class="large" style="background-image: url('/img/bigleaf.jpg');"></span>
            </figure>
        </div>
        <div class="brand">
            <figure class="image-placeholder">
                <span class="large" style="background-image: url('/img/stanford.svg');"></span>
            </figure>
        </div>
        <div class="brand">
            <figure class="image-placeholder">
                <span class="large" style="background-image: url('/img/veloxxx.svg');"></span>
            </figure>
        </div>
        <div class="brand">
            <figure class="image-placeholder">
                <span class="large" style="background-image: url('/img/bkw.svg');"></span>
            </figure>
        </div>
    </section>

    @if(!\Auth::check() && isset($links) && isset($links->products))

        <section class="grid-row featured-products">
            <div class="grid-col header">
                <h2>@lang('site/global.featuredProducts')</h2>
                <a class="button arrow" href="/{{$links->products->route}}">@lang('site/global.allProducts')</a>
            </div>


            @include('shop.partials.itemsGridLoop', ['products' => $featuredProducts, 'parentlink' => $links->products->route])

        </section>

    @else
        <p>&nbsp;</p>
    @endif


@endsection

@section('extra-js')
        <script>

            var imageSliderSetting = new SliderSetting({
                sliderId: 'image-slider',
                slideQuery: '#image-slider .placeholder figure',
                slideContentQuery: 'span',
                definedPreviousNext: false,
                dots: '#image-slider .controllers .dots .dot',
                autoSlider: true,
                sliderInterval: 4000
            });
            imageSliderSetting = imageSliderSetting.prepareParameters();

            var imageSlider = new Slider(imageSliderSetting);

            imageSlider.init();

        </script>
@endsection