@extends('master')

@section('title', !empty($page->translation->meta_title) ? $page->translation->meta_title : config('site.company.name'))
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="l-body">
        <div class="o-hero">
            <picture class="o-hero__frame  o-contact__hero">
                @if(isset($page->images) && $page->images->isNotEmpty())
                    <source media="(min-width: 1100px)" srcset="{{ $page->images->first()->large_image_url }}">
                    <source media="(min-width:475px)" srcset="{{ $page->images->first()->medium_image_url }}">
                    <img class="o-hero__img" alt="{{ $page->images->first()->name }}" src="{{ $page->images->first()->small_image_url }}" data-kal="photo-zoom-out" style="--kal-duration: 2.0s;">
                @endif
            </picture>
        </div>
        <div class="l-contain">
            <div class="o-contact">
                <div class="o-contact__body" data-kal="slide-right">
                    @include('components.breadcrumb')

                    @if(isset($components) && $components->has('main'))
                        <div class="s-text  s-text--main  s-text--small-indents  u-spacing-mt5">
                            {!! $components->get('main')->text !!}
                        </div>
                    @endif

                    <div class="o-contact__location">
                        <h3 class="o-contact__heading">@lang('site/contact.main_location')</h3>
                        <p>{{ config('site.company.address') }}</p>
                        <p>{{ config('site.company.postal_code') }} {{ config('site.company.city') }}</p>

                        <div class="o-contact__connect">
                            <p><a href="tel:{{ config('site.company.phone.call') }}">T.&nbsp;&nbsp;{{config('site.company.phone.display')}}</a></p>
                            <p><a href="mailto:{{ config('site.company.email') }}">E.&nbsp;&nbsp;{{config('site.company.email')}}</a></p>
                        </div>

                        <h4 class="o-contact__subheading">@lang('site/contact.opening_hours')</h4>
                        <dl class="o-contact__timetable">
                            <dt>{{ucfirst(__('calendar.day_names.1')) }}:</dt><dd>08.30 - 21.30 @lang('site/contact.hour')</dd>
                            <dt>{{ucfirst(__('calendar.day_names.2')) }}:</dt><dd>08.30 - 21.30 @lang('site/contact.hour')</dd>
                            <dt>{{ucfirst(__('calendar.day_names.3')) }}:</dt><dd>08.30 - 21.30 @lang('site/contact.hour')</dd>
                            <dt>{{ucfirst(__('calendar.day_names.4')) }}:</dt><dd>08.30 - 21.30 @lang('site/contact.hour')</dd>
                            <dt>{{ucfirst(__('calendar.day_names.5')) }}:</dt><dd>08.30 - 17.00 @lang('site/contact.hour')</dd>
                            <dt>{{ucfirst(__('calendar.day_names.6')) }}:</dt><dd>09.00 - 13.30 @lang('site/contact.hour')</dd>
                        </dl>

                    </div>
                </div>
                <div class="o-contact__form" data-kal="slide-up">

                    <div class="u-spacing-mb4">
                        @include('components.servicepoint', [
                                'servicePointImage' => '/img/chat-person.jpg',
                                'servicePointLabel' => __('site/contact.cta.heading'),
                                'servicePointButtonText' => __('site/contact.cta.teaser'),
                                'servicePointButtonLink' => 'tel:' . config('site.company.phone.call'),
                            ])
                    </div>

                    @include('organisms.forms.contact')
                </div>
            </div>

            @if(isset($composedLocations))
                <div class="o-locations  l-block">
                    <h2 class="o-locations__header  u-color-primary--500  u-spacing-mb5" data-kal="slide-left">@lang('site/contact.all_locations')</h2>
                    <div class="o-locations__grid">
                        <div class="l-triple-grid">
                            @foreach($composedLocations as $composedLocation)
                                <div class="l-triple-grid__item" data-kal="fade" style="--kal-delay: {{($loop->index % 3) * 0.15}}s">
                                    @include('components.locationCard', ['location' => $composedLocation ])
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

        </div>

    </div>

@endsection