@extends('layouts.master')

@section('editable_content')

    <div class="center center-machines">
        <div class="col hide_on_small">
            &nbsp;
        </div>
        <div class="col w4 pad_l machine-detail">

            {{-- Breadcrumbs --}}
            @include('layouts.partials.machineDetailBreadcrumb')

            {{-- Load current machine title and subtitle --}}
            <h1>{{$page->translation->name}}</h1>
            <h3>{{$page->translation->sub_title}}</h3>

            {{-- Load machine image --}}
            @if($page->images->count() != 0)
            <div class="images-container">
                <div class="image-main{{$project->sold ? " sold" : ""}}" style="width: 100%">
                    <img src="{{$page->images->first()->medium_image_url}}" alt="photo" width="100%"/>
                </div>

                {{-- If there is more than 1 image create thumbnails aside of the main image --}}
                @if($page->images->count() > 1)
                <div class="images-thumbs">
                    @foreach($page->images as $image)
                        <img src="{{$image->thumb_image_url}}" class="image-thumbnail" data-url="{{$image->medium_image_url}}" alt="photo"/>
                    @endforeach
                </div>
                @endif
            </div>
            @endif

            {{-- Load filled machine data --}}
            @include('layouts.partials.machineData')

            {{-- Load relevant machines (sorted trough lifting capacity) --}}
            @include('layouts.partials.relevantMachines')

            {{-- Button returns to the current category overview --}}
            <a href="{{url('gebruikte-machines/' . $categoryCodeName)}}" class="return-button">
                <span class="back-arrow"></span>Terug naar {{ $categoryString }} overzicht
            </a>

            <div class="clear"></div>


        </div>
        <div class="clear"></div>
    </div>

@endsection