{% extends 'main_base.html.twig' %}
{% block title %}Online Katalog{% endblock %}
{% block description %}Online Katalog{% endblock %}
{% block head_js %}
    <link rel="stylesheet" href={{ asset('assets/universal/css/basic.css') }}>
    <link rel="stylesheet" href="{{ asset('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css') }}">
{% endblock %}


{% block content %}

    <style>
        * {
            font-family: "DIN Next W1G", sans-serif !important;
        }

        .navbar__section {
            display: none;
        }

        .footer__copyright__section {
            display: none;
        }

        .position-relative {
            padding: 3% 0;
        }

        .flex-box {
            background: #404041 !important;

            position: relative;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

        }

        .footer {
            z-index: 999999 !important;
            height: 50%;
            background: #00000099;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .custom-col {
            width: 100%;
        }

        .custom-col.mid {
            align-items: center;
            display: flex;
            justify-content: center;
            justify-content: space-between;

        }

        .custom-col.mid a {
            display: flex;
            justify-content: space-around;
            column-gap: 5px;
            align-items: center;
            color: white;
            text-decoration: none !important;
        }

        .custom-col.mid a img {

            width: 20px;
            filter: invert(1);
        }


        .nav {
            height: 50%;
        }

        .swiper {
            display: none;
        }

        .swiper-slide img {
            width: 100%;
            height: auto;
        }

        .fb5-nav-arrow {
            z-index: 15;
            filter: invert(0);
            width: 34px;
            height: 34px;
            cursor: pointer;
        }

        .left-right {
            display: flex;
            column-gap: 35px;
        }

        .fb5-nav-arrow img {
            width: 100%;
            height: auto;
        }

        .fb5-nav-arrow.next {
            background-position: 0 0;
        }

        .fb5-nav-arrow.next:hover {
            background-position: 0 -186px;
        }

        .fb5-nav-arrow.prev {
        }

        .fb5-nav-arrow.prev:hover {
            background-position: 0 -558px;
        }

        .fb5-nav-arrow.next {
            transform-origin: 0 center;
            -ms-transform-origin: 0 center;
            -webkit-transform-origin: 0 center;
        }

        .fb5-nav-arrow.prev {
            transform-origin: right center;
            -ms-transform-origin: right center;
            -webkit-transform-origin: right center;
        }


        @media screen and (max-width: 1120px) {
            .flipbook-viewport {
                transform: scale(0.8);
            }

        }

        @media screen and (max-width: 890px) {
            .flipbook-viewport {
                transform: scale(0.6);
            }

            .custom-col.mid {
                justify-content: space-around;
            }

            .custom-col.not-mid {
                display: none;
            }

        }

        @media screen and (max-width: 665px) {
            .flipbook-viewport {
                display: none;
            }

            .swiper {
                display: inherit;
            }

            .nav {
                height: 10%;
            }

            .footer {
                height: 10%;
            }

            .swiper {
                width: 90%;
                height: auto;
            }
        }



        .next-buttonr,
        .prev-buttonr {
            display: none;
        }


    </style>

    <div id="mainpage">
        {% include 'main/default/loader.html.twig' %}
        {% include 'main/default/cookie.html.twig' %}
        <div class="flex-box">
            <div class="nav"></div>
            <div class="position-relative py-10">

                <div class="flipbook-viewport">
                    <div class="container">
                        <div class="flipbook">
                            {% for pdf in entity %}
                                <div style="background-image:url('{{ asset('uploads/katalog/' ~ pdf.resim) }}')"></div>

                            {% endfor %}

                        </div>
                    </div>
                </div>

                <div class="swiper">
                    <div class="swiper-wrapper">
                        {% for pdf in entity %}
                            <div class="swiper-slide">
                                <img src="{{ asset('uploads/katalog/' ~ pdf.resim) }}" alt="">


                            </div>
                        {% endfor %}
                    </div>
                    <div class="next-buttonr"></div>
                    <div class="prev-buttonr"></div>
                </div>
            </div>

            <div class="footer">
                <div class="custom-col not-mid"></div>
                <div class="custom-col mid">

                    <div class="left-right">
                        <div ignore="1" class="next-button  fb5-nav-arrow next"><img
                                    src="{{ asset('assets/main/images/main-page/left-arrow.svg') }}" alt="İleri"></div>
                        <div ignore="1" class="previous-button fb5-nav-arrow prev"><img
                                    src="{{ asset('assets/main/images/main-page/right-arrow.svg') }}" alt="Geri">
                        </div>
                    </div>


                    <a href="{{ path('app_main_default') }}">Siteye geri dön <img
                                src="{{ asset('assets/universal/images/load.png') }}"></a>


                </div>
                <div class="custom-col not-mid"></div>

            </div>
        </div>
    </div>



{% endblock %}
{% block body_js %}
    {% include 'main/default/scripts.html.twig' %}
    <script src="{{ asset('assets/universal/js/basic.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/extras/jgestures.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/extras/jquery-ui-1.8.20.custom.min.js') }}"
            type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/extras/jquery.mousewheel.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/extras/modernizr.2.5.3.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/lib/hash.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/lib/scissor.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/lib/scissor.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/lib/turn.html4.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/lib/turn.html4.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/lib/turn.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/universal/js/lib/turn.min.js') }}" type="text/javascript"></script>

    <script type="text/javascript">

        function loadApp() {

            // Create the flipbook

            $('.flipbook').turn({
                // Width

                width: 922,

                // Height

                height: 600,

                // Elevation

                elevation: 50,

                // Enable gradients

                gradients: true,

                // Auto center this flipbook

                autoCenter: true

            });


            $('.next-button').bind($.mouseEvents.over, function () {

                $(this).addClass('next-button-hover');

            }).bind($.mouseEvents.out,
                function () {

                    $(this).removeClass('next-button-hover');

                }).bind($.mouseEvents.down, function () {

                $(this).addClass('next-button-down');

            }).bind($.mouseEvents.up, function () {

                $(this).removeClass('next-button-down');

            }).click(function () {

                $('.flipbook').turn('next');

            });

            // Events for the next button

            $('.previous-button').bind($.mouseEvents.over, function () {

                $(this).addClass('previous-button-hover');

            }).bind($.mouseEvents.out, function () {

                $(this).removeClass('previous-button-hover');

            }).bind($.mouseEvents.down, function () {

                $(this).addClass('previous-button-down');

            }).bind($.mouseEvents.up, function () {

                $(this).removeClass('previous-button-down');

            }).click(function () {

                $('.flipbook').turn('previous');

            });

        }

        // Load the HTML4 version if there's not CSS transform

        yepnope({
            test: Modernizr.csstransforms,
            yep: ['../../../public/assets/universal/js/lib/turn.js'],
            nope: ['../../../public/assets/universal/js/lib/turn.html4.min.js'],
            both: ['../../../public/assets/universal/css/basic.css'],
            complete: loadApp
        });

    </script>
    <script>
        var swiper = new Swiper(".swiper", {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: ".next-buttonr",
                prevEl: ".prev-buttonr",
            },
        });
        document.querySelectorAll('.next-button').forEach(function (button) {
            button.addEventListener('click', function () {
                document.querySelector('.next-buttonr').click();
            });
        });

        document.querySelectorAll('.previous-button').forEach(function (button) {
            button.addEventListener('click', function () {
                document.querySelector('.prev-buttonr').click();
            });
        });
    </script>

{% endblock %}