{% extends 'main_base.html.twig' %}
{% block title %}Production{% endblock %}
{% block description %}Elefante Production page{% endblock %}



{% block content %}
    <style>
        .navbar__section-links__wrapper :not(.PRODUCTION) {
            opacity: 0.4 !important;
        }

        .navbar__section-logo__wrapper-img {
            filter: brightness(0) invert(1) !important;
        }

        .production__section-sliders-slider-description {
            margin-right: 10rem;
        }

        .navbar__section::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: -1;

        }

        .navbar__section::after {
            content: "";
            background-image: url("{{ asset('assets/main/images/navbar/navbar-bg-production.png') }}");
            background-position: center;
            background-size: cover;

            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: -2;

        }

        .video__section {
            margin-top: 0 !important;
        }

    </style>
    <div id="production">

        {% include 'main/default/loader.html.twig' %}
        {% include 'main/default/cookie.html.twig' %}
        <div class="main-container">
            <div class="production__section">
                <div class="production__section-active__page">
                    <p>
                        <a href="{{ path('app_main_default') }}">Elefante</a> /
                        <a class="active" href="">Production</a>
                    </p>
                </div>
                <div class="production__section-title">
                    {% for urunsayfasi in sayfa[3].sayfabaslikDilleri %}

                        <h1>{{ urunsayfasi.baslik|raw }}</h1>
                        <h2>{{ urunsayfasi.title|raw }}</h2>

                    {% endfor %}
                </div>
{#                 <section class="gallery__section__wgsap">#}
{#                                    <div class="gallery__section__wgsap-square"></div>#}
{#                                    <div class="gallery__section__wgsap-square2"></div>#}
{#                                </section>#}
                {% for bolum in uretimlerDil|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
                    {% set classNames = ['one', 'two', 'three', 'four'] %}
                    {% set idNames = ['weaving', 'confection', 'embroidery', 'print'] %}


                    <div class="production__section-sliders {{ bolum.code }}"
                         id="{{ idNames[loop.index0] ?? idNames|last }}">
                        <div class="production__section-sliders-slider-wrrapper" id="{{ bolum.code }}">
                            <div class="swiper photoSwiper{{ loop.index }}">
                                <div class="swiper-wrapper">
                                    {% for resim in bolum.resimler|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
                                        <div class="production__section-swiper-slide  swiper-slide">
                                            <img
                                                 src="{{ asset('uploads/uretimler/bolum/' ~ resim.resim) }}"
                                                >
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="slider__buttons">
                                <button class="swiper-button-next-arrow swiper-button-next-arrow-{{ classNames[loop.index0] ?? classNames|last }}">
                                    <img
                                            src="{{ asset('assets/main/images/main-page/right-arrow.svg') }}"
                                            alt="right-arrow"></button>
                                <button class="swiper-button-prev-arrow swiper-button-prev-arrow-{{ classNames[loop.index0] ?? classNames|last }}">
                                    <img
                                            src="{{ asset('assets/main/images/main-page/left-arrow.svg') }}"
                                            alt="left-arrow"></button>
                            </div>
                        </div>
                        <div class="production__section-sliders-slider-description">
                            <div class="our__story__section-quality__works-quality__work">
                                <div class="our__story__section-quality__works-quality__work-mini__logo">
                                    <p>N</p>
                                    <span>0:</span>
                                </div>
                                <div class="our__story__section-quality__works-quality__work-number__title">
                                    0{{ loop.index }}
                                </div>
                                <div class="our__story__section-quality__works-quality__work-title">
                                    {% for entity in bolum.diller %}
                                        {{ entity.baslik|raw }}
                                    {% endfor %}
                                </div>


                                <div class="our__story__section-quality__works-quality__work-description">
                                    {% for entity in bolum.diller %}
                                        {{ entity.metin|raw }}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                    </div>
                {% endfor %}



            </div>
        </div>
        <div class="video__main__sectionr">
            <div class="video__main__section">
                <section class="video__section video__section-items__wrapper">
                    <div class="video__section-items__wrapper">

                        {{ ayarlar.video|raw }}
                        <button class="video__section-items__wrapper-button gizle">
                        </button>
                    </div>

                </section>

            </div>
        </div>
    </div>
    {% include 'main/default/new-catalogue.html.twig' %}
{% endblock %}
{% block body_js %}
    {% include 'main/default/scripts.html.twig' %}


    <script>
        var swiper = new Swiper(".photoSwiper1", {
            effect: "fade",
            navigation: {
                nextEl: ".swiper-button-next-arrow-one",
                prevEl: ".swiper-button-prev-arrow-one",
            },
            loop: true,
        });
        var swiper = new Swiper(".photoSwiper2", {
            effect: "fade",
            navigation: {
                nextEl: ".swiper-button-next-arrow-two",
                prevEl: ".swiper-button-prev-arrow-two",
            },
            loop: true,
        });
        var swiper = new Swiper(".photoSwiper3", {
            effect: "fade",
            navigation: {
                nextEl: ".swiper-button-next-arrow-three",
                prevEl: ".swiper-button-prev-arrow-three",
            },
            loop: true,
        });
        var swiper = new Swiper(".photoSwiper4", {
            effect: "fade",
            navigation: {
                nextEl: ".swiper-button-next-arrow-four",
                prevEl: ".swiper-button-prev-arrow-four",
            },
            loop: true,
        });
    </script>
{% endblock %}