---
---

if ("{{ site.safeui }}"==="true") {
  document.addEventListener("DOMContentLoaded", function () {
    var safuiAlert = document.querySelector("#safeui-alert");
    if (safuiAlert) {
      setTimeout(function () {
        safuiAlert.style.transition = "1s";
        safuiAlert.style.height = "0";
        safuiAlert.style.paddingTop = "0";
        safuiAlert.style.paddingBottom = "0";
        safuiAlert.style.marginTop = "0";
        safuiAlert.style.marginBottom = "0";
        setTimeout(function () {
          safuiAlert.parentNode.removeChild(safuiAlert);
        }, 1000);
      }, 7000);
    }
  });
}
const hamburger = document.querySelector("#hamburger");
const closeNavHam = document.querySelector("#close-nav-ham");
const appscmsToolbar = document.querySelector(".appscms-toolbar");
const appscmsToolbarListItems = document.querySelectorAll(
  ".appscms-toolbar-list-item-span"
);
closeNavHam.addEventListener("click", () => {
  if (hamburger.dataset.open === "1") {
    hamburger.dataset.open = "0";
    appscmsToolbar.style.right = "-272px";
    appscmsToolbar.style.display = "none";
    hamburger.innerHTML = ` <svg
        style="font-size:25px"
          stroke="currentColor"
          fill="currentColor"
          stroke-width="0"
          viewBox="0 0 512 512"
          aria-hidden="true"
          focusable="false"
          height="50px"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill="none"
            stroke-linecap="round"
            stroke-miterlimit="10"
            stroke-width="48"
            d="M88 152h336M88 256h336M88 360h336"
          ></path>
        </svg>`;
  }
})
hamburger.addEventListener("click", () => {
  if (hamburger.dataset.open === "1") {
    hamburger.dataset.open = "0";
    appscmsToolbar.style.right = "-272px";
    appscmsToolbar.style.display = "none";
    hamburger.innerHTML = ` <svg
        style="font-size:25px"
          stroke="currentColor"
          fill="currentColor"
          stroke-width="0"
          viewBox="0 0 512 512"
          aria-hidden="true"
          focusable="false"
          height="50px"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill="none"
            stroke-linecap="round"
            stroke-miterlimit="10"
            stroke-width="48"
            d="M88 152h336M88 256h336M88 360h336"
          ></path>
        </svg>`;
  } else {
    hamburger.dataset.open = "1";
    appscmsToolbar.style.right = "0px";
    appscmsToolbar.style.display = "block";
    hamburger.innerHTML = `<svg  height="50px"
        width="1em"  style="font-size:25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g clip-path="url(#clip0_429_11083)"> <path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> </g> <defs> <clipPath id="clip0_429_11083"> <rect width="24" height="24" fill="white"></rect> </clipPath> </defs> </g></svg>`;
  }
});
Array.from(appscmsToolbarListItems).map((item) => {
  item.addEventListener("click", (e) => {
    e.preventDefault();
    var style = window.getComputedStyle(item.nextElementSibling);
    var maxHeight = style.getPropertyValue("max-height");

    if (maxHeight && maxHeight !== "0px") {
      // If the item is expanded, collapse it
      item.nextElementSibling.style.maxHeight = "0";
      item.nextElementSibling.style.opacity = "0";
      item.nextElementSibling.style.height = "0";
    } else {
      // If the item is collapsed, expand it
      item.nextElementSibling.style.maxHeight =
        item.nextElementSibling.scrollHeight + "px";
      item.nextElementSibling.style.opacity = "1";
      item.nextElementSibling.style.height = "auto";
    }
  });
});

if ("{{ site.removeBootstrapJs }}" === "true") {
  const languagesModal = document.querySelector("#staticBackdrop");
  const intModalBtn = document.querySelector("#int-modal-btn");
  const closeBtn = document.querySelector("#close-modal");

  if (intModalBtn) {
    intModalBtn.addEventListener("click", () => {
      languagesModal.style.display = "block";
      languagesModal.classList.add("show");
      let modal = document.createElement("div");
      modal.classList.add("modal-backdrop", "show");
      document.body.appendChild(modal);
    });
    closeBtn.addEventListener("click", () => {
      languagesModal.style.display = "none";
      languagesModal.classList.remove("show");
      let modal = document.querySelector(".modal-backdrop");
      document.body.removeChild(modal);
    });
  }
}

// document.querySelector('.scroll-left').addEventListener('click', function() {
//   const toolbarList = document.querySelector('.appscms-toolbar-list');
//   toolbarList.scrollBy({
//     left: -100,
//     behavior: 'smooth'
//   });
//   updateButtonStatus(toolbarList);
// });

// document.querySelector('.scroll-right').addEventListener('click', function() {
//   const toolbarList = document.querySelector('.appscms-toolbar-list');
//   toolbarList.scrollBy({
//     left: 100,
//     behavior: 'smooth'
//   });
//   updateButtonStatus(toolbarList);
// });

// function updateButtonStatus(toolbarList) {
//   const scrollLeft = toolbarList.scrollLeft;
//   const scrollWidth = toolbarList.scrollWidth;
//   const clientWidth = toolbarList.clientWidth;

//   const scrollRightButton = document.querySelector('.scroll-right');
//   const scrollLeftButton = document.querySelector('.scroll-left');

//   if (scrollLeft === 0) {
//     scrollLeftButton.disabled = true;
//   } else {
//     scrollLeftButton.disabled = false;
//   }

//   if (scrollLeft + clientWidth >= scrollWidth) {
//     scrollRightButton.disabled = true;
//   } else {
//     scrollRightButton.disabled = false;
//   }
// }

// // Initial button status update
// updateButtonStatus(document.querySelector('.appscms-toolbar-list'));