@extends('layouts.master')

@section('editable_content')

    <div class="ajax-container services">

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

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

        @foreach($page->pageChildren as $child)
            <a data-pjax data-code-name="services" class="{{$child->code_name}} animation-part" href="/{{$links->{$child->code_name}->route}}" >
                <figure style="background-image: url('/img/services/{{$child->code_name}}.png');"></figure>
                <p>
                    {{ str_replace(' ', '<br/>', $links->{$child->code_name}->name)}}
                </p>
            </a>
        @endforeach

    </div>

@endsection