{% 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">
                {# AFFILIATES MAIN SECTION #}
                {% set aboutusPage = getPages({'alias': 'Hakkımızda'}) %}
                {% set aboutusSection = getPageSections({'alias': 'İntro Kısmı', 'pageId': aboutusPage.id}) %}
                {% set aboutusIntroLang = getPageSectionLangLocale({'section': aboutusSection, 'locale': app.request.locale}) %}

                {% set aboutusIntroImage = getPageSectionImages({'section': aboutusSection}) %}
                <h5>{{ aboutusIntroLang.shortTitle|default }}</h5>
                <h2 class="animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>{{ aboutusIntroLang.title|default }}</h2>
                <div>{{ aboutusIntroLang.text|default|raw }}</div>
            </div>
            <div class="root_body">
                <div class="root_body_pad">
                    {% set aboutusImagesSection = getPageSections({'alias': 'Resimli Kısım', 'pageId': aboutusPage.id}) %}
                    {% set aboutusImagesSectionLang = getPageSectionLangLocale({'section': aboutusImagesSection, 'locale': app.request.locale}) %}
                    {% set aboutusImagesSectionImages = getPageSectionImages({'section': aboutusImagesSection, 'multipleData': true}) %}


                    <div class="about_us_section_1" style="background-image: url({{ asset('assets/img/all-images/map-01.png') }}); background-repeat: no-repeat; background-size: 60%; background-position: bottom;">
                        <div class="about_us_image_container">
                            {% if aboutusImagesSectionImages is not null %}
                                {% for image in aboutusImagesSectionImages %}
                                    {% set dir = getParameters("page_about_us_images_section_dir") %}
                                    {% set imageDir = image is defined and image.name is defined ? (dir ~ image.name) : 'assets/img/about-us/build-dyenix.png' %}

                                    <img src="{{ asset(imageDir) }}" alt="{{ aboutusImagesSectionLang.alt[loop.index - 1]|default }}" class="animate_start" data-params='{"opacity": [0, 1], "translateX": [-100, 0], "duration": 500, "easing": "easeInOutQuad"}'>
                                {% endfor %}
                            {% else %}
                                <img src="{{ asset('assets/img/about-us/build-dyenix.png') }}" alt="Build" class="animate_start" data-params='{"opacity": [0, 1], "translateX": [-100, 0], "duration": 500, "easing": "easeInOutQuad"}'>
                                <img src="{{ asset('assets/img/about-us/home-design.png') }}" alt="Build" class="animate_start" data-params='{"opacity": [0, 1], "translateY": [100, 0], "duration": 500, "easing": "easeInOutQuad"}'>
                            {% endif %}
                        </div>
                        <div class="about_us_desc_container">
                            <div class="about_us_desc_container_width">
                                <p class="title animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 500, "easing": "easeInOutQuad"}'>{{ aboutusImagesSectionLang.title|default }}</p>
                                <div class="description animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 500, "easing": "easeInOutQuad"}'>{{ aboutusImagesSectionLang.text|default|raw }}</div>
                            </div>
                        </div>
                        <div class="independent_div animate_start" data-params='{"opacity": [0, 1], "translateX": [-100, 0], "duration": 1500, "easing": "easeInOutQuad"}'>
                            <div class="independent_div_circle_border_dashed">
                                <div class="independent_div_circle_border">
                                    <div class="independent_div_img_container">
                                        {% set dir = getParameters("page_about_us_intro_dir") %}
                                        {% set imageDir = aboutusIntroImage is defined and aboutusIntroImage.name is defined ? (dir ~ aboutusIntroImage.name) : 'assets/img/about-us/akgunn-1.png' %}

                                        <img src="{{ asset(imageDir) }}" alt="{{ solutionLang.alt|default }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="about_us_section_2">
                        <div class="about_us_root_header">
                            {% set aboutusOurValuesIntroSection = getPageSections({'alias': 'Değerlerimiz İntro Kısmı', 'pageId': aboutusPage.id}) %}
                            {% set aboutusOurValuesIntroLang = getPageSectionLangLocale({'section': aboutusOurValuesIntroSection, 'locale': app.request.locale}) %}
                            {% if aboutusOurValuesIntroLang is not empty %}
                                <h5>{{ aboutusOurValuesIntroLang.shortTitle|default }}</h5>
                                <h2 class="animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>{{ aboutusOurValuesIntroLang.title|default }}</h2>
                                <p>{{ aboutusOurValuesIntroLang.text|default|raw }}</p>
                            {% else %}
                                <h5>OUR VALUES</h5>
                                <h2 class="animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>Defining Value Added Projects; Establishing a System, Trust and Honesty</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>
                            {% endif %}
                        </div>
                        <div class="about_us_info_box_container">
                            {% set aboutusOurValuesSections = getPageSections({'alias': 'Değerlerimiz Bölümler', 'pageId': aboutusPage.id, 'multipleData': true}) %}
                            {% for ourValueSection in aboutusOurValuesSections %}
                                {% set aboutusOurValuesSectionLang = getPageSectionLangLocale({'section': ourValueSection, 'locale': app.request.locale}) %}
                                {% set aboutusOurValuesImage = getPageSectionImages({'section': ourValueSection, 'locale': app.request.locale}) %}
                                <div class="about_us_info_box animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 500, "easing": "easeInOutQuad"}' style="cursor: pointer">
                                    <div class="icon">
                                        <div class="icon_border">
                                            {% set dir = getParameters("page_about_us_our_values_sections_dir") %}
                                            {% set imageDir = aboutusOurValuesImage is defined and aboutusOurValuesImage.name is defined ? (dir ~ aboutusOurValuesImage.name) : 'assets/img/about-us/iccon-1.png' %}

                                            <img src="{{ asset(imageDir) }}" alt="{{ aboutusOurValuesSectionLang.alt[0]|default }}">
                                        </div>
                                    </div>
                                    <div class="header">
                                        <h4>{{ aboutusOurValuesSectionLang.title|default }}</h4>
                                        <span>{{ aboutusOurValuesSectionLang.text|default|raw }}</span>
                                    </div>
                                    <div class="button">
                                        <div class="button_border">
                                            <svg viewBox="0 0 24 24" 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">
                                                    <path d="M19 5L12.7071 11.2929C12.3166 11.6834 11.6834 11.6834 11.2929 11.2929L5 5" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    <path d="M19 13L12.7071 19.2929C12.3166 19.6834 11.6834 19.6834 11.2929 19.2929L5 13" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                </g>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </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>

    <script>
        $(document).ready(function() {
            // $('.about_us_info_box .button_border').on('click', function() {
            //     $('.about_us_info_box .header span')
            //         .not($(this).closest('.about_us_info_box').find('.header span'))
            //         .slideUp(function() {
            //             $(this).css('display', '');
            //         });
            //     $(this).closest('.about_us_info_box').find('.header span').stop(true, true).slideToggle(function() {
            //         if ($(this).is(':visible')) {
            //             $(this).css('display', 'inline-block');
            //         }
            //     });
            // });

            $('.about_us_info_box').hover(
                function() { // Mouse üzerine gelince çalışır
                    $('.about_us_info_box .header span')
                        .not($(this).closest('.about_us_info_box').find('.header span'))
                        .slideUp(function() {
                            $(this).css('display', '');
                        });
                    $(this).closest('.about_us_info_box').find('.header span').stop(true, true).slideToggle(function() {
                        if ($(this).is(':visible')) {
                            $(this).css('display', 'inline-block');
                        }
                    });
                },
                function() { // Mouse çekilince çalışır
                    $(this).closest('.about_us_info_box').find('.header span').stop(true, true).slideUp(function() {
                        $(this).css('display', '');
                    });
                }
            );

        });
    </script>
{% endblock %}