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

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

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/services.css') }}">
{% 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
    }} %}
    <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}) }}" class="service-router-item skip-button">
                                    <div class="icon"></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">
                            <div class="route-top">
                                <h3>{{serviceLang.title}}</h3>
                                <a href="{{ path('service_detail', {'alias': service.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 %}