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

{% set pageTitle = serviceLang.introTitle|title %}

{% block meta %}
    <meta name="description" content='{{ serviceLang.introDescription }}'>
    <meta property="og:image" content="{{ app.request.schemeAndHttpHost }}{{ asset('img/services/'~service.introImage) }}">
    {% if serviceLang.keywords %}
        <meta name="keywords" content="{{ serviceLang.keywords }}">
    {% endif %}
{% endblock %}

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

{% block content %}
    
    {% include "components/_intro.html.twig" with {options: {
        title: serviceLang.introTitle,
        description: serviceLang.introDescription,
        skip: ".service-detail-wrapper"
    }} %}
    <div class="section-wrapper service-detail-wrapper">
        <div class="content-section service-detail">
            <div class="text-container">
                <h2 class="title">{{ serviceLang.textTitle }}</h2>
                <span class="text">
                    <div class="glow"></div>
                    {{ formatString(serviceLang.textDescription)|raw }}
                </span>
                <a class="read-more" href="">{{ "read_more"|trans|capitalize }}</a>
                <hr>
            </div>
            <div class="support-side">
                <div class="text">
                    <h3>{{ "service_detail_side_title"|trans|title }}</h3>
                    <span>{{ "service_detail_side_text"|trans|capitalize|raw }}</span>
                </div>
                <a href="{{ path('contact') }}" style="text-decoration: none" class="black-button standart-button arrow-anim big-button">{{ "contact_to_us"|trans|capitalize }}</a>
            </div>
            {% for section in service.content.content["content"] %}
                <div class="section-wrapper service-detail-wrapper">
                    <div class="">
                        {% if section.contentTitle is defined %}
                            <div class="content-title-wrapper">
                                <h2 class="content-title">{{ section.contentTitle[locale] }}</h2>
                            </div>
                        {% endif %}
                        <div class="content-inner">
                            {% set cont = [] %}
                            {% if section.leftSide is defined %}{% set cont = cont|merge([section.leftSide]) %}{% endif %}
                            {% if section.rightSide is defined %}{% set cont = cont|merge([section.rightSide]) %}{% endif %}
                            {% for side in cont %}
                                {% set list = [] %}
                                {% if side.type == "textContainer" %}
                                    {% if side.content.list is defined %}{% set list = side.content.list %}{% endif %}
                                    {% include "components/_text-container.html.twig" with {content: {
                                        "title": side.content.title[locale],
                                        "description": side.content.description[locale],
                                        "list": list,
                                        "isDark": (side.content.isDark is defined)? side.content.isDark : false,
                                        "maxWidth": (side.content.maxWidth is defined)? side.content.maxWidth : null,
                                        "multipleLists": (side.content.multipleLists is defined)? side.content.multipleLists : null
                                    }} %}
                                {% elseif side.type == "ddboxContainer" %}
                                    {% set boxes = [] %}
                                    {% for box in side.content.boxes %}
                                        {% set boxes = boxes|merge([{
                                            "title": box.title[locale],
                                            "content": box.content[locale],
                                            "link": box.link
                                        }]) %}
                                    {% endfor %}
                                    {% include "components/_ddbox-container.html.twig" with {ddboxItems: boxes} %}
                                {% elseif side.type == "image" %}
                                    <div class="content-img"><img src="{{ asset('img/project/'~projectName~'/'~side.content.src) }}"></div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% if loop.index < service.content.content["content"]|length %}
                    <hr>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    {% if references|length > 0 %}
        <div class="section-wrapper references-wrapper">
            <div class="content-section references">
                <div class="content-title-wrapper">
                    <h2 class="content-title">{{ serviceLang.referenceSectionTitle|title }}</h2>
                </div>
                {% include 'components/_references-content.html.twig' with {'references': references} %}
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/offices.js') }}"></script>
{% endblock %}