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

{% set pageTitle = introTitle|title %}

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

{% block content %}

    {% include "components/_intro.html.twig" with {options: {
        title: introTitle,
        description: introDescription,
        skip: ".service-detail-wrapper"
    }} %}
    <div class="section-wrapper service-detail-wrapper">
        <div class="content-section service-detail">
            <div class="text-container">
                <h3 class="title">{{textTitle}}</h3>
                <span>{{textDescription}}</span>
                <a class="read-more" href="">{{"read_more"|trans|capitalize}}</a>
                <hr>
            </div>
            <div class="support-side">
                <div class="text">
                    <h4>{{"service_detail_side_title"|trans|title}}</h4>
                    <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 content.content["content"] %}
                <div class="section-wrapper service-detail-wrapper">
                    <div class="">
                        {% if section.contentTitle is defined %}
                            <div class="content-title-wrapper">
                                <span class="content-title">{{ section.contentTitle[locale] }}</span>
                            </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)}}" alt=""></div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% if loop.index < content.content["content"]|length %}
                    <hr>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div class="section-wrapper references-wrapper">
        <div class="content-section references">
            <div class="content-title-wrapper">
                <span class="content-title">{{referenceSectionTitle|title}}</span>
            </div>
            {% include 'components/_references-content.html.twig' %}
        </div>
    </div>
{% endblock %}

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