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

{% block pageStyle %}

    <style>



    </style>
    <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">
    <link rel="stylesheet"  href="{{ asset('assets/main/css/form.css') }}"/>
{% 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">{{ 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">
                <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">
                <strong class="path-title">{{ 'kurumsal'|trans|upper }}</strong>
                <div class="content-router-links-path">
                    <a href="{{ path('app_main_default') }}">Anasayfa /</a>
                    <a href="javascript:void(0)">{{ 'kurumsal'|trans }} /</a>
                    <a href="javascript:void(0)">{{ 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 kurumsalSayfalar %}
                                    <li>
                                        <a href="{{ path('app_main_kurumsal', {'link': sayfa.diller|first.link}) }}">{{ sayfa.diller|first.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="content-wrapper-links-path">
                            <a href="{{ path('app_main_default') }}">Anasayfa /</a>
                            <a href="javascript:void(0)">{{ 'kurumsal'|trans }} /</a>
                            <a href="javascript:void(0)">{{ entity.baslik }}</a>
                        </div>
                        <div class="institutional-content">
                            <div class="institutional-content-text">{{ entity.ustMetin|raw }}</div>
                            <div class="institutional-content-items">
                                {% for istatistik in istatistikler %}
                                    <div class="institutional-content-item aos-init aos-animate"
                                         data-aos="fade-right" data-aos-duration="800" data-aos-delay="400">
                                        <h2>{{ istatistik.diller|first.sayi }}</h2>
                                        <p>{{ istatistik.diller|first.baslik }}</p>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="institutional-content-text">{{ entity.altMetin|raw }}</div>
                        </div>
                    </div>
                </div>
                {% if entity.sayfa.bolumGoster %}
                    <div class="about-us-frames">
                        <div class="about-us-frames-image">
                            <div class="about-us-frames-img">
                                {% if entity.sayfa.bolumResim %}
                                    <img loading="lazy" src="{{ asset('uploads/kurumsal/bolum-resim/'~entity.sayfa.bolumResim) }}"
                                         alt="Dentmax Diş Temizliği">
                                {% else %}
                                    <img loading="lazy" src="{{ asset('assets/main/img/dentmax-dis-temizligi.webp') }}"
                                         alt="Dentmax Diş Temizliği">
                                {% endif %}
                            </div>
                        </div>
                        <div class="about-us-frames-content">
                            <div class="about-us-frames-content-text">
                                <div class="blue-line-text-header aos-init aos-animate" data-aos="fade-left"
                                     data-aos-duration="500" data-aos-delay="300">
                                    {# <h3>{{ bolumDil.baslik }}</h3><span class="blue-line-text"></span><br> #}
                                    <h3>DENTMAX</h3><span class="blue-line-text"></span><br>
                                    <h3>{{ entity.bolumBaslik }}</h3>
                                </div>
                                <p data-aos="fade-left" data-aos-duration="500" data-aos-delay="400"
                                   class="aos-init aos-animate">
                                    {{ entity.bolumMetin|raw }}
                                </p>
                                <div class="about-us-frames-content-text-social aos-init aos-animate"
                                     data-aos="fade-up" data-aos-duration="500" data-aos-delay="500">
                                    <a href="https://www.youtube.com/@DentMaks" target="_blank">
                                        <i class="bx bxl-youtube"></i>
                                    </a>
                                    <a href="https://www.facebook.com/profile.php?id=100086829829731&amp;mibextid=ZbWKwL"
                                       target="_blank">
                                        <i class="bx bxl-facebook"></i>
                                    </a>
                                    <a href="#">
                                        <i class="bx bxl-twitter"></i>
                                    </a>
                                    <a href="https://www.instagram.com/dentmax/" target="_blank">
                                        <i class="bx bxl-instagram"></i>
                                    </a>
                                    <a href="#"><i class="bx bxl-linkedin"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                <!-- DENTMAX DİŞ HEKİMLERİMİZ -->
                <div class="section-header container-s" id="section-main">
                    <div class="section-header-text" data-aos="fade-right" data-aos-duration="1000">
                        <div class="hekimlerimiz-texts">
                            <h3 class="section-header-title hekimlerimiz">
                                {{ 'dis_hekimlerimiz'|trans({'%split%': '<br>'})|upper|raw }}
                                <span class="section-header-text-line section-header-text-line-long"></span>
                            </h3>
                        </div>
                    </div>
                    <div class="section-header-right our-history-section-header-right">
                        <a href="">
                            <div class="section-header-right-border"></div>
                            <i class="border-i bx bx-right-arrow-alt"></i>
                            <span>{{ 'tum_dis_doktorlarimiz'|trans|upper }}</span>
                        </a>
                    </div>
                </div>
                <div class="staffSlider-wrapper container-s">
                    <div id="staffSlider" class="owl-carousel">
                        {% for uye in ekip %}
                            <div class="staff-item">
                                <a href="{{ path('app_main_kadro_detay', {'link': uye.link}) }}">
                                    <div class="staff-item-box">
                                        <div class="staff-box-text">
                                            <h3><img loading="lazy" src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Dentmax">DENTMAX
                                            </h3>
                                        </div>
                                        <div class="staff-item-box-image">
                                            {% if uye.resim %}
                                                <img loading="lazy" src="{{ asset('uploads/ekip/'~uye.resim) }}" alt="">
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="staff-item-text">
                                        <h3>{{ uye.ad~' '~uye.soyad|upper }}</h3>
                                        <p>{{ uye.unvan.diller|first.baslik }}</p>
                                    </div>
                                </a>
                                <div class="staff-item-box-social">
                                    {% set profil = uye.user.profile|default %}
                                    {% for social in uye.user.profile.sosyalMedyalar|default %}

                                        {% if social.tip == 'instagram' %}
                                            <span><a href={{ social.link }}>

                                                <img loading="lazy" src="{{ asset('assets/main/img/insta.svg') }}"
                                                     alt="Dentmax">
                                            </a></span>
                                        {% elseif social.tip == 'facebook' %}
                                            <span>
                                            <a href={{ social.link }}>
                                                <img loading="lazy" src="{{ asset('assets/main/img/face.svg') }}"
                                                     alt="Dentmax" >
                                            </a></span>
                                        {% elseif social.tip == 'linkedin' %}
                                            <a href={{ social.link }}>
                                                <img loading="lazy" src="{{ asset('assets/main/img/linkedin.png') }}"
                                                     alt="Dentmax" >
                                            </a></span>
                                        {% endif %}
                                    {% endfor %}

                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="about-us-more-button" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
                        <a href="{{ path('app_main_kadromuz') }}">
                            <button class="turquoise-button">{{ 'tum_kadroyu_gor'|trans|upper }}</button>
                        </a>
                    </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') }}" type="text/javascript"></script>

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

        let $globalContent = $(".tedavi-blog-global-content-text");
        $globalContent.find("img").each(function () {
            let limit = Math.floor($globalContent.width());
            if ($(this).width() > limit) {
                let divide = $(this).height() / $(this).width();
                let ratio = Math.round(divide * limit);
                $(this).attr("width", limit);
                $(this).attr("height", ratio);
            }
        });

        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 %}