if(window.hsInEditor){
  /* While in the editor add styling to improve the appearance of code-blocks within the editor. */
  let template = document.createElement('style');
  template.innerHTML = `
  /* Content editor only styles injected only when the component is viewed in the page editor. */
  .hs-inline-edit .hs-embed-wrapper[data-mce-embed-content~="<code-block"] .hs-embed-content-wrapper {
      display: block;
      background: rgb(45, 45, 45);
      min-height: 20px;
      padding: 10px;
      line-height:1;
      color: rgb(204, 204, 204);
  }
  .hs-inline-edit .hs-embed-wrapper[data-mce-embed-content~="<code-block"] .hs-embed-content-wrapper:before {
      content:"Please make sure to escape HTML and HubL before using in blog posts.";
      display:block;
      position:relative;
      color: red;
      font-weight: bold;
  }
  .hs-inline-edit .hs-embed-wrapper[data-mce-embed-content~="<code-block"]:hover .hs-embed-content-wrapper:after {
      content:"Use the post preview to see an accurate depiction of how the code block will display."    ;
      display:block;
      font-size:.9em;
      position:relative;
      color:gray;
      font-style:italic;
  }
   
  `;
  document.querySelector('head').appendChild(template);
}



// change string into escaped characters to prevent rendering DOM elements. This is used for the contents of the code blocks if the user doesn't specify that the content is escaped.
function encode (str) { 
      var buf = [];
      for (var i = str.length - 1; i >= 0; i--) {
        buf.unshift(["&#", str[i].charCodeAt(), ";"].join(""));
      }
      return buf.join("");
}
  // load Prism to be used by the web component, used for syntax highlighting.
  // import syntaxHighlighting from "{{ get_asset_url('../css/components/prism.css')}}" assert { type: "css" }; 
  import "{{ get_asset_url('../js/prism.js') }}";
  
  
  // Register <code-tab> element
  class CodeTab extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
    }

    connectedCallback(){
      // pass Syntax highlighting stylesheets to be used in the ShadowDOM for <code-tab> elements.
      // this.shadowRoot.adoptedStyleSheets = [syntaxHighlighting];
      // Get attributes from <code-tab> element needed for prism and escaping.
      let language = this.getAttribute("data-language");
      let lineNumbers = this.getAttribute("data-line-numbers") == "false" ?  "no-line-numbers": "line-numbers";
      let isEscaped = this.getAttribute("data-escaped");
      let linesToHighlight = this.getAttribute("data-highlight");
      language = language.replace("HubL","jinja2");
      language = language.toLowerCase();

      // take whatever code is between <code-tab> and </code-tab> and escape it unless the data-escaped attribute is set to true.
      let code;
      if(isEscaped == "true"){
          code = this.innerHTML.trim();  // trim strips both leading and trailing whitespace
      } else {
          code = encode(this.innerHTML.trim()); // trim strips both leading and trailing whitespace
      }

      // The Shadow DOM HTML for a <code-tab> element.
      this.shadowRoot.innerHTML = `
        <style>
          /* fallback for Firefox and Safari not supporting import assertion */
          @import "{{ get_asset_url('../css/components/prism.css')}}";
          :host {
            display: block;
            width: 100%;
            box-sizing: border-box;
          }
          :host code[class*="language-"],
          :host pre[class*="language-"] {
            margin-top: 0;
            margin-bottom: 0;
          }
          /* Ensure pre doesn't cause scrollbars unless needed */
          pre[class*="language-"] {
            overflow-x: auto;
            overflow-y: hidden;
            width: 100%;
            box-sizing: border-box;
          }
        </style>
        <div class="code-snippet">
            <pre class="${lineNumbers}" data-line="${linesToHighlight}"><code class="language-${language}">${code}</code></pre>
        </div>
        `;
        // once the web component is initialized tell Prism to syntax highlight the code blocks.
        Prism.highlightAllUnder(this.shadowRoot);
    }
  }
  window.customElements.define("code-tab", CodeTab);

  // <code-block> custom element - This element is where you place <code-tab> elements into.
  class CodeBlock extends HTMLElement {
    constructor() {
      super();
      // attach a ShadowDom to the <code-block> element. The mode makes it so JavaScript outside the root can interact with it's contents.
      this.attachShadow({ mode: "open" });
    }
    connectedCallback(){
      
      // check if code-tab element has data-line-numbers set to false. This value gets used to pass the line numbers option to
      /* let lineNumbers = this.getAttribute("data-line-numbers") == "false" ?  "no-line-numbers": "line-numbers"; */
      // let codeTabs = this.querySelectorAll("code-tab");
      const codeBlockElement = this; // the element itself
      const shadowRoot = codeBlockElement.shadowRoot;
      // The ShadowDOM for the <code-block>. The tablist, is where we will place buttons for the user to tab through.
      // <slot> determines where <code-tab> elements will be rendered.
      shadowRoot.innerHTML = `
        <style>
          :host {
            display: block;
            width: 100%;
            box-sizing: border-box;
          }
          .code-block {
            width: 100%;
            box-sizing: border-box;
          }
        </style>
        <section class="code-block">
            <slot></slot>
        </section>
      `;
      
      // Since we're using a single code block, no tab handling is needed
      let codeTab = codeBlockElement.querySelector("code-tab");
      if (codeTab) {
        // Set accessibility attributes for the single code tab
        codeTab.setAttribute("id", "codePanel");
        codeTab.setAttribute("role", "region");
        codeTab.setAttribute("aria-label", "Code snippet");
      }
    }
  }
  window.customElements.define("code-block", CodeBlock);
 