{% 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="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">
                <img loading="lazy" src="{{ asset('assets/main/img/dentmax-basindan.webp') }}" alt="Dentmax Basından">
            </div>
            <div class="header-content">
                <h1 data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">Tedaviler</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">
                <img loading="lazy" src="{{ asset('assets/main/img/icons/dentMax.webp') }}" alt="Dentmax invisailgn"
                     data-aos="fade-in" data-aos-duration="800"
                     data-aos-delay="600">
            </div>
            <div class="header-document-path">
                <div class="header-document-path-text">
                    <strong class="path-title">TEDAVİLER
                    </strong>
                    <div class="content-router-links-path">
                        <a href="index">Anasayfa /</a>
                        <a href="tedaviler">Tedaviler</a>
                    </div>
                </div>
            </div>
        </header>
        {# <header>
            <div class="header-img">
                <img loading="lazy" src="images/dentmax-saglikli-disler.jpg" alt="Dentmax Hakkımızda">
            </div>
            <div class="header-content">
                <h1 data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">Hakkımızda</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">
                <img loading="lazy" src="images/icons/dentMax.png" alt="Dentmax invisailgn" data-aos="fade-in" data-aos-duration="800"
                    data-aos-delay="600">
            </div>
            <div class="header-document-path">
                <div class="header-document-path-text">
                    <h2 class="path-title">DENTMAX KURUMSAL</h2>
                        <div class="content-router-links-path">
                            <a href="index">Anasayfa /</a>
                            <a href="">Dentmax Kurumsal /</a>
                            <a href="">Hakkımızda</a>
                        </div>

                </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>
                                <li><a href="hakkimizda">Hakkımızda</a></li>
                                <li><a href="is-birliklerimiz">İş Birliklerimiz</a></li>
                                <li><a href="basindan">Dentmax Basından</a></li>
                                <li><a href="hasta-haklari">Hasta Hakları</a></li>
                            </ul>
                        </div>
                        <div class="content-router-contact-wrapper">
                            <div class="content-router-contact" id="content-router-contact">
                                <?php require_once "contact-wrapper.php"; ?>
                            </div>
                        </div>
                    </div>
                    <div class="content-wrapper">
                        <div class="content-wrapper-links-path">
                            <a href="index">Anasayfa / </a>
                            <a href="tedaviler">Tedaviler / </a>
                            <a href="tedaviler-alt-kategori">Gülüş Tasarımı Bileşenlerimiz / </a>
                            <a href="tedaviler-alt-kategori">Beyaz Estetik / </a>
                            <a href="tedavi-detay">Diş Beyazlatma</a>
                        </div>

                        <div class="patient-rights">
                            <div class="patient-rights-text" data-aos="fade-right" data-aos-delay="300"
                                 data-aos-duration="800">
                                <h2 class="global-header">HASTA HAKLARI VE SORUMLULUKLARI</h2>
                                <p class="global-text">
                                    Sağlık hizmetleri, yaşamsal önemi nedeniyle, kişilerin hak ve sorumluluklarından
                                    ödün verilemez niteliktedir. Hastanelerimize başvuran tüm hastalarımız ve
                                    yakınlarının hastanelerimizden hizmet aldıkları süre içinde sahip oldukları tüm
                                    haklarına saygı duyuyoruz. T.C. Sağlık Bakanlığı Hasta Hakları Yönetmeliği’nden
                                    yararlanarak hazırladığımız bu kaynak; hastalarımızı sahip oldukları haklar ve
                                    hizmet alımı sırasında yerine getirmeleri gereken sorumlulukları hakkında
                                    bilgilendirme amaçlıdır.</p>
                            </div>
                            <div class="patient-rights-text" data-aos="fade-right" data-aos-delay="600"
                                 data-aos-duration="800">
                                <h2 class="global-header">HASTA HAKLARI VE SORUMLULUKLARI</h2>
                                <p class="global-text">
                                    Sağlık hizmetleri, yaşamsal önemi nedeniyle, kişilerin hak ve sorumluluklarından
                                    ödün verilemez niteliktedir. Hastanelerimize başvuran tüm hastalarımız ve
                                    yakınlarının hastanelerimizden hizmet aldıkları süre içinde sahip oldukları tüm
                                    haklarına saygı duyuyoruz. T.C. Sağlık Bakanlığı Hasta Hakları Yönetmeliği’nden
                                    yararlanarak hazırladığımız bu kaynak; hastalarımızı sahip oldukları haklar ve
                                    hizmet alımı sırasında yerine getirmeleri gereken sorumlulukları hakkında
                                    bilgilendirme amaçlıdır.</p>
                            </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>
        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 %}