@extends('layouts.pages.page')

@section('additional-page-content')

    <div class="about-row">
        <div class="grid-row default-page-content">
            <div class="images">
                @foreach(['medium', 'small'] as $imageSize)
                    <span class="{{$imageSize}}"
                          style="background-image: url('{{ $page->content->second->images[0]->{$imageSize.'_image_url'} }}');"></span>
                @endforeach

                <picture>
                    <source media="(max-width: 425px)"
                            srcset="{{$page->content->second->images[0]->small_image_url}}">
                    <img src="{{$page->content->second->images[0]->medium_image_url}}"
                         alt="image">
                </picture>
            </div>

            <div class="content">

                @if(isset($page->content->second->typeName) && $page->content->second->typeName != '')
                    <h1>{{$page->content->second->typeName}}</h1>
                @else
                    <h1>{{$page->translation->name}}</h1>
                @endif

                {{ $page->content->second->description }}

                <a class="button" target="_blank" href="{{$page->content->second->link}}">
                    {{$page->content->second->link_text}}
                </a>


            </div>
        </div>
    </div>
    <div class="about-button-row">
        <div class="grid-row">
            <a class="button" href="{{$links->contact->route}}">
                Contact opnemen
                <span class="arrow">@include('svg.arrow')</span>
            </a>
        </div>
    </div>

@endsection