{% extends 'base.html.twig' %}
{% block metaTitle %}{{ meta.title|default }}{% endblock %}
{% block metaDescription %}{{ meta.description|default }}{% endblock %}
{% block stylesheets %}
{% endblock %}
{% block body %}
<div class="root_container">
    <div class="root_header support_header_root">
        {% set projectsPage = getPages({'alias': 'Projeler'}) %}
        {% set projectsSection = getPageSections({'alias': 'İntro Kısmı', 'pageId': projectsPage.id}) %}
        {% set projectsIntroLang = getPageSectionLangLocale({'section': projectsSection, 'locale': app.request.locale}) %}
        {% if projectsIntroLang is defined %}
            <div class="support_header_write">
                <h5>{{ projectsIntroLang.shortTitle|default }}</h5>
                <h2 class="animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>{{ projectsIntroLang.title|default }}</h2>
                <div>{{ projectsIntroLang.text|default|raw }}</div>
            </div>
        {% else %}
            <div class="support_header_write">
                <h5>PROJECTS</h5>
                <h2 class="animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>Our categories in which we develop applications and projects</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,</p>
            </div>
        {% endif %}
    </div>
    <div class="root_body">
        <div class="root_body_pad">

            <div class="projects_boxs">
                {% set projects = getProjects(null) %}


                {% for project in projects %}
                    {% set projectLang = getProjectsLangs({'Projects': project, 'lang': app.request.locale}) %}
                    {% set projectImage = getProjectsImages({'Projects': project}) %}

                    <div class="project_box animate_start" data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                        {% set dir = getParameters("page_projects_dir") %}
                        {% set imageDir = projectImage is defined and projectImage.name is defined ? (dir ~ projectImage.name) : 'assets/img/projects/LL-5.png' %}

                        <img src="{{ asset(imageDir) }}" alt="{{ projectLang.alt|default }}">
                        <h4>{{ projectLang.title|default }}</h4>
                        <p>{{ projectLang.description|default|raw }}</p>
                    </div>
                {% endfor %}
            </div>
            <div class="projects_header">
                <div class="icon">
                    <div class="border">
                        <img src="{{ asset('assets/img/projects/dyenix-L.png') }}" alt="x">
                    </div>
                </div>
                <div class="header">
                    <h3> {{ "pages.projects.all-affiliates"|trans|upper }}</h3>
                </div>
            </div>
            <div class="projects_body">
                {% for affiliate in affiliates %}
                    {% set affiliateLang = getAffiliatesLangs({'Affiliates': affiliate, 'lang': app.request.locale}) %}
                    {% set affiliateImage = getAffiliatesImages({'Affiliates': affiliate, 'type': 'logo'}) %}
                    <div class="brand_link animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                        {% set dir = getParameters("page_affiliates_dir") %}
                        {% set imageDir = affiliateImage is defined and affiliateImage.name is defined ? (dir ~ affiliateImage.name) : 'assets/img/projects/akgun.png' %}

                        <img src="{{ asset(imageDir) }}" alt="{{ affiliateLang.logoAlt[0]|default }}">
                        {% if affiliateLang.link is not empty %}
                            <a href="https://{{ affiliateLang.link|default }}/" target="_blank">
                                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect> <path d="M30 19H20C15.5817 19 12 22.5817 12 27C12 31.4183 15.5817 35 20 35H36C40.4183 35 44 31.4183 44 27C44 24.9711 43.2447 23.1186 42 21.7084" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 24.2916C4.75527 22.8814 4 21.0289 4 19C4 14.5817 7.58172 11 12 11H28C32.4183 11 36 14.5817 36 19C36 23.4183 32.4183 27 28 27H18" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                            </a>
                        {% endif %}
                    </div>
                    {#<div class="brand_link animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 300}'>
                        <img src="./assets/img/projects/tedak.png" alt="brand">
                        <a href="#">
                          <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect> <path d="M30 19H20C15.5817 19 12 22.5817 12 27C12 31.4183 15.5817 35 20 35H36C40.4183 35 44 31.4183 44 27C44 24.9711 43.2447 23.1186 42 21.7084" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 24.2916C4.75527 22.8814 4 21.0289 4 19C4 14.5817 7.58172 11 12 11H28C32.4183 11 36 14.5817 36 19C36 23.4183 32.4183 27 28 27H18" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                        </a>
                    </div>
                    <div class="brand_link animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 600}'>
                        <img src="./assets/img/projects/beoft.png" alt="brand">
                        <a href="#">
                            <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect> <path d="M30 19H20C15.5817 19 12 22.5817 12 27C12 31.4183 15.5817 35 20 35H36C40.4183 35 44 31.4183 44 27C44 24.9711 43.2447 23.1186 42 21.7084" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 24.2916C4.75527 22.8814 4 21.0289 4 19C4 14.5817 7.58172 11 12 11H28C32.4183 11 36 14.5817 36 19C36 23.4183 32.4183 27 28 27H18" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                        </a>
                    </div>
                    <div class="brand_link animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 900}'>
                        <img src="./assets/img/projects/akgun.png" alt="brand">
                        <a href="#">
                       <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect> <path d="M30 19H20C15.5817 19 12 22.5817 12 27C12 31.4183 15.5817 35 20 35H36C40.4183 35 44 31.4183 44 27C44 24.9711 43.2447 23.1186 42 21.7084" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 24.2916C4.75527 22.8814 4 21.0289 4 19C4 14.5817 7.58172 11 12 11H28C32.4183 11 36 14.5817 36 19C36 23.4183 32.4183 27 28 27H18" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                        </a>
                    </div>#}
                {% endfor %}
            </div>
        </div>
    </div>
    {% include "components/innerPageFooter.html.twig" %}
</div>
{% endblock %}

{% block javascripts_bottom %}
    <script src="{{ asset('assets/js/navbar.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
{% endblock %}