@extends('frontend.layouts.main', [
    'hasMaps' => true
])
@section('content')
<div class="offices-page" data-controller="pages/offices">
    <div class="offices-page__header">
        <div class="offices-page__intro">
            <h1>{{ $object->header_title }}</h1>
            {!! $object->content !!}
        </div>
        @if($templateData->mainContact)
        <div class="offices-page__main-contact">
            <h3>{{ $templateData->mainContact->title }}</h3>
            <span class="light-blue"><i>{{ $templateData->mainContact->subtitle }}</i></span>
            <div class="contact">
                <a href="tel:{{ $templateData->mainContact->phone }}">
                    {{ $templateData->mainContact->phone }}
                </a> &middot;
                {!! email_link_tag($templateData->mainContact->email) !!}
            </div>
        </div>
        @endif
    </div>
    <div class="offices-page__offices">
        <div class="offices-page__offices-title">
           @lang('frontend.offices_in')
        </div>
        <div class="offices-page__filters">
           @foreach(['europe', 'asia', 'oceania', 'north_america', 'south_america', 'africa'] as $key => $continent)
               <a class="item-button roundcorner office-continent" data-action="filterContinent" data-continent-id="{{$continent}}" href="#europe">
                   <span class="icon fa fa-map-marker"></span> @lang('frontend.' . $continent)</a>
           @endforeach
        </div>
        <div class="offices-page__mobile-filters">
            <div class="filters-placeholder">
                <div class="filters-select month">
                    <div class="filter-wrapper">
                        <span class="items-filter">@lang('frontend.region')</span>
                        <a class="open-filter" data-action="openFilters">
                            <span class="selected-item">---</span>
                            <span class="icon fa fa-caret-down"></span>
                        </a>
                        <div class="filter-data-holder">
                            <div class="filter-data-holder-tip"></div>
                            <ul>
                                <li><a class="filter-item month-filter region-filter office-continent" data-action="filterContinent" data-continent-id="all" value="0">@lang('frontend.all') </a></li>
                                @foreach(['europe', 'asia', 'oceania', 'north_america', 'south_america', 'africa'] as $key => $continent)
                                    <li><a class="filter-item month-filter office-continent" data-action="filterContinent" data-continent-id="{{$continent}}" href="#europe" value="{{$key + 1}}">@lang('frontend.' . $continent)</a></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="offices-page__map">
        <div class="map-area"></div>
        <div class="overlay"></div>
    </div>
    <div class="offices-page__results">
        <div class="offices-page__results-container">
            <!-- Will contain the offices -->
        </div>
        <div class="offices-page__results-container offices-page__results-container--no-results">
            @lang('frontend.no_offices_found')
        </div>
        <div class="loading">
            <span class="fa fa-cog fa-spin"></span>
        </div>
    </div>

    @include('frontend.templates.components.related_footer', array('title' => trans('frontend.further_reading')))
</div>
<div class="offices-page__linkedin-area">
    <div>
        <h1>@lang('frontend.wer_on_linkedin')</h1>
        <p>@lang('frontend.check_out_spg_channel')</p>
        <a target="_blank" href="https://www.linkedin.com/company/123103" class="std-button alt-color">@lang('frontend.follow_us')</a>
    </div>
</div>
@stop