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

{% set pageTitle = "contact"|trans|capitalize %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/contact.css') }}">
    <style>
        .intro-img {
            background-image: url("{{asset('img/contact/intro.jpg')}}");
        }
    </style>
{% endblock %}

{% set queryTypes = getQueryTypes() %}

{% block content %}

    {% include "components/_intro.html.twig" with {options: {
        title: "contact_to_us"|trans|title,
        description: "contact_intro_description"|trans|capitalize,
        skip: ".locations-wrapper"
    }} %}
    <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">
                <div class="location-side">
                    <h1>{{'office_locations'|trans|title}}</h1>
                    <div class="location-items">
                        {% for location in getLocations() %}
                            {% set locationLang = getLang(location.getLocationLangs(), app.request) %}
                            {% if locationLang %}
                                <a class="location-item">
                                    <div class="location-name">{{locationLang.officeName|upper}}</div>
                                    <div class="location-address">{{locationLang.address|title}}</div>
                                    <div class="location-item-content">
                                        <div class="location-phone">+{{location.phoneNumber}}</div>
                                        <div class="location-mail">{{location.email}}</div>
                                    </div>
                                </a>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <div class="form-side">
                    <div class="contact-form">
                        <h1>{{'contact_form'|trans|title}}</h1>
                        <span>{{'contact_form_description'|trans|capitalize}}</span>
                        <div class="contact-form-content">
                            <div class="name-container">
                                <div class="first-name-input">
                                    <label for="firstName">{{'first_name'|trans|capitalize}} *</label>
                                    <input type="text" id="firstName" placeholder="{{'enter_first_name'|trans|capitalize}}">
                                </div>
                                <div class="last-name-input">
                                    <label for="lastName">{{'last_name'|trans|capitalize}} *</label>
                                    <input type="text" id="lastName" placeholder="{{'enter_last_name'|trans|capitalize}}">
                                </div>
                            </div>
                            <div class="mail-input">
                                    <label for="mail">{{'e-mail'|trans|capitalize}} *</label>
                                    <input type="text" id="mail" placeholder="{{'enter_e-mail'|trans|capitalize}}">
                                </div>
                            <div class="query-type relative">
                                <label for="query_type">{{'query_type'|trans|capitalize}} *</label>
                                <input type="text" class="selected" id="query_type" placeholder="{{'choose_query'|trans|capitalize}}" readonly/>
                                <div class="select-menu-trigger activate focusout_inactivate no_propagation input-select noselect" tabindex="0">
                                    <div class="select-menu no_propagation">
                                        <ul>
                                            {% for queryType in queryTypes %}
                                                <li><a class="hvr" data-id="{{queryType.id}}">{{getText(queryType.identifier, app.request)|capitalize}}</a></li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="message">
                                <label for="message">{{'message'|trans|capitalize}} *</label>
                                <input type="text" id="message" placeholder="{{'enter_message'|trans|capitalize}}">
                            </div>
                            <a class="black-button standart-button send-email">{{'send_message'|trans|capitalize}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include "components/_intern-section.html.twig" %}
{% endblock %}