@extends('layouts.master', ['view' => 'page'])

@section('editable_content')

    @include('layouts.partials.navigation', ['shadow' => true])

    <div class="default-page-wrapper">

        <div class="grid-row default-page-content">

            <div class="content">

                @if(isset($page->content->main->typeName) && $page->content->main->typeName != '')
                    <h1>{{$page->content->main->typeName}}</h1>
                @else
                    <h1>{{$page->translation->name}}</h1>
                @endif

                {{ $page->content->main->description }}

                @if(isset($page->content->main->link) && $page->content->main->link != '')
                    <a class="button" href="{{$page->content->main->link}}">
                        {{$page->content->main->link_text}}
                        <span class="arrow">@include('svg.arrow')</span>
                    </a>
                @endif
            </div>

            <div class="images">
                @if(sizeof($page->content->main->images) > 1)
                    <div id="image-slider">
                        <div class="placeholder">
                            @foreach($page->content->main->images as $key => $imageSlide)

                                <figure data-order="{{$key}}" class="image-placeholder">

                                    @foreach(['large', 'medium', 'small'] as $imageSize)
                                        <span class="{{$imageSize}}"
                                              style="background-image: url('{{ $imageSlide->{$imageSize.'_image_url'} }}');"></span>
                                    @endforeach

                                </figure>

                            @endforeach

                            <div class="controllers">
                                <div class="nav-item previous"
                                     data-order="{{(sizeof($page->content->main->images) - 1)}}">
                                    <span>@include('svg.arrow')</span>
                                </div>

                                <div class="nav-item next" data-order="1">
                                    <span>@include('svg.arrow')</span>

                                </div>
                            </div>
                        </div>
                    </div>

                @elseif(sizeof($page->content->main->images) == 1)
                    <picture>
                        <source media="(max-width: 840px)"
                                srcset="{{$page->content->main->images[0]->medium_image_url}}">
                        <source media="(max-width: 1050px)"
                                srcset="{{$page->content->main->images[0]->small_image_url}}">
                        <img src="{{$page->content->main->images[0]->medium_image_url}}"
                             alt="image">
                    </picture>
                @endif

            </div>

        </div>

    </div>


    @yield('additional-page-content')

@endsection

@section('extra-js')
    @if(sizeof($page->content->main->images) > 1)
        <script src="/js/slider.js"></script>
        <script>

            var imageSliderSetting = new SliderSetting({
                sliderId: 'image-slider',
                slideQuery: '#image-slider .placeholder figure',
                slideContentQuery: 'span',
                definedPreviousNext: true,
                navigationButtons: '#image-slider .placeholder .controllers .nav-item',
                sliderInterval: 500
            });
            imageSliderSetting = imageSliderSetting.prepareParameters();

            var imageSlider = new Slider(imageSliderSetting).init();

        </script>
    @endif
@endsection