{% extends 'main_base.html.twig' %}
{% block title %}{{ entity.title }}{% endblock %}
{% block description %}{{ entity.description }}{% endblock %}

{% block pageStyle %}

<style>
    #loader-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #40e0d0 !important;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: top 1s ease-out;
        column-gap: 1%;
    }

    #loader {
        width: 100px;
        height: 100px;
    }

    #loader-container img:first-child {
        width: 3%;
        height: auto;
    }

    #loader-container img {
        width: 15%;
        height: auto;
    }

    @media (max-width: 992px) {
        #loader-container img:first-child {
            width: 8%;
            height: auto;
        }

        #loader-container img {
            width: 40%;
            height: auto;
        }
    }

    #loader-container.hidden {
        transition: 0.6s ease-in;
        opacity: 0;
        visibility: hidden;
    }

</style>
<link rel="stylesheet"  href="{{ asset('assets/main/css/font.min.css') }}"/>
<link rel="stylesheet"  href="{{ asset('assets/main/css/style.min.css') }}"/>
    <link rel="stylesheet"  href="{{ asset('assets/main/css/responsive.min.css') }}"/>
    <link rel="stylesheet"  href="{{ asset('assets/main/css/form.css') }}"/>
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css"/>

<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
{% endblock %}
{% block content %}
    <div id="loader-container">
        <img loading="lazy" src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Loading...">
        <img loading="lazy" src="{{ asset('assets/main/img/dentmaxLogotxt.svg') }}" alt="Loading...">
    </div>
    {% block banner %}
        <header>
            <div class="header-img">
                {% if entity.sayfa.banner %}
                    <img loading="lazy" src="{{ asset('uploads/sayfa/banner/'~entity.sayfa.banner) }}" alt="Dentmax Basından">
                {% else %}
                    <img loading="lazy" src="{{ asset('assets/main/img/dentmax-ekip.jpg') }}" alt="Dentmax Basından">
                {% endif %}
            </div>
            <div class="header-content">
                <h1 data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">{{ entity.baslik }}</h1>
                {#<p data-aos="fade-in" data-aos-duration="800" data-aos-delay="500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>#}
            </div>
            <div class="header-invisalign">
                {% if entity.sayfa.bannerLogo %}
                    <img loading="lazy" src="{{ asset('uploads/sayfa/banner-logo/'~entity.sayfa.bannerLogo) }}" alt="Dentmax invisailgn"
                         data-aos="fade-in" data-aos-duration="800" data-aos-delay="600">
                {% endif %}
            </div>
            <div class="header-document-path">
                <strong class="path-title">DENTMAX</strong>
                <div class="content-router-links-path">
                    <a href="">Anasayfa /</a>
                    <a href="">{{ entity.baslik }}</a>
                </div>
            </div>
        </header>
    {% endblock %}

    {% block container %}
        <div class="wrapper">
            {% block navbar %}
                {{ render(controller('App\\Controller\\Main\\DefaultController::header', {request: app.request})) }}
            {% endblock %}
            <div class="content">
                <div class="global-content ">
                    <div class="content-router">
                        <div class="content-router-links">
                            <ul>
                                {% for sayfa in sayfalar %}
                                    <li>
                                        <a href="{{ path('app_main_sayfa', {'link': sayfa.link}) }}">{{ sayfa.baslik }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="content-router-contact-wrapper">
                            <div class="content-router-contact" id="content-router-contact">
                                {{ include('main/default/contact-wrapper.html.twig') }}
                            </div>
                        </div>
                    </div>
                    <div class="content-wrapper">
                        <div class="institutional-content">
                            <div class="institutional-content-text">{{ entity.metin|raw }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
{% endblock %}

{% block pageScript %}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js"></script>
    <script src="{{ asset('assets/main/js/validation.js') }}"></script>

    <script>
        AOS.init({once: true})

        const staffSlider = $('#staffSlider').owlCarousel({
            dots: true,
            loop: true,
            margin: 30,
            autoplay: true,
            autoplayTimeout: 3500,
            autoplaySpeed: 1000,
            responsive: {
                0: {
                    items: 1.4,
                },
                400: {
                    items: 1.6,
                },
                601: {
                    items: 2.3,
                },
                768: {
                    items: 2.5,
                },
                821: {
                    items: 3.5,
                },
                1025: {
                    items: 4.5,
                },
                1180: {
                    items: 4.9,
                },
                1360: {
                    items: 6,
                },
            }
        });

        VanillaTilt.init(document.querySelectorAll(".staff-item-box-image img"), {
            max: 15,
            speed: 1800,
            axis: 'x',
            scale: 1.02
        });
    </script>
{% endblock %}