<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
    {{!-- Custom Fonts: Cantata One, Cormorant Garamond --}}

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{asset "built/index.css"}}"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <script src="{{asset "built/index.js"}}" defer></script>
    <style>
        body {
            font-family: '{{@custom.font}}', serif;
        }
    </style>

    <title>{{meta_title}}</title>

    {{ghost_head}}

    {{^if @member}}
        <script>
            var isMember = {{#if @member}}true{{else}}false{{/if}};
            document.addEventListener('DOMContentLoaded', function() {  // Wait for DOM to be ready
                const targetNode = document.body; // Observe changes in the <body> (or a more specific parent if you know it)
                const config = { childList: true, subtree: true }; // Observe added nodes and their descendants
                const customClickHandler = (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    window.location.href = 'https://buy.stripe.com/test_5kAcNz4Zu0QQeLSdQQ';
                };

                const callback = function(mutationsList, observer) {
                    for (const mutation of mutationsList) {
                        if (mutation.type === 'childList') {
                            mutation.addedNodes.forEach(node => {
                                if (node.tagName === 'IFRAME' && node.classList.contains('gh-portal-triggerbtn-iframe')) { // Check for iframe and class
                                    const iframe = node;
                                    iframe.addEventListener('load', function() {
                                        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
                                        if (iframeDocument) {
                                            const portalButton = iframeDocument.querySelector('.gh-portal-triggerbtn-wrapper > div');
                                            if (portalButton) {
                                                if (!isMember) {
                                                    portalButton.addEventListener('click', customClickHandler);
                                                }
                                            } else {
                                                console.log('Portal button not found in iframe. Check the selector!');
                                            }
                                        } else {
                                            console.log('Iframe document not accessible.');
                                        }
                                    });
                                    observer.disconnect(); // Stop observing once the iframe is found (optional, but good practice)
                                    return; // Exit the loop
                                }
                            });

                            // Check for removed nodes:
                            for (const node of mutation.removedNodes) {
                                if (node === iframe) { // Check if the removed node is the iframe
                                    // Remove event listener (if it was attached directly to the div)
                                    const targetDiv = iframe.contentDocument.querySelector('.gh-portal-triggerbtn-wrapper > div');
                                    if (targetDiv) {
                                        targetDiv.removeEventListener('click', myCustomClickHandler);
                                    }

                                    iframe = null; // Clear the iframe reference
                                    console.log("Iframe removed. Event listener detached.");
                                    return;
                                }
                            }
                        }
                    }
                };

                const observer = new MutationObserver(callback);
                observer.observe(targetNode, config);
            });
        </script>
    {{/if}}


    {{!-- Outputs important meta data and settings, should always be in <head> --}}

</head>
<body class="{{body_class}}">
<div class="gh-viewport">

    <header id="gh-head" class="gh-head">
        <nav class="gh-head-inner gh-container">

            <div class="gh-head-brand">
                <a class="gh-burger" role="button" aria-label="menu">
                    <div class="gh-burger-box">
                        <div class="gh-burger-inner"></div>
                    </div>
                </a>
                <img src="{{asset "menu-logo.png"}}"/>
            </div>
            <div class="gh-head-menu">
                <img src="{{asset "menu-logo.png"}}"/>
                <div>
                    {{navigation}}
                </div>
            </div>
            <div class="gh-head-actions">
                <div class="gh-head-actions-list">
                    {{#if @site.members_enabled}}
                        {{^if @member}}
                            <a class="gh-button menu-login-button"
                               href="#/portal/signin">Login</a>
                        {{else}}
                            <a class="gh-button menu-account-button" href="#/portal/account">Account</a>
                        {{/if}}
                    {{/if}}
                </div>
            </div>
        </nav>
    </header>

    <main class="gh-main">

        {{{body}}}
        {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}

    </main>

    {{#is "home"}}
        {{!-- Do nothing, content is hidden --}}
    {{else}}
        <footer class="lol-footer">
            <div class="">
                <div class="gh-foot-menu">
                    {{navigation type="secondary"}}
                </div>
                <div class="gh-foot-meta">
                    <div>LOL set up a 503(c)(3) nonprofit foundation or “public charity” in 2011, which is a separate organization from LOL and has a separate board of directors.</div>
                    <div>P.O. Box 14942, Atlanta, GA  30324</div>
                </div>
            </div>
        </footer>
    {{/is}}

</div>

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

</body>
</html>
