{% extends 'base.html.twig' %}
{% block metaTitle %}{{ meta.title }}{% endblock %}
{% block stylesheets %}
    <style>
        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="root_container">
        <div class="root_header support_header_root">
            <div class="support_header_write">

                {% set supportPage = getPages({'alias': 'Destek'}) %}
                {% set supportSection = getPageSections({'alias': 'İntro Kısmı', 'pageId': supportPage.id}) %}
                {% set supportIntroLang = getPageSectionLangLocale({'section': supportSection, 'locale': app.request.locale}) %}


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


        <div class="root_body">
            <div class="root_body_pad">
                <div class="support_header">
                    <div class="icon">
                        <img src="{{ asset('assets/img/support/L-3.png') }}" alt="">
                    </div>
                    <div class="header">
                        <h3>{{ "pages.support.support-title"|trans }}</h3>
                    </div>
                </div>
                <div class="support_body">

                    {% set supportsPage = getPages({'alias': 'Destek'}) %}
                    {% set supportsSection = getPageSections({'alias': 'Destekler', 'pageId': supportsPage.id,'multipleData':true}) %}

                    {% for supports in supportsSection %}
                        {% set supportsIntroLang = getPageSectionLangLocale({'section': supports, 'locale': app.request.locale}) %}
                        {% set supportsImage = getPageSectionImages({'section': supports}) %}
                        <div class="support_desc">
                            <div class="desc animate_start"
                                 data-params='{"opacity": [0, 1], "translateX": [-100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                <h5>{{ supportsIntroLang.shortTitle|default }}</h5>
                                <h4>{{ supportsIntroLang.title|default }}</h4>
                                <p>{{ supportsIntroLang.text|raw }}</p>
                            </div>
                            <div class="img animate_start"
                                 data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                {% set dir = getParameters("page_supoort_supports_dir") %}
                                {% set imageDir = supportsImage is defined and supportsImage.name is defined ? (dir ~ supportsImage.name) : 'assets/img/support/LL-3.png' %}

                                <img src="{{ asset(imageDir) }}" alt="{{ supportsIntroLang.alt[0]|default }}">
                            </div>
                        </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 %}