<!DOCTYPE html>
<html class="scroll-smooth" lang="{{ str_replace('_', '-', app()->getLocale()) }}"
      dir="{{(in_array(app()->getLocale(), ['fa','ar'])) ? 'rtl' : 'ltr'}}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @include('core.header')
        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
        <link rel="stylesheet" href="{{theme('/assets/css/main.css')}}">
        <link rel="stylesheet" href="{{theme('/assets/packages/plyrjs/css/cdn.plyr.io_3.7.8_plyr.css')}}"/>
        <!-- Link Swiper's CSS -->
        <link rel="stylesheet" href="{{theme('/assets/packages/swiper/css/swiper-bundle.min.css')}}" />
        <script src="{{theme('/assets/packages/swiper/js/swiper-bundle.min.js')}}"></script>
        <script src="{{theme('/assets/packages/plyrjs/js/hls.min.js')}}"></script>
        <script src="{{theme('/assets/packages/plyrjs/js/plyr.polyfilled.js')}}"></script>
        <link rel="stylesheet" href="{{theme('/assets/index-cd564652.css')}}">
{{--        <script>--}}
{{--            document.addEventListener('alpine:init', () => {--}}
{{--                window.Alpine.store('mobile_menu', {--}}
{{--                    mobile_menu: false,--}}
{{--                    toggle() {--}}
{{--                        this.mobile_menu = ! this.mobile_menu;--}}
{{--                    },--}}
{{--                    close()--}}
{{--                    {--}}
{{--                        this.mobile_menu = false;--}}
{{--                    }--}}
{{--                })--}}

{{--                window.Alpine.store('popup', {--}}
{{--                    open: false,--}}
{{--                    show() {--}}
{{--                        this.open = true--}}
{{--                    },--}}
{{--                    hidden() {--}}
{{--                        setTimeout(() => {--}}
{{--                            this.open = false--}}
{{--                        }, 300);--}}
{{--                    },--}}
{{--                    hidden_fast() {--}}
{{--                        this.open = false--}}
{{--                    }--}}
{{--                })--}}

{{--                window.Alpine.store('tabs', {--}}
{{--                    active_tab: false,--}}
{{--                    select_tab(tab) {--}}
{{--                        this.active_tab = tab;--}}
{{--                        return true;--}}
{{--                    },--}}
{{--                    is_active(tab)--}}
{{--                    {--}}
{{--                        return this.active_tab === tab;--}}
{{--                    }--}}
{{--                })--}}

{{--                window.Alpine.store('sticky', {--}}
{{--                    hand_sticky(el, styles) {--}}
{{--                        styles = styles.split(/\s+/);--}}
{{--                        const newEl = document.createElement("div");--}}
{{--                        newEl.classList.add("myObserver");--}}
{{--                        insertBefore(newEl, el);--}}
{{--                        function insertBefore(el, referenceNode) {--}}
{{--                            referenceNode.parentNode.insertBefore(el, referenceNode);--}}
{{--                        }--}}

{{--                        const observer = new IntersectionObserver(--}}
{{--                            function (entries) {--}}
{{--                                if (entries[0].intersectionRatio === 0) {--}}
{{--                                    styles.forEach(style => {--}}
{{--                                        el.classList.add(style);--}}
{{--                                    });--}}
{{--                                    //newEl.classList.add("sticky-observer");--}}
{{--                                } else if (entries[0].intersectionRatio === 1) {--}}
{{--                                    // el.classList.remove(styles);--}}
{{--                                    styles.forEach(style => {--}}
{{--                                        el.classList.remove(style);--}}
{{--                                    });--}}
{{--                                    //newEl.classList.remove("sticky-observer");--}}
{{--                                }--}}
{{--                            },--}}
{{--                            {threshold: [0, 1]}--}}
{{--                        );--}}

{{--                        observer.observe(document.querySelector(".myObserver"));--}}
{{--                    }--}}
{{--                })--}}

{{--                window.Alpine.store('more_btn', {--}}
{{--                    more_btn: false,--}}
{{--                    more_text_open() {--}}
{{--                        this.more_btn = true--}}
{{--                    },--}}
{{--                    more_text_close()--}}
{{--                    {--}}
{{--                        return this.more_btn = false--}}
{{--                    }--}}
{{--                })--}}

{{--                window.Alpine.store('accordion', {--}}
{{--                    accordion_active: 0,--}}
{{--                    collapseHandler(accordion) {--}}
{{--                        this.accordion_active = accordion;--}}
{{--                    },--}}
{{--                    isActive(accordion)--}}
{{--                    {--}}
{{--                        return this.accordion_active === accordion;--}}
{{--                    },--}}
{{--                })--}}
{{--            })--}}
{{--        </script>--}}

    </head>
    <body class="bg-gray-100" x-data="{}">
        {!! theme_option('custom_html') !!}

        <main>
            {{ $slot }}
        </main>

        <footer class="w-full bg-white relative h-auto overflow-hidden">
            <div class="w-full bg-white border-t border-gray-200 dark:bg-gray-900">
                <div class="container mx-auto">
                    <div class="w-full block py-4">
                        <p class=" text-gray-500 text-center">تمامی حقوق این وب سایت متعلق است به  موسسه سروش بیداری غدیر خم قدرت گرفته از <a href="https://mediacast.ir" class="text-brand-500 cursor-pointer">مدیاکست</a></p>
                    </div>
                </div>
            </div>
        </footer>

        @include('core.footer')

        <script src="{{theme('/assets/index-10f00ba2.js')}}" data-navigate-once="true"></script>

        <script>
            window.addEventListener('scrollToTop', event => {
                window.scrollTo({ top: 15, left: 15, behaviour: 'smooth' })
            })

            document.addEventListener('livewire:navigated', () => {
                const event = new CustomEvent("scrollToTop", {});
                document.dispatchEvent(event);
            })
        </script>

    </body>
</html>
