@extends('layouts.master')

@section('editable_content')

    <div class="ajax-container our-studio-overview">

        <nav class="sub-menu">
            <ul>
                @foreach($page->pageChildren as $studioMenuItem)
                    <li class=" @if($studioMenuItem->code_name == $page->code_name) active @endif ">
                        <a data-pjax data-code-name="ourStudio" href="/{{$links->{$studioMenuItem->code_name}->route }}">
                            {{--{{$links->{$serviceMenuItem->code_name}->name }}--}}
                        </a>
                    </li>
                @endforeach
            </ul>
        </nav>

        <div class="navigation-placeholder">
            @foreach($page->pageChildren as $child)
                <a data-pjax data-code-name="ourStudio" class="studio-block {{$child->code_name}}" href="/{{$links->{$child->code_name}->route}}">
                    <figure class="animation-part"
                            style="background-image: url('/img/{{$child->code_name}}.jpg');">
                        <div class="shape ">
                            @if(in_array($child->code_name, ['creativity']))
                                @include('layouts.svg.triangle')
                            @elseif(in_array($child->code_name, ['ourFactory']))
                                @include('layouts.svg.square')
                            @elseif(in_array($child->code_name, ['ourTeam']))
                                @include('layouts.svg.hexagon')
                            @endif
                        </div>
                    </figure>
                    <p>
                        {{ str_replace(' ', '<br/>', $links->{$child->code_name}->name)}}
                    </p>
                </a>
            @endforeach
        </div>

        <div class="title">
            <h1>
                <small>{{ KommaLang::get('watch') }}</small>
                {{$page->translation->name}}
            </h1>
        </div>

    </div>

@endsection