@extends('site.master', ['view' => 'production-sub'])

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

@section('content')
    <section class="content">
        @includeWhen(isset($page->translation->header),'site.partials.production-header', [ 'block' => $page->translation->header, 'subpage' => true ])

        <div class="grid-row full-row product-icons">
            <div class="grid-col">
                <div class="grid-row">
                    <div class="grid-col list-holder">
                        @if($machines->count() != 0)
                            <a class="button arrow filled red scroll-to-target" href="#specs">
                                @lang('site/global.more_information')
                            </a>
                        @endif
                        @if(!empty($page->translation->intro))
                            {!! $page->translation->intro->description !!}
                        @endif
                    </div>
                    <div class="grid-col image-holder subpage">

                        @if(isset($page->translation->intro->images) && sizeof($page->translation->intro->images) > 1)
                            <div id="image-slider-product-detail" class="image-slider">
                                <div class="placeholder">
                                    @foreach($page->translation->intro->images as $imageSlide)
                                        <figure data-order="{{$loop->index}}" class="image-placeholder">
                                            @foreach(['large', 'medium', 'small'] as $imageSize)
                                                <span class="{{$imageSize}}"
                                                      style="background-image: url('{{ $imageSlide[$imageSize] }}');"></span>
                                            @endforeach
                                        </figure>
                                    @endforeach

                                    <div class="controllers">
                                        <div class="nav-item previous"
                                             data-order="{{(sizeof($page->translation->intro->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>
                        @else
                            <figure class="medium"
                                    @if(isset($page->translation->intro->images[0]))
                                    style="background-image: url('{{$page->translation->intro->images[0]['medium']}}')"
                                    @endif
                            >
                                @if(isset($page->translation->intro->images[0]))
                                    <img alt="impression" src="{{$page->translation->intro->images[0]['medium']}}"/>
                                @endif
                            </figure>
                        @endif
                    </div>
                    <div class="bottom-triangle">@include('svg.triangle_empty')</div>
                </div>
            </div>
        </div>

        @if($machines->count() != 0)

            <div class="grid-row full-row product-specs" id="specs">
                <div class="grid-col">
                    <div class="grid-row">
                        <div class="grid-col specs-holder">
                            <div class="spec-header">
                                <h2>{{$page->translation->name}}</h2>
                                @if(isset($links->machinepark))
                                    <a class="button arrow filled" href="/{{$links->machinepark->route}}">
                                        {{ $links->machinepark->name }}
                                    </a>
                                @endif
                            </div>
                            <div class="spec-content">
                                @include('site.partials.machines.table')
                            </div>

                            @if(isset($links->machinepark))
                                <a class="button arrow filled spec-mobile-machinepark"
                                   href="/{{$links->machinepark->route}}">
                                    {{ $links->machinepark->name }}
                                </a>
                            @endif

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

        @endif

        @include('site.partials.productionMobileMenu')

        @include('site.partials.CTA-bottom')
    </section>
@endsection