{% 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 sustainability_header_root">
                {% set sustainabilityPage = getPages({'alias': 'Sürdürülebilirlik'}) %}
                {% set sustainabilitySection = getPageSections({'alias': 'İntro Kısmı', 'pageId': sustainabilityPage.id}) %}
                {% set sustainabilityIntroLang = getPageSectionLangLocale({'section': sustainabilitySection, 'locale': app.request.locale}) %}
                {% set sustainabilityIntroImages = getPageSectionImages({'section': sustainabilitySection, 'multipleData': true}) %}

                <div class="sustainability_header_write">
                    <h5>{{ sustainabilityIntroLang.shortTitle|default }}</h5>
                    <h2 class="animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>{{ sustainabilityIntroLang.title|default }}</h2>
                    <p>{{ sustainabilityIntroLang.text|default|raw }}</p>
                </div>
                <div class="sustainability_header_img">

                    {% for introImage in sustainabilityIntroImages %}
                        {% set dir = getParameters("page_sustainability_intro_dir") %}
                        {% set imageDir = introImage is defined and introImage.name is defined ? (dir ~ introImage.name) : 'assets/img/sustainability/ecovadis.png' %}

                        <img src="{{ asset(imageDir) }}" alt="{{ sustainabilityIntroLang.alt[0]|default }}" class="animate_start" data-params='{"opacity": [0, 1], "duration": 1000, "easing": "easeInOutQuad", "delay": {{ loop.index0 * 300 }}}'>
                    {% endfor %}
                </div>
            </div>
            <div class="root_body">
                <div class="root_body_pad">
                    <div class="sustainability_header_filter_container">
                        {% set sustainabilityTopSection = getPageSections({'alias': 'Üst Kısım', 'pageId': sustainabilityPage.id}) %}
                        {% set sustainabilityTopSectionLang = getPageSectionLangLocale({'section': sustainabilityTopSection, 'locale': app.request.locale}) %}
                        {% set sustainabilityTopSectionImage = getPageSectionImages({'section': sustainabilityTopSection}) %}
                        <div class="sustainability_header_filter">
                            <div class="icon animate_start" data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>

                                {% set dir = getParameters("page_sustainability_ust_kisim_dir") %}
                                {% set imageDir = sustainabilityTopSectionImage is defined and sustainabilityTopSectionImage.name is defined ? (dir ~ sustainabilityTopSectionImage.name) : '' %}

                                {% if imageDir is not empty %}
                                    <img src="{{ asset(imageDir) }}" alt="{{ sustainabilityTopSectionLang.alt[0]|default }}" class="animate_start" data-params='{"opacity": [0, 1], "duration": 1000, "easing": "easeInOutQuad", "delay": 300}'>
                                {% else %}
                                    <svg fill="#c41329" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                         viewBox="0 0 442 442" xml:space="preserve">
                                        <g>
                                            <path d="M171,336H70c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.523,0,10-4.477,10-10S176.523,336,171,336z" />
                                            <path d="M322,336H221c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.522,0,10-4.477,10-10S327.522,336,322,336z" />
                                            <path d="M322,86H70c-5.523,0-10,4.477-10,10s4.477,10,10,10h252c5.522,0,10-4.477,10-10S327.522,86,322,86z" />
                                            <path d="M322,136H221c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.522,0,10-4.477,10-10S327.522,136,322,136z" />
                                            <path d="M322,186H221c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.522,0,10-4.477,10-10S327.522,186,322,186z" />
                                            <path d="M322,236H221c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.522,0,10-4.477,10-10S327.522,236,322,236z" />
                                            <path d="M322,286H221c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.522,0,10-4.477,10-10S327.522,286,322,286z" />
                                            <path d="M171,286H70c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.523,0,10-4.477,10-10S176.523,286,171,286z" />
                                            <path d="M171,136H70c-5.523,0-10,4.477-10,10v101c0,5.523,4.477,10,10,10h101c5.523,0,10-4.477,10-10V146
            C181,140.477,176.523,136,171,136z M161,237H80v-81h81V237z" />
                                            <path d="M422,76h-30V46c0-11.028-8.972-20-20-20H20C8.972,26,0,34.972,0,46v320c0,27.57,22.43,50,50,50h342c27.57,0,50-22.43,50-50
            V96C442,84.972,433.028,76,422,76z M422,366c0,16.542-13.458,30-30,30H50c-16.542,0-30-13.458-30-30V46h352v305
            c0,13.785,11.215,25,25,25c5.522,0,10-4.477,10-10s-4.478-10-10-10c-2.757,0-5-2.243-5-5V96h30V366z" />
                                        </g>
                                    </svg>
                                {% endif %}
                            </div>

                            <div class="header animate_start" data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 300}'>
                                <h3>{{ sustainabilityTopSectionLang.title|default }}</h3>
                            </div>
                            {% set sustainabilityLinks = getPageSections({'alias': 'Sürdürülebilirlikler', 'pageId': sustainabilityPage.id, 'multipleData': true}) %}

                            <div class="filter">
                                {% for sustainabilityLink in sustainabilityLinks %}
                                    {% set sustainabilitySustainabilitysSectionLang = getPageSectionLangLocale({'section': sustainabilityLink, 'locale': app.request.locale}) %}

                                <span class=" animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 1000, "easing": "easeInOutQuad"}' onclick="window.scrollTo({ top: document.getElementById('{{ sustainabilitySustainabilitysSectionLang.shortTitle|default }}').getBoundingClientRect().top + window.scrollY - 75, behavior: 'smooth' });">
                                    {{ sustainabilitySustainabilitysSectionLang.shortTitle|default }}
                                </span>

                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="sustainability_header_desc">
                        <div class="desc animate_start" data-params='{"opacity": [0, 1], "translateX": [-100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                            {{ sustainabilityTopSectionLang.text|default|raw }}
                        </div>
                        <div class="button animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                        </div>
                    </div>
                    {% set sustainabilitySloganSection = getPageSections({'alias': 'Slogan Kısmı', 'pageId': sustainabilityPage.id}) %}
                    {% set sustainabilitySloganSectionLang = getPageSectionLangLocale({'section': sustainabilitySloganSection, 'locale': app.request.locale}) %}
                    {% set sustainabilitySloganSectionImage = getPageSectionImages({'section': sustainabilitySloganSection}) %}
                    <div class="sustainability_full_img animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 500, "easing": "easeInOutQuad"}'>

                        {% set dir = getParameters("page_sustainability_slogan_dir") %}
                        {% set imageDir = sustainabilitySloganSectionImage is defined and sustainabilitySloganSectionImage.name is defined ? (dir ~ sustainabilitySloganSectionImage.name) : 'assets/img/sustainability/plant.jpeg' %}

                        <img src="{{ asset(imageDir) }}" alt="{{ sustainabilitySloganSectionLang.alt[0]|default }}">
                        <p>{{ sustainabilitySloganSectionLang.text|default|raw }}</p>
                        <h3 class="animate_start" data-params='{"opacity": [0, 1], "translateX": [300, 0], "duration": 2000, "easing": "easeInOutQuad"}'>
                            {{ sustainabilitySloganSectionLang.shortTitle|default|raw }}
                        </h3>
                    </div>
                    {% set sustainabilitySustainabilitysSection = getPageSections({'alias': 'Sürdürülebilirlikler', 'pageId': sustainabilityPage.id, 'multipleData': true}) %}

                    {% for sustainability in sustainabilitySustainabilitysSection %}
                        {% set sustainabilitySustainabilitysSectionLang = getPageSectionLangLocale({'section': sustainability, 'locale': app.request.locale}) %}
                        {% set sustainabilitySustainabilitysSectionImage = getPageSectionImages({'section': sustainability}) %}
                        {% set isEven = loop.index0 is even %}

                        <div class="sustainability_section" id="{{ sustainabilitySustainabilitysSectionLang.shortTitle|default }}">
                        <div class="sustainability_section_header">
                            <div class="icon animate_start" data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                <div class="border">
                                    <img src="{{ asset('assets/img/sustainability/L-1.png') }}" alt="hand-plant">
                                </div>
                            </div>
                            <div class="header animate_start" data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 300}'>
                                <h2>{{ sustainabilitySustainabilitysSectionLang.shortTitle|default }}</h2>
                            </div>
                        </div>
                        <div class="sustainability_section_body">
                            {% if isEven %}
                                <div class="desc animate_start" data-params='{"opacity": [0, 1], "translateX": [-100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                    {{ sustainabilitySustainabilitysSectionLang.text|default|raw }}
                                </div>
                                <div class="img_container_sustainability animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                    {% set dir = getParameters("page_sustainability_sustainabilitys_dir") %}
                                    {% set imageDir = sustainabilitySustainabilitysSectionImage is defined and sustainabilitySustainabilitysSectionImage.name is defined ? (dir ~ sustainabilitySustainabilitysSectionImage.name) : 'assets/img/sustainability/zero.png' %}

                                    <img src="{{ asset(imageDir) }}" alt="{{ sustainabilitySustainabilitysSectionLang.alt[0]|default }}" class="animate_start" data-params='{"opacity": [0, 1], "duration": 1000, "easing": "easeInOutQuad", "delay": 300}'>
                                </div>
                            {% else %}
                                <div class="sustainability_body_desc">

                                    <div class="sustainability_body_desc_img_container animate_start" data-params='{"opacity": [0, 1], "translateX": [-100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                        {% set dir = getParameters("page_sustainability_sustainabilitys_dir") %}
                                        {% set imageDir = sustainabilitySustainabilitysSectionImage is defined and sustainabilitySustainabilitysSectionImage.name is defined ? (dir ~ sustainabilitySustainabilitysSectionImage.name) : 'assets/img/sustainability/zero.png' %}

                                        <img src="{{ asset(imageDir) }}" alt="{{ sustainabilitySustainabilitysSectionLang.alt[0]|default }}" class="animate_start" data-params='{"opacity": [0, 1], "duration": 1000, "easing": "easeInOutQuad", "delay": 300}'>
                                    </div>
                                    <div class="sustainability_body_desc_container animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                        {{ sustainabilitySustainabilitysSectionLang.text|default|raw }}
                                    </div>
                                </div>
                            {% endif %}

                        </div>
                    </div>
                    {% endfor %}
                </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 %}