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

{% set pageTitle = "Technoone" %}
{% set titleExtension = "homepage_title_extension"|trans %}
{% block meta %}
    <meta property="og:image" content="{{ app.request.schemeAndHttpHost }}{{ asset('img/intro.jpg') }}">
    <meta name="description" content='{{ "slider_our_locations"|trans }}'>
{% endblock %}

{% block content %}
    {% include "components/_intro.html.twig" with {options: {
        title: "homepage_intro_title"|trans|title,
        description: "homepage_intro_description"|trans,
        skip: ".home-about",
        breadcrumb: false
    }} %}

    <div class="home-about-wrapper section-wrapper">
        <div class="content-section home-about">
            <div class="content-title-wrapper">
                <h2 class="content-title">{{"about_technoone"|trans|title}}</h2>
            </div>
            <div class="content-inner">
                {% set i = 0 %}
                {% set serviceLang = null %}
                {% for service in services %}
                    {% if service.alias == "software" %}
                        {% set serviceLang = serviceLangs[i] %}
                    {% endif %}
                    {% set i = i + 1 %}
                {% endfor %}
                {% include "components/_text-container.html.twig" with {content: {
                    title: "homepage_software_services_section_title"|trans|title,
                    description: "homepage_software_services_section_description"|trans,
                    link: path('service_detail', {'alias': serviceLang.alias|default('software')})
                }} %}
                <div class="content-img"><img src="{{ asset('img/about.jpg') }}" alt="{{ 'homepage_software_services_section_title'|trans|title }}" title="{{ 'homepage_software_services_section_title'|trans|title }}"></div>
            </div>
        </div>
    </div>

    <div class="home-projects-wrapper section-wrapper">
        <div class="content-section home-projects">
            {% include "components/_text-container.html.twig" with {content: {
                title: "homepage_projects_section_title"|trans|title,
                description: "homepage_projects_section_description"|trans|capitalize,
                maxWidth: '50%'
            }} %}
            <div class="project-container">
                <div class="row">
                    {% for project in getProjects({'homeProjects': true}, app.request) %}
                        {% set projectLang = getLang(project.getProjectLangs(), app.request) %}
                        <a href="https://{{project.link}}" target="_blank" class="project-grid-item project-site" title="{{ projectLang.title }}">
                            <div class="project-img"><div class="project-img-backdrop"></div><img src="{{ asset('img/projects/'~project.bannerImage) }}" alt="{{ project.identifier|title ~ ' banner' }}" title="{{ project.identifier|title ~ ' banner' }}"></div>
                            <div class="project-text-wrapper">
                                <div class="project-logo"><img src="{{ asset('img/projects/'~project.logoImage) }}" alt="{{ project.identifier|title ~ ' logo' }}" title="{{ projectLang.title }}"></div>
                                <div class="project-text">{{projectLang.homeProjectsDescription}}</div>
                            </div>
                        </a>
                    {% endfor %}
                </div>
                <div class="row">
                    {% set i = 0 %}
                    {% set break = false %}
                    {% for service in services %}
                        {% if not break %}
                            {% set serviceLang = serviceLangs[i] %}
                            {% if serviceLang %}
                                {% set i = i + 1 %}
                                <a href="{{ path('service_detail', {'alias': serviceLang.alias}) }}" class="project-grid-item" title="{{ serviceLang.title }}">
                                    <div class="project-img"><div class="project-img-backdrop"></div>
                                        <img src="{{ asset('img/homepage/project-'~(i+2)~'.webp') }}" alt="{{ serviceLang.title }}" title="{{ serviceLang.title }}">
                                    </div>
                                    <div class="project-text-wrapper">
                                        <div class="project-text">{{serviceLang.title|title}}</div>
                                    </div>
                                </a>
                                {% if i == 4 %}
                                    {% set break = true %}
                                {% endif %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% set homeBrands = getProjects({'homeBrands': true}, app.request) %}
    <div class="home-brands" data-color="{{homeBrands[0].color}}">
        <div class="content-section brands-content-wrapper">
            <div class="brands-left-container">
                <h2>{{"our_brands"|trans|title}}</h2>
                <span>{{"brands_slider_description"|trans|capitalize}}</span>
                <div class="brands-link-section">
                    <div class="brand-link standart-button black-button arrow-anim big-button">{{"inspect_our_solutions"|trans|capitalize}}</div>
                    <div class="skip-button border-button big-button" data-skip=".home-slider"><i class="arrow-down arrow-dark"></i></div>
                </div>
                <div class="brands-progress" data-background="#fff" data-foreground="#3E7071"></div>
            </div>
            <div class="brands-content">
                <div class="scrolling">
                    {% set tags = getProjectTags(app.request) %}
                    {% for brandItem in homeBrands %}
                        {% set brandLang = getLang(brandItem.getProjectLangs(), app.request) %}
                        <div class="brand-item" data-color="{{ brandItem.color }}">
                            <div class="brand-banner"><img src="{{ asset('img/projects/'~brandItem.bannerImage) }}" alt="{{ brandItem.identifier|title ~ " banner" }}"></div>
                            <div class="brand-item-content">
                                <div class="brand-logo-container">
                                    <img src="{{ asset('img/projects/'~brandItem.iconImage) }}" alt="{{ brandItem.identifier|title ~ " icon" }}" class="brand-logo">
                                </div>
                                <div class="brand-text-container text-container">
                                    <div class="tag-container">
                                    </div>
                                    <h3>{{ brandLang.title|replace({'®': '<div class="registered">®</div>'})|raw }}</h3>
                                    <span>{{ brandLang.homeBrandsDescription }}</span>
                                    {#
                                    {% if brandItem.tagIdentifierArray and brandItem.tagIdentifierArray|length > 0 %}
                                        <div class="project-tags tag-container">
                                        {% for tag in brandItem.tagIdentifierArray %}
                                            <div class="tag project-tag">{{ tags[(tag)] }}</div>
                                        {% endfor %}
                                        </div>
                                    {% endif %}
                                    #}
                                    {% set hasPage = false %}
                                    {% for projectPage in projectPages[0] %}
                                        {% if brandItem.identifier == projectPage.name %}
                                            <a class="black-button standart-button arrow-anim" href="{{ path('project_page', {'project_name': projectPage.name}) }}">{{ "for_more_info"|trans|capitalize }}</a>    
                                            {% set hasPage = true %}
                                        {% endif %}
                                    {% endfor %}
                                    {% if not hasPage %}                                    
                                        <a class="black-button standart-button arrow-anim" href="https://{{ brandItem.link }}" target="_blank">{{ "for_more_info"|trans|capitalize }}</a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% include 'components/_locations-slider.html.twig' %}
    {% include 'components/_blog-section.html.twig' %}
    {% include 'components/_intern-section.html.twig' %}
{% endblock %}