{% extends 'main_base.html.twig' %}
{% block title %}{{ sayfa ? sayfa.diller|first.title|default }}{% endblock %}
{% block description %}{{ sayfa ? sayfa.diller|first.description|default }}{% 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>
    <header>
        <div class="header-img">
            {% if sayfa is not null and sayfa.banner is not null %}
                <img loading="lazy" src="{{ asset('uploads/blog/sayfa/banner/'~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">Blog</h1>
        </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">BLOG</strong>
            <div class="content-router-links-path">
                <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }}</a>
                <span>/</span>
                <a href="javascript:void(0)" class="activetree">Blog</a>
            </div>
        </div>
    </header>

    {% 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-wrapper content-wrapper-document">
                        {#                        <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> #}

                        <!--  İLK BLOG  -->
                        <div class="blog-swiper-wrapper">
                            <div class="owl-nav">
                                <button type="button" role="presentation" class="blog-swiper-prev">
                                    <span><i class="bx bx-arrow-back"></i></span>
                                </button>
                                <button type="button" role="presentation" class="blog-swiper-next">
                                    <span><i class="bx bx-arrow-back"></i></span>
                                </button>
                            </div>
                            <div id="blog-swiper" class="owl-carousel">
                                {% for kategori in blogKategoriler %}
                                    <div>
                                        <a href="{{ path('app_main_blog_kategori', {'link':kategori.link}) }}"
                                           class="blog-slide-box">
                                            {% if kategori.thumbnail %}
                                                <div class="blog-slide-box-image">
                                                    <img loading="lazy" src="{{ asset('uploads/blog/kategori/thumbnail/' ~ kategori.thumbnail) }}"
                                                         alt="Dentmax">
                                                </div>
                                            {% else %}
                                                <div class="blog-slide-box-image">
                                                    <img loading="lazy" src="{{ asset('assets/main/img/icons/dentmax_blog_intr.jpeg') }}"
                                                         alt="Dentmax Blog">
                                                </div>
                                            {% endif %}
                                            <div class="blox-slide-text">
                                                <h2 class="blox-slide-title">{{ kategori.baslik }}</h2>
                                                {# <p class="blox-slide-desc">{{ kategori.menuBaslik }}</p> #}
                                            </div>
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>

                        <!--  ÖNE ÇIKANLAR  -->
                        <div class="section-header highlights-header highlights-header-main">
                            <div class="section-header-text">
                                <h3 class="section-header-title">{{ 'one_cikanlar'|trans|upper }}</h3>
                            </div>
                        </div>
                        <div class="highlights">
                            <div class="highlights-line highlights-left">
                                {% for blog in oneCikanlar|slice(0,3) %}
                                    <a href="{{ path('app_main_blog_detay', {'link': blog.link}) }}"
                                       class="highlights-box {% if loop.first %}highlights-box-n{% endif %}"
                                       data-aos="zoom-in" data-aos-duration="1000"
                                       data-aos-delay="300">
                                        <div class="highlights-box-image">
                                            {% if blog.thumbnail is not null %}
                                                <img loading="lazy" src="{{ asset('uploads/blog/thumbnail/'~blog.thumbnail) }}"
                                                     alt="Dentmax Öne Çıkan Blog">
                                            {% else %}
                                                <img loading="lazy" src="{{ asset('assets/main/img/icons/dentmax-blog-intr-2.jpg') }}"
                                                     alt="Dentmax">
                                            {% endif %}
                                        </div>
                                        <div class="highlights-box-bg"></div>
                                        <div class="highlights-box-text {% if loop.first %}highlights-box-text-n{% endif %}">
                                            <h2>{{ blog.kategoriBaslik }}</h2>
                                            <h3>{{ blog.baslik }}</h3>
                                            {% if loop.first %}
                                                <h4>{{ blog.altBaslik }}</h4>
                                            {% endif %}
                                        </div>
                                    </a>
                                {% endfor %}
                            </div>
                            <div class="highlights-line highlights-mid">
                                {% for blog in oneCikanlar|slice(3,6) %}
                                    <a href="{{ path('app_main_blog_detay', {'link': blog.link}) }}"
                                       class="highlights-box" data-aos="zoom-in-down" data-aos-duration="800"
                                       data-aos-delay="1200">
                                        <div class="highlights-box-image">
                                            {% if blog.thumbnail is not null %}
                                                <img loading="lazy" src="{{ asset('uploads/blog/thumbnail/'~blog.thumbnail) }}"
                                                     alt="Dentmax">
                                            {% else %}
                                                <img loading="lazy" src="{{ asset('assets/main/img/icons/dentmax-blog-intr-2.jpg') }}"
                                                     alt="Dentmax">
                                            {% endif %}
                                        </div>
                                        <div class="highlights-box-bg"></div>
                                        <div class="highlights-box-text">
                                            <h2>{{ blog.kategoriBaslik|upper }}</h2>
                                            <h3>{{ blog.baslik }}</h3>
                                        </div>
                                    </a>
                                {% endfor %}
                            </div>
                        </div>

                        <!-- POPÜLER VİDEOLAR -->
                        <div class="section-header highlights-header">
                            <div class="section-header-text">
                                <h3 class="section-header-title">{{ 'populer_videolar'|trans|upper }}</h3>
                            </div>
                        </div>
                        <div class="popular-videos">
                            <div id="popularVideosSwiper" class="owl-carousel">
                                {% for videolar in video %}
                                    {% set kategoriDil = videolar.kategori.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}


                                    <a href="{{ videolar.video }}">
                                        <div class="popular-videos-box">
                                            <div class="popular-videos-box-image">

                                                <img loading="lazy" src="{{ asset('assets/main/img/dentmax-dogru-dis-fircalama.webp') }}"
                                                     alt="Dentmax">
                                                <div class="popular-videos-box-bg"></div>
                                            </div>
                                            <div class="popular-videos-box-content">
                                                <div class="popular-videos-box-header">

                                                    <h2>{{ 'genel_kategoriler'|trans|upper }}</h2>
                                                    <i class="bx bxl-youtube"></i>
                                                </div>
                                                <div class="popular-videos-box-text">
                                                    <h3>{{ kategoriDil.baslik|default }}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                {% endfor %}

                            </div>
                        </div>

                        <!--  POPÜLER İÇERİKLER  -->
                        <div class="section-header highlights-header">
                            <div class="section-header-text">
                                <h3 class="section-header-title">{{ 'populer_icerikler'|trans|upper }}</h3>
                            </div>
                        </div>
                        <div class="popular-contents-wrapper">
                            <div class="owl-nav">
                                <button type="button" role="presentation" class="popular-contents-prev">
                                    <span><i class="bx bx-arrow-back"></i></span>
                                </button>
                                <button type="button" role="presentation" class="popular-contents-next">
                                    <span><i class="bx bx-arrow-back"></i></span>
                                </button>
                            </div>

                            <div id="popular-contents" class="owl-carousel">
                                {% for popBlog in populerBlog %}

                                    <div>
                                        <a href="{{ path('app_main_blog_detay', {'link': popBlog.link}) }}"
                                           class="popular-contents-box">
                                            <div class="popular-contents-image">
                                                {% if popBlog.thumbnail is not null %}
                                                    <img loading="lazy" src="{{ asset('uploads/blog/thumbnail/'~popBlog.thumbnail) }}"
                                                         alt="Dentmax">
                                                {% else %}
                                                    <img loading="lazy" src="{{ asset('assets/main/img/dentmax-dogru-dis-fircalama.webp') }}"
                                                         alt="Dentmax">
                                                {% endif %}
                                            </div>
                                            <div class="popular-contents-box-text">
                                                <h2>{{ 'genel_kategoriler'|trans|upper }}</h2>
                                                <p>{{ popBlog.baslik }}</p>
                                            </div>
                                        </a>
                                    </div>
                                {% endfor %}


                            </div>
                        </div>

                        <!--  ÖNE ÇIKANLAR  -->
                        {# <div class="section-header highlights-header">
                            <div class="section-header-text">
                                <h3 class="section-header-title">{{ 'one_cikanlar'|trans|upper }}</h3>
                            </div>
                        </div>
                        <div class="highlights">
                            <div class="highlights-line highlights-left">
                                {% for blog in oneCikanlar|slice(0,3) %}
                                    <a href="{{ path('app_main_blog_detay', {'link': blog.link}) }}" class="highlights-box {% if loop.first %}highlights-box-n{% endif %}" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="300">
                                        <div class="highlights-box-image">
                                            {% if blog.thumbnail is not null %}
                                                <img loading="lazy" src="{{ asset('uploads/blog/thumbnail/'~blog.thumbnail) }}" alt="Dentmax">
                                            {% else %}
                                                <img loading="lazy" src="{{ asset('assets/main/img/dentmax-dogru-dis-fircalama.webp') }}" alt="Dentmax">
                                            {% endif %}
                                        </div>
                                        <div class="highlights-box-bg"></div>
                                        <div class="highlights-box-text {% if loop.first %}highlights-box-text-n{% endif %}">
                                            <h2>{{ blog.kategoriBaslik|upper }}</h2>
                                            <h3>{{ blog.baslik }}</h3>
                                            {% if loop.first %}
                                                <h4>{{ blog.altBaslik }}</h4>
                                            {% endif %}
                                        </div>
                                    </a>
                                {% endfor %}
                            </div>
                            <div class="highlights-line highlights-mid">
                                {% for blog in oneCikanlar|slice(3,6) %}
                                    <a href="{{ path('app_main_blog_detay', {'link': blog.link}) }}" class="highlights-box" data-aos="zoom-in-down" data-aos-duration="800" data-aos-delay="1200">
                                        <div class="highlights-box-image">
                                            {% if blog.thumbnail is not null %}
                                                <img loading="lazy" src="{{ asset('uploads/blog/thumbnail/'~blog.thumbnail) }}" alt="Dentmax">
                                            {% else %}
                                                <img loading="lazy" src="{{ asset('assets/main/img/dentmax-dogru-dis-fircalama.webp') }}" alt="Dentmax">
                                            {% endif %}
                                        </div>
                                        <div class="highlights-box-bg"></div>
                                        <div class="highlights-box-text">
                                            <h2>{{ blog.kategoriBaslik|upper }}</h2>
                                            <h3>{{ blog.baslik }}</h3>
                                        </div>
                                    </a>
                                {% endfor %}
                            </div>
                        </div> #}

                        <div class="popular-videos-btn" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
                            <a href="{{ path('app_main_blog_kategori') }}">
                                <button class="turquoise-button">{{ 'tumunu_goster'|trans|upper }}</button>
                            </a>
                        </div>

                        <!-- EN SON EKLENENLER -->
                        <div class="section-header highlights-header">
                            <div class="section-header-text">
                                <h3 class="section-header-title">{{ 'en_son_eklenenler'|trans|upper }}</h3>
                            </div>
                        </div>
                        <div class="popular-videos recently-added">
                            <div id="RecentlyAddedSwiper" class="owl-carousel">
                                {% for blog in bloglar|slice(0,6) %}
                                    <a href="{{ path('app_main_blog_detay', {'link':blog.link}) }}">
                                        <div class="popular-videos-box">
                                            {% if blog.blog.thumbnail %}
                                                <div class="popular-videos-box-image">
                                                    <img loading="lazy" src="{{ asset('uploads/blog/thumbnail/'~blog.blog.thumbnail) }}"
                                                         alt="Dentmax">
                                                    <div class="popular-videos-box-bg"></div>
                                                </div>
                                            {% else %}
                                                <div class="popular-videos-box-image">
                                                    <img loading="lazy" src="{{ asset('assets/main/img/icons/dentmax-blog-intr-2.jpg') }}"
                                                         alt="Dentmax">
                                                    <div class="popular-videos-box-bg"></div>
                                                </div>
                                            {% endif %}
                                            <div class="popular-videos-box-content">
                                                <div class="popular-videos-box-header">
                                                    <h2>{{ blog.blog.kategori ? blog.blog.kategori.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first.baslik|default : "Genel Kategori" }}</h2>
                                                </div>
                                                <div class="popular-videos-box-text">
                                                    <h3>{{ blog.baslik|default }}</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                {% endfor %}
                            </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>
        AOS.init({once: true});

        const blogSwiper = $('#blog-swiper').owlCarousel({
            dots: true,
            loop: true,
            margin: 30,
            // autoplay: true,
            autoplayTimeout: 5000,
            autoplaySpeed: 800,
            responsive: {
                0: {
                    items: 1.2
                },
                601: {
                    items: 1.8
                },
                768: {
                    items: 2.2
                },
                820: {
                    items: 2.4
                },
                1280: {
                    items: 4.4
                }
            }
        });

        $('.blog-swiper-next').click(function () {
            blogSwiper.trigger('next.owl.carousel');
        });

        $('.blog-swiper-prev').click(function () {
            blogSwiper.trigger('prev.owl.carousel');
        });

        const popularVideosSwiper = $('#popularVideosSwiper').owlCarousel({
            dots: true,
            loop: true,
            margin: 30,
            autoplayTimeout: 5000,
            autoplaySpeed: 1500,
            responsive: {
                0: {
                    items: 1.2
                },
                768: {
                    items: 1.2
                },
                820: {
                    items: 2.4
                },
                1280: {
                    items: 4.4
                }
            }
        });

        $('.owl-next').click(function () {
            popularVideosSwiper.trigger('next.owl.carousel');
        });

        $('.owl-prev').click(function () {
            popularVideosSwiper.trigger('prev.owl.carousel');
        });

        const popularContents = $('#popular-contents').owlCarousel({
            dots: true,
            loop: true,
            margin: 30,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplaySpeed: 800,
            responsive: {
                0: {
                    items: 1.2
                },
                601: {
                    items: 1.8
                },
                768: {
                    items: 2.2
                },
                820: {
                    items: 2.4
                },
                1280: {
                    items: 4.4
                }
            }
        });

        $('.popular-contents-next').click(function () {
            popularContents.trigger('next.owl.carousel');
        });

        $('.popular-contents-prev').click(function () {
            popularContents.trigger('prev.owl.carousel');
        });

        const RecentlyAddedSwiper = $('#RecentlyAddedSwiper').owlCarousel({
            dots: true,
            loop: true,
            margin: 30,
            autoplayTimeout: 5000,
            autoplaySpeed: 1500,
            responsive: {
                0: {
                    items: 1.2
                },
                768: {
                    items: 1.2
                },
                820: {
                    items: 2.4
                },
                1280: {
                    items: 4.4
                }
            }
        });

        $('.owl-next').click(function () {
            RecentlyAddedSwiper.trigger('next.owl.carousel');
        });

        $('.owl-prev').click(function () {
            RecentlyAddedSwiper.trigger('prev.owl.carousel');
        });
    </script>
{% endblock %}