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

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

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

{% block meta %}
    {% set desc = "services_intro_description"|trans|capitalize|split('.') %}
    <meta name="description" content='{{ (desc[0] ~ desc[1] ~ ".")|capitalize }}'>
{% endblock %}

{% block content %}

    {% include "components/_intro.html.twig" with {options: {
        title: "services_intro_title"|trans|title,
        description: "services_intro_description"|trans|capitalize,
        skip: ".services",
        img: false,
        maxWidth: '100%'
    }} %}
    <div class="section-wrapper services-wrapper">     
        <div class="content-section services">
            <div class="service-router-side">
                <ul class="service-router">
                    {% set i = 0 %}
                    {% for service in services %}
                        {% set serviceLang = serviceLangs[i] %}
                        {% if serviceLang %}
                            {% set i = i + 1 %}
                            <li>
                                <a {#href="{{ path('service_detail', {'alias': service.alias}) }}"#}data-skip="[data-id='{{i}}']" class="service-router-item skip-button">
                                    <div class="icon-container"><div class="icon {{ service.alias }}-icon"></div></div>
                                    <span>{{ serviceLang.title }}</span>
                                    <div class="arrow-right arrow-dark"></div>
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
            <div class="dd-box-side">
                {% set i = 0 %}
                {% for service in services %}
                    {% set serviceLang = serviceLangs[i] %}
                    {% if serviceLang %}
                    {% set serviceContent = serviceContents[i] %}
                        {% set i = i + 1 %}
                        <div class="route" data-id="{{ i }}">
                            <div class="route-top">
                                <h3>{{ serviceLang.title }}</h3>
                                <a href="{{ path('service_detail', {'alias': serviceLang.alias}) }}">{{ "inspect_in_detail"|trans|lower }}</a>
                            </div>
                            {% include 'components/_ddbox-container.html.twig' with {ddboxItems: serviceContent.ddboxItemArray["boxes"]} %}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}