{{#partial "head"}}
    {{#if (occurrences page.content 'shogun-root') '>' 0}}
        {{#if (occurrences settings.request.absolute_path '/landing-page/') '>' 0}}
            <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
        {{/if}}
        <style>
            #main-content.body {
                margin-top: 0; 
                margin-bottom: 0;
            }
            main > div.container {
                max-width: 100%; 
                padding: 0;
            }
            .shogun-root * {
                font-family: "Open Sans",Arial,Helvetica,sans-serif !important;
            }
            .shogun-root > div[class^="shg-box-"] > .shg-box {
                margin: 0 auto;
            }
            .shogun-root .shg-btn, .shogun-root .shg-btn:hover, .shogun-root .shg-btn:active, .shogun-root .shg-btn:focus {
                border-radius: 1000px !important;
            }
            /**
            .shogun-root > div[class^="shg-box-"] > .shg-box > .shg-box-content > .shg-c {
                max-width: 1170px;
                padding-left: 15px !important;
                padding-right: 15px !important;
                margin-right: auto !important;
                margin-left: auto !important;
            }
            **/
        </style>
    {{/if}}
{{/partial}}
{{#partial "page"}}
    {{#if (occurrences page.content 'shogun-platform-type="big_commerce"') '>' 0}}
    	{{#if (occurrences page.content 'https://fonts.googleapis.com') '>' 0}}
            {{#replace 'href="https://fonts.googleapis.com/css?family=' page.content}}"{{/replace}}
    	{{else}}
    		{{{page.content}}}
    	{{/if}}
        {{else if (occurrences page.content 'shogun-root') '>' 0}}
            {{{page.content}}}
        {{else}}
        {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
        <section class="page">
            {{#unless theme_settings.hide_page_heading}}
                <h1 class="page-heading">{{ page.title }}</h1>
            {{/unless}}
            {{#if page.sub_pages}}
                <nav class="navBar navBar--sub">
                    <ul class="navBar-section account-navigation">
                        {{#each page.sub_pages}}
                            <li class="navBar-item"><a class="navBar-action" href="{{url}}">{{title}}</a></li>
                        {{/each}}
                    </ul>
                </nav>
            {{/if}}
            {{{region name="page_builder_content"}}}
            <div class="page-content page-content--centered">
                {{#replace '%%Syndicate%%' page.content}}
                    {{> components/page/rss_feed}}
                {{else}}
                    <p>{{{page.content}}}</p>
                {{/replace}}
            </div>
            {{#if page.feed}}
                <ul>
                    {{#each page.feed}}
                        <li>
                            <h6><a href="{{url}}" target="_blank">{{title}}</a></h6>
                            <p>{{content}}</p>
                        </li>
                    {{/each}}
                </ul>
            {{/if}}
            <!--GPI ADDED REGION-->
            {{{region name="CMS_CONTENT"}}}
        </section>
    {{/if}}
    {{#if (occurrences settings.request.absolute_path '/order-detail/') '>' 0}}
        <script>
            (function() {
              // Utility function to debounce a function
              const debounce = (func, delay) => {
                let timeoutId;
                return function (...args) {
                  clearTimeout(timeoutId);
                  timeoutId = setTimeout(() => {
                    func.apply(this, args);
                  }, delay);
                };
              };
              const addAnchorToLi = (liElement, downloadUrl) => {
                // Check if the anchor already exists in the liElement
                const anchorExists = liElement.querySelector('a');
                if (anchorExists) {
                  return; // Anchor already added, no need to proceed
                }
                // Create the anchor and append it to the liElement
                const anchorLink = document.createElement('a');
                anchorLink.href = downloadUrl;
                anchorLink.textContent = 'Download';
                anchorLink.classList.add('download-btn');
                liElement.appendChild(anchorLink);
              };
              // Function to handle the mutation event
              const handleMutation = () => {
                const idAttributeName = 'data-product-id';
                const listItemElements = document.querySelectorAll('body.b2b-user div.b2b-order-details li.account-listItem');
                listItemElements.forEach((listItem) => {
                  const productId = listItem.querySelector(`input[${idAttributeName}]`).getAttribute(idAttributeName);
                  fetch('/graphql', {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                      'Content-Type': 'application/json',
                      'Authorization': 'Bearer {{settings.storefront_api.token}}'
                    },
                    body: JSON.stringify({
                      query: `
                        query getIdBySku {
                          site {
                            product(entityId: ${productId}) {
                              id
                              sku
                              metafields(namespace: "download_url", keys: "download_url") {
                                edges {
                                  node {
                                    value
                                  }
                                }
                              }
                            }
                          }
                        }
                      `
                    }),
                  })
                    .then(res => res.json())
                    .then(json => {
                      //console.log(json);
                      // Check if the expected GraphQL structure is present
                      if (json?.data?.site?.product?.metafields?.edges?.length) {
                        // Retrieve the value returned by GraphQL
                        const downloadUrl = json.data.site.product.metafields.edges[0].node.value;
                        // Call the function to add the anchor to the liElement
                        addAnchorToLi(listItem, downloadUrl);
                      }
                    })
                    .catch(error => {
                      console.error('An error occurred while fetching GraphQL data:', error);
                    });
                });
                // Disconnect the observer after the first mutation
                observer.disconnect();
              };
              // Check if MutationObserver is supported
              if (typeof MutationObserver !== 'undefined') {
                const mainElement = document.querySelector('main.body');
                if (mainElement) {
                  // Create a Mutation Observer to watch for changes in the <main> element
                  const observer = new MutationObserver(debounce(handleMutation, 200));
                  observer.observe(mainElement, { childList: true, subtree: true });
                } else {
                  console.error('Unable to find the <main> element with class "body".');
                }
              } else {
                console.error('MutationObserver is not supported in this browser.');
              }
            })();
        </script>
    {{/if}}
{{/partial}}
{{> layout/base}}