{{!--
    Parameters:
    - isPost: Boolean
--}}

{{#if isPost}}
    {{!-- Table of Contents --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css">
    <link rel="stylesheet" type="text/css" href="{{asset "css/table-of-contents.css"}}" />
{{/if}}

<article class="{{#unless @custom.use_sidebar}}overflow-hidden{{/unless}}{{#unless isPost}} overflow-hidden{{/unless}}" data-post-header-type="{{@custom.post_header_type}}" data-has-feature-image="{{#if feature_image}}true{{else}}false{{/if}}" data-use-sidebar="{{#if isPost}}{{@custom.use_sidebar}}{{else}}false{{/if}}">
    {{#match @page.show_title_and_feature_image}}
        <header class="hero {{#if feature_image}}wide-container{{#match @custom.post_header_type "Featured Image Right"}} vertical-post-header{{/match}}{{#match @custom.post_header_type "Featured Image Left"}} vertical-post-header vertical-post-image-left{{/match}}{{else}}{{#unless @custom.use_sidebar}} narrow-container{{else}} wide-container{{/unless}} no-image-container{{/if}}
        {{#match @custom.post_header_type "Narrow"}}{{#unless @custom.use_sidebar}} narrow-container{{/unless}}{{/match}}{{#unless isPost}} narrow-container{{/unless}}">
            <div class="hero-content">
                <div class="post-hero-text-content section-padding-top">
                    {{#if isPost}}
                        {{#primary_tag}}
                            <a class="post-tag hover-underline" href="{{url}}">{{name}}</a>
                        {{/primary_tag}}
                    {{/if}}

                    <h1 class="post-heading">{{title}}</h1>

                    <div class="excerpt-and-authors-wrapper">
                        {{#if custom_excerpt}}
                            <div class="post-excerpt-wrapper{{#unless isPost}}{{#unless feature_image}} full-width-post-excerpt-wrapper{{/unless}}{{/unless}}">
                                <p>
                                    {{custom_excerpt}}
                                </p>
                            </div>
                        {{/if}}

                        {{#if isPost}}    
                            {{> "components/post-authors" }}
                        {{/if}}
                    </div>
                </div>

                {{#if feature_image}}
                    <div class="post-main-image-wrapper post-main-image-wrapper-header hover-image-opacity">
                        <div class="post-main-image">
                            <figure>
                                <img                                 
                                    srcset="{{img_url feature_image size="s" format="webp"}} 320w,
                                            {{img_url feature_image size="xm" format="webp"}} 440w,
                                            {{img_url feature_image size="m" format="webp"}} 600w,
                                            {{img_url feature_image size="l" format="webp"}} 960w,
                                            {{img_url feature_image size="xl" format="webp"}} 1200w,
                                            {{img_url feature_image size="xxl" format="webp"}} 2000w"
                                    src="{{img_url feature_image size="xl"}}"
                                    alt="{{title}}"
                                >
                                {{#if feature_image_caption}}
                                    <figcaption>{{feature_image_caption}}</figcaption>
                                {{/if}}
                            </figure>
                        </div>
                    </div>
                {{/if}}              
            </div>
        </header>
    {{/match}}

    <div class="gh-content gh-canvas post-content-and-sidebar{{#match @custom.sidebar_position "Left"}} sidebar-left{{/match}}{{#match @custom.post_header_type "Featured Image Left"}} sidebar-left{{/match}}">
        <div class="post-content-outer narrow-container{{#unless @custom.use_sidebar}} post-content-outer-without-sidebar{{/unless}}{{#unless isPost}} post-content-outer-without-sidebar{{/unless}}">
            {{#if feature_image}}
                {{#if isPost}}
                    {{#match @custom.post_header_type "Narrow"}}
                        {{#if @custom.use_sidebar}}
                            <div class="post-main-image-wrapper post-main-image-wrapper-content hover-image-opacity">
                                <div class="post-main-image">
                                    <figure>
                                        <img                                 
                                            srcset="{{img_url feature_image size="s" format="webp"}} 320w,
                                                    {{img_url feature_image size="xm" format="webp"}} 440w,
                                                    {{img_url feature_image size="m" format="webp"}} 600w,
                                                    {{img_url feature_image size="l" format="webp"}} 960w,
                                                    {{img_url feature_image size="xl" format="webp"}} 1200w,
                                                    {{img_url feature_image size="xxl" format="webp"}} 2000w"
                                            src="{{img_url feature_image size="xl"}}"
                                            alt="{{title}}"
                                        >
                                        {{#if feature_image_caption}}
                                            <figcaption>{{feature_image_caption}}</figcaption>
                                        {{/if}}
                                    </figure>
                                </div>
                            </div>
                        {{/if}}
                    {{/match}}
                {{/if}}
            {{/if}} 

            <div class="post-content section-padding-bottom{{#unless feature_image}} post-content-no-image{{/unless}}">
                {{content}}

                {{#if isPost}}
                    {{#if access}}
                        <div class="post-share">
                            <div class="post-share-heading">
                                {{t "Share this article"}}
                            </div>

                            <div class="socials post-share-icons">
                                <a href="https://www.facebook.com/sharer.php?u={{url absolute='true'}}" target="_blank" rel="noopener" class="social" aria-label="Share on Facebook">
                                    <div class="social-inner">
                                        {{> "icons/facebook-icon"}}
                                    </div>
                                </a>  

                                
                                <a href="https://twitter.com/intent/tweet?url={{url absolute='true'}}&amp;text={{encode title}}" target="_blank" rel="noopener" class="social" aria-label="Share on Twitter/X">
                                    <div class="social-inner">
                                        {{> "icons/twitter-icon"}}
                                    </div>
                                </a>
                                
                                <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{url absolute='true'}}&amp;title={{encode title}}" target="_blank" rel="noopener" class="social" aria-label="Share on Linkedin">
                                    <div class="social-inner social-inner-smaller">
                                        {{> "icons/linkedin-icon"}}
                                    </div>
                                </a>

                                 <a class="social clipboard-link" href="javascript:" aria-label="Copy Link">
                                    <div class="social-inner">
                                        {{> "icons/link-icon"}}
                                    </div>
                                </a>

                                <div class="clipboard-alert">
                                    <small>{{t "The link has been copied!"}}</small>
                                </div>
                            </div>
                        </div>
                    {{/if}}
                {{/if}}
            </div>

            {{#if isPost}}
                {{#if comments}}
                    <div class="section-heading">
                        <span>{{t "Members Discussion"}}</span>
                        <span>{{comment_count empty=(t "No Comments") singular=(t "Comment") plural=(t "Comments") autowrap="false"}}</span>
                    </div>                    

                    <div class="comments-container">
                        {{comments title="" count=false}}
                    </div>
                {{/if}}
            {{/if}}
        </div>

        {{#if isPost}}
            {{#if @custom.use_sidebar}}
                <aside class="post-sidebar{{#unless feature_image}} post-content-no-image{{/unless}}{{#match @custom.sidebar_content "Featured Articles"}} sidebar-related-articles{{/match}}">
                    {{#match @custom.sidebar_content "Featured Articles"}}
                        {{#get 'posts' include='tags,authors' limit='4' filter='id:-{{id}}+featured:true' as |featured|}}
                            {{#if featured}}
                                <div class="sidebar-articles">
                                    <div class="section-heading">
                                        <span>
                                            {{t "Featured Articles"}}
                                        </span>
                                    </div>

                                    {{#foreach featured}}
                                        {{> "components/extra-small-side-card" isPost=true name=title}}
                                    {{/foreach}}
                                </div>
                            {{/if}}
                        {{/get}}


                        <div class="hidden-sidebar-newsletter{{#if @custom.use_newsletter_on_homepage_and_post_sidebar}}{{#if @site.members_enabled}}{{#unless @site.members_invite_only}}{{#unless @member}} sidebar-newsletter-container{{/unless}}{{/unless}}{{/if}}{{/if}}">
                            {{> "components/newsletter" isForPost=true }}
                        </div>
                                    
                    {{else}}
                        <div class="gh-toc-outer">
                            <div class="medium-text toc-heading">{{t "Table of Contents"}}</div>               
                            <div class="gh-toc"></div>
                        </div>
                    {{/match}}
                </aside>
            {{/if}}
        {{/if}}
    </div>

    {{#if isPost}}
        <footer>
            <div class="wide-container section-padding-bottom">
                <div class="related-posts">
                    <div class="related-post-wrapper previous-article-horizontal-card">
                        {{#prev_post}}
                            {{> "components/horizontal-card" isRelatedArticle=true}}
                        {{/prev_post}}
                    </div>

                    <div class="related-post-line"></div>

                    <div class="related-post-wrapper next-article-horizontal-card">
                        {{#next_post}}
                            {{> "components/horizontal-card" isRelatedArticle=true isNextArticle=true}}
                        {{/next_post}}
                    </div>
                </div>
            </div>

            {{#get "posts" limit="6" include="count.posts" filter='id:-{{id}}+tag:[{{primary_tag.slug}}]'}}
                {{#if posts}}
                    <section class="footer-slider">
                        <div class="wide-container">
                            <div class="section-heading">
                                <span>
                                    {{t "Related Articles"}}
                                </span>

                                {{#match @custom.use_custom_pages "All Custom Pages"}}
                                    <a href="{{@site.url}}/archive/" class="section-heading-button">
                                        {{t "View All"}} 
                                        
                                        <div class="section-heading-arrow">                        
                                            {{> "icons/section-heading-arrow"}}                         
                                        </div>                              
                                    </a>
                                {{else}}                  
                                    {{plural posts.length empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
                                {{/match}}
                            </div>
                        </div>

                        <div class="slider">
                            <div class="slider-outer section-padding-small">
                                <div class="slider-inner">                           
                                    {{#foreach posts}}
                                        {{> "components/slide-card" isPost=true}}
                                    {{/foreach}}                                           
                                </div>
                            </div>
                        </div>          
                    </section>
                {{/if}}
            {{/get}}
        </footer>
    {{/if}}
</article>

<script src="https://cdn.jsdelivr.net/npm/lightense-images@1.0.17/dist/lightense.min.js"></script>
<script>
    setLightense();
</script>

<script src="{{asset "js/post-content.js"}}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        setToggle();
    })
</script>

{{#if isPost}}
    {{#match @custom.sidebar_content "Table Of Contents"}}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>
        <script>
            tocbot.init({
                // Where to render the table of contents.
                tocSelector: '.gh-toc',
                // Where to grab the headings to build the table of contents.
                contentSelector: '.gh-content',
                // Which headings to grab inside of the contentSelector element.
                headingSelector: 'h2, h3, h4',
                // Ensure correct positioning
                hasInnerContainers: true,
                ignoreSelector: '.kg-card h2, .kg-card h3, .kg-card h4, .post-upgrade-cta h2'
            });
        </script>
    {{/match}}

    {{#if @custom.use_sidebar}}
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                stickySidebar();
            })

            window.addEventListener('resize', debounce(() => {stickySidebar()}, 100)); 
        </script>      
    {{/if}}

    {{#if access}}
        <script>
            copyUrlToClipboard("post-share-icons");

            window.addEventListener("load", () => {
                const iframe = document.querySelector('#ghost-comments-root iframe');
                if(!iframe) return;
                
                var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                var targetHead = iframe.contentDocument.head;
    
                var newLink = document.createElement("link");
                newLink.setAttribute("rel", "stylesheet");
                newLink.setAttribute("type", "text/css");
                newLink.setAttribute("href", "{{asset 'css/comments.css'}}");

                let section = iframeDoc.querySelector('section');
                section.id = "comments-section"

                const rootStyles = getComputedStyle(document.documentElement);

                //initial variables
                iframeDoc.documentElement.style.setProperty('--text-color', rootStyles.getPropertyValue('--text-color'))
                iframeDoc.documentElement.style.setProperty('--background-color', rootStyles.getPropertyValue('--background-color'))
                iframeDoc.documentElement.style.setProperty('--ease-transition', rootStyles.getPropertyValue('--ease-transition'))
                iframeDoc.documentElement.style.setProperty('--font1', rootStyles.getPropertyValue('--font1'))
                iframeDoc.documentElement.style.setProperty('--font2', rootStyles.getPropertyValue('--font2'))
                iframeDoc.documentElement.style.setProperty('--font3', rootStyles.getPropertyValue('--font3'))
                iframeDoc.documentElement.style.setProperty('--font4', rootStyles.getPropertyValue('--font4'))
                iframeDoc.documentElement.style.setProperty('--image-filter', rootStyles.getPropertyValue('--image-filter'))

                targetHead.appendChild(newLink);
                loadFonts("{{@custom.fonts}}", iframeDoc);

                const linkElement = document.querySelector('link[href*="fonts.bunny.net/css"]');

                if(linkElement){          
                    const clone = linkElement.cloneNode(true);
                    targetHead.appendChild(clone);
                }
            });
        </script>
    {{/if}}
{{/if}}