@extends('site.master')

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

@section('content')

    <div class="sidebar">

        <span class="fill-out white"></span>

        @include('site.partials.header')

        <div class="sidebar-content">
            <div class="grid-row">

                <div class="intro kms-content">

                    <figure>
                        <img alt="opleidingen" src="/img/msl_opleiding.svg">
                    </figure>

                    {!! $page->translation->intro->description !!}

                </div>

                <h1>
                    @lang('site/education.title')
                </h1>


                @foreach(['music_buddies', 'lessons_tigers', 'education_orchestra', 'junior_percussion'] as $part)

                    <a class="education-part {{$part}}" href="/{{$links->{$part}->route}}">
                        <figure>
                            @if(isset($page->translation->{$part}->images) && sizeof($page->translation->{$part}->images) != 0)
                                <img class="medium" alt="photo {{$part}}"
                                     src="{{$page->translation->{$part}->images[0]['medium']}}">
                                <img class="small" alt="photo {{$part}}"
                                     src="{{$page->translation->{$part}->images[0]['small']}}">
                            @endif
                        </figure>

                        <div class="grid-col content">
                            <h2>{{$page->translation->{$part}->typeName}}</h2>

                            @if($part == 'music_buddies')
                                <figure>
                                    <img alt="muziek maatjes" src="/img/muziekmaatjes.svg"/>
                                </figure>
                            @endif

                            {!! $page->translation->{$part}->description !!}

                            <div class="see-more">
                                <p>
                                    @lang('site/education.'.$part.'.0')

                                </p>
                                <div class="click-me-wrapper">
                                    <div class="lines">
                                        @for($i = 0; $i < 5; $i++)
                                            <span></span>
                                        @endfor
                                    </div>
                                    <span class="click-me">@lang('site/education.'.$part.'.1')</span>
                                </div>
                            </div>

                        </div>
                    </a>

                @endforeach


            </div>

        </div>

    </div>

    <div class="outro">
        <div class="grid-row">
            <div class="kms-content">
                {!! $page->translation->outro->description !!}
            </div>
        </div>
    </div>


@endsection