{% extends 'base.html.twig' %}

{% set pageTitle = "offices"|trans|title %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/offices.css') }}">
{% endblock %}

{% set locations = getLocations() %}

{% block content %}
    {% include "components/_intro.html.twig" with {options: {
        title: "offices_intro_title"|trans|title,
        description: "offices_intro_description"|trans,
        skip: ".office-slider",
        bg: false,
        img: false
    }} %}
    {% set ddboxItems = [] %}
    {% if locations|length > 0%}
        <div class="office-slider">
            <div class="background">
                <img class="main" src="./assets/img/locations/slide1.webp" alt="">
            </div>
            <div class="office-slider-content">
                <div class="slider owl-carousel" data-carousel="{'items': 1.75, 'responsive':{'0':{'items':1}, '968': {'items': 1.5}, '1120': {'items': 1.75}}, 'margin': 30,'loop': true, 'nav': false, 'dots': false}">
                    {% for location in locations %}
                        {% set locationLang = getLang(location.getLocationLangs(), app.request) %}
                        {% if locationLang %}
                            {% set ddboxItems = ddboxItems|merge([{
                                "title": {(locale): locationLang.officeName},
                                "content": {(locale):
                                    locationLang.description~'\n\n'
                                    ~locationLang.address~'
                                    <div class="location-item-content">
                                        <div class="location-phone">+'~location.phoneNumber~'</div>
                                        <div class="location-mail">'~location.email~'</div>
                                    </div>
                                    <div class="standart-button black-button arrow-anim pointer" onclick=\'window.open("https://www.google.com/maps/search/'~locationLang.address~'", "_blank").focus()\'>'~ "click_for_directions"|trans ~'</div>
                                '},
                                "link": false,
                            }]) %}
                            <div class="slider-img" data-name="{{locationLang.locationName}}"><img src="{{asset('img/locations/'~location.image)}}" alt="{{locationLang.locationName}}"></div>
                        {% endif %}
                    {% endfor %}
                </div>
                <div class="slider-navigator">
                    <button class="slider-prev arrow-left arrow-dark border-button" data-owl-prev=".office-slider .slider"></button>
                    <button class="slider-next arrow-right arrow-dark border-button" data-owl-next=".office-slider .slider"></button>
                    <div class="slide-indicator">Arge Merkezi - Paü Teknokent</div>
                    <div class="page-indicator-container flex">
                        <span class="page-indicator">01</span>
                        <span>&nbsp;/&nbsp;</span>
                        <span>01</span>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <div class="section-wrapper locations-wrapper">
        <div class="content-section locations">
            <div class="content-title-wrapper">
                <span class="content-title">{{"locations"|trans|title}}</span>
            </div>
            <div class="locations-content">
                <h2>{{"office_locations"|trans|upper}}</h2>
                {% include 'components/_ddbox-container.html.twig' with {ddboxItems: ddboxItems} %}
            </div>
        </div>
    </div>
    {% include 'components/_intern-section.html.twig' %}
{% endblock %}