{% extends "base.html" %}
{% block outdated %}
    You're not viewing the
    documentation of the latest version.
    <a href="{{ '../' ~ base_url }}">
        <strong>Click here to view latest.</strong>
    </a>
{% endblock %}
{% block announce %}
    📢 Looking for BunkerWeb PRO version, technical support or tailored services ? Visit the
    <a href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=doc"
       style="color: #3f6ec6;
              text-decoration: underline">BunkerWeb Panel</a>
    for more information on our enterprise offers.
{% endblock %}
{% block libs %}
    <script async
            defer
            data-domain="docs.bunkerweb.io"
            src="https://data.bunkerity.com/js/script.js"></script>

    <script defer>
      window.addEventListener('DOMContentLoaded', (e) => {

        const customHeaders = document.querySelectorAll('[data-custom-header]')
        customHeaders.forEach(header => {
          const getHeaders = document.querySelectorAll(`#${header.getAttribute('id')}`);
          getHeaders.forEach(el => {

            if(!el.hasAttribute('data-custom-header')) el.remove()
        })})
      })
    </script>


    <script defer>
  // Lazy load images and embed youtube videos
  window.addEventListener("load", () => {
    document.querySelectorAll("[data-src]").forEach((el) => {
      el.setAttribute("src", el.getAttribute("data-src"));
    });
  });
  // Add missing label
  try {
    document
      .querySelector('div.md-search[data-md-component="search"][role="dialog"]')
      .setAttribute("aria-label", "Search in documentation");
  } catch (err) {}
    </script>

    <script defer>
      window.addEventListener('DOMContentLoaded', () => {
        const bannerEl = document.querySelector('aside.md-banner');
        let defaultContent = [{ "content" : '<p>Get the most of BunkerWeb by upgrading to the PRO version. More info and free trial <a style="text-decoration:underline; color :  white;" href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=doc#pro">here</a>.</p>'},
        { "content" : '<p>Need premium support or tailored consulting around BunkerWeb ? Check out our <a style="text-decoration:underline; color :  white;" href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=doc#services">professional services</a>.</p>'},
        { "content" : '<p>Be part of the Bunker community by joining the <a style="text-decoration:underline; color: white;" href="https://discord.bunkerweb.io">Discord chat</a> and following us on <a style="text-decoration:underline; color: white;" href="https://www.linkedin.com/company/bunkerity/">LinkedIn</a>.</p>'}
        ]

      function setBannerStyle() {
        const bannerItem = bannerEl.querySelector('.md-banner__inner');
        bannerEl.style.backgroundColor = "#2eac68";
        bannerItem.style.textAlign = "center";
        bannerItem.style.transition = "all 0.5s ease-out";
      }

      function setDefault() {
        const bannerItem = bannerEl.querySelector('.md-banner__inner');
        const clone = bannerItem.cloneNode(true);
        clone.innerHTML = defaultContent[0]["content"];
        bannerEl.replaceChild(clone, bannerItem);
      }

      function startBannerLoop() {
        const switchDelay = 7000;
        let i = 0;

        setInterval(() => {
          // Update or reset index
          if(i + 1 === defaultContent.length) {
            i = 0;
          } else {
            i++;
          }

          // Prepare data with next el with opacity 0 too
          const currItem = bannerEl.querySelector('.md-banner__inner');
          currItem.style.opacity = 0;
          const clone = currItem.cloneNode(true);
          clone.innerHTML = defaultContent[i]["content"];
          setTimeout(() => {
            bannerEl.replaceChild(clone, currItem);
            setTimeout(() => {
              const newItem = bannerEl.querySelector('.md-banner__inner');
              newItem.style.opacity = 1;
            }, 20);
          }, 600);

        }, switchDelay);
      }

      function runBanner() {
        // Try to get dynamic content
        // Else keep static ones
        fetch("https://www.bunkerweb.io/api/bw-ui-news")
        .then((res) => {
          return res.json();
        })
        .then((res) => {
          defaultContent = res.data[0].data;
          startBannerLoop();
        })
        .catch((e) => {
          startBannerLoop();
});
      }

        setBannerStyle();
        setDefault();
        runBanner()

      })
    </script>
{% endblock %}