<!DOCTYPE html>
<html lang="{{@site.locale}}" class="{{#match @custom.background_color "#ffffff"}}gh-html-white-background{{/match}}{{#match @custom.text_color "Dark"}} gh-color-section-font-dark{{else}} gh-color-section-font-light{{/match}}" data-color-scheme="light">

<head>
    {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{meta_title}}</title>

    {{!-- Dark Mode Script --}}
    <script>
        const rootElem = document.querySelector("html[data-color-scheme]");

        const detectSystemTheme = () => {
            if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
                rootElem.setAttribute("data-color-scheme", "dark");
            } else {
                rootElem.setAttribute("data-color-scheme", "light");
            }
        };

        const initTheme = () => {
            const localStoragePref = localStorage.getItem("color-scheme");

            if (localStoragePref) {
                rootElem.setAttribute("data-color-scheme", localStoragePref);
            } else {
                detectSystemTheme();
            }
        };

        initTheme();

        const changeTheme = () => {
            if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
                rootElem.setAttribute("data-color-scheme", "dark");
            } else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
                rootElem.setAttribute("data-color-scheme", "light");
            } else {
                rootElem.setAttribute("data-color-scheme", "light");
            }
        }

        window
            .matchMedia("(prefers-color-scheme: dark)")
            .addEventListener("change", changeTheme);
    </script>

    {{!-- Custom Border Radius Variables --}}
    {{>border-radius}}

    {{!-- Custom Background Color Variable --}}
    <style>
        :root {
            --background-custom-color: {{@custom.background_color}}
        }
    </style>

    {{!-- Custom Button Color Variable --}}
    {{#match @custom.button_color "#000000"}}
    <style>
        :root {
            --background-color-button: {{@custom.button_color}};
        }

        :root[data-color-scheme="dark"] {
            --background-color-button: #343435;
        }
    </style>
    {{else}}
    <style>
        :root {
            --background-color-button: {{@custom.button_color}};
        }
    </style>
    {{/match}}

    {{!-- Loading Fonts, Fonts Variables Declarations --}}
    {{>font-pairings}}

    {{!-- Main Styles --}}
    <link rel="stylesheet" href="{{asset 'built/index.css'}}" />

    {{!-- PhotoSwipe min styles --}}
    {{#is "post"}}
    {{#post}}
    {{#has tag="#lightbox"}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.min.css">
    {{/has}}
    {{/post}}
    {{/is}}

    {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
        it should always be the last tag before the closing head tag --}}
    {{ghost_head}}
</head>

<body class="{{body_class}} theme-spotlight is-head-{{#match @custom.navigation_layout "Logo on the left"}}left-logo{{else match
    @custom.navigation_layout "Author on the left" }}left-logo{{else match
    @custom.navigation_layout "Logo in the middle" }}middle-logo{{else match
    @custom.navigation_layout "Author in the middle" }}middle-logo{{else match
    @custom.navigation_layout "Logo with social icons"}}include-social-icons{{else match
    @custom.navigation_layout "Author with social icons"}}include-social-icons{{else match
    @custom.navigation_layout "Mobile menu with logo"}}mobile-menu{{else match
    @custom.navigation_layout "Mobile menu with author"}}mobile-menu{{else match
    @custom.navigation_layout "Mobile menu with logo and icons"}}mobile-menu-icons{{else match
    @custom.navigation_layout "Mobile menu with author and icons"}}mobile-menu-icons{{/match}}">
    <div class="gh-viewport">
        {{!-- Website's Header --}}
        {{>header}}
        
        {{! All content gets inserted here, index.hbs, post.hbs, etc }}
        {{{body}}}

        {{!-- Website's Footer --}}
        {{>footer totalPosts=pagination.total}}
    </div>
    
    {{!-- Scroll to top btn --}}
    <button class="gh-scroll-top-btn" type="button" title="{{t "Scroll to top button"}}" aria-label="{{t "Scroll to top button"}}">
        <svg class="gh-scroll-top-arrow" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 10.8333L12 5M12 5L18 10.8333M12 5L12 19" stroke="#1D1D1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <svg class="gh-scroll-top-progress" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
        </svg>
    </button>

    {{!-- Main Script --}}
    <script src="{{asset 'built/index.js'}}" ></script>

    {{!-- PhotoSwipe script --}}
    {{#is "post"}}
    {{#post}}
        {{#has tag="#lightbox"}}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/umd/photoswipe.umd.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/umd/photoswipe-lightbox.umd.min.js"></script>
        <script>
            const lightbox = new PhotoSwipeLightbox({
                gallery: '.kg-gallery-card, .kg-image-card, .kg-product-card',
                children: 'img:not(a img)',
                pswpModule: PhotoSwipe,
                preloaderDelay: 0
            });
            lightbox.addFilter('domItemData', (itemData, element, linkEl) => {
                if (element) {
                    itemData.src = element.src;
                    itemData.srcset = element.getAttribute('srcset');
                    itemData.w = element.getAttribute('width');
                    itemData.h = element.getAttribute('height');
                    itemData.msrc = element.src;
                    itemData.thumbCropped = true;
                    const alt = element.alt;
                    if (alt) {
                        itemData.alt = element.alt;
                    }
                }
                return itemData;
            });
            lightbox.init();
        </script>
        {{/has}}
    {{/post}}
    {{/is}}

    {{!-- Outputs important scripts - should always be included before closing body tag --}}
    {{ghost_foot}}
</body>

</html>