document.addEventListener("DOMContentLoaded", function () {
  renderBanners();
  setInterval(changeBanners, 8000);
});

function renderBanners() {
  if (window.location.href.indexOf("teach/control/lesson") > -1 || window.location.href.indexOf("teach/control/stream") > -1) {
    let lessonList = document.querySelector("ul.lesson-list");
    let streamTable = document.querySelector("table.stream-table");
    lessonList ? insertBanners(lessonList) : insertBanners(streamTable);
  }
}

function insertBanners(block) {
  let banners = `
    <div class="banner__container">
      <div class="banner">
        <div class="banner__content">
          <p class="banner__text xbig__text">Клуб SE</p>
          <a class="banner__btn"
            href="https://anettaschool.ru/atmosphereclub?utm_source=getcourse&amp;utm_medium=banner&amp;utm_campaign=club_se"
            target="_blank">Узнать подробнее</a>
        </div>
      </div>
      <div class="banner">
        <div class="banner__content">
          <p class="banner__text sm__text">Запись мастер-класса</p>
          <p class="banner__text xbig__text">Как повысить уверенность в себе</p>
          <a class="banner__btn"
            href="https://t.me/School_SE_bot?start=startgc"
            target="_blank">Смотреть</a>
        </div>
      </div>
      <div class="banner">
        <div class="banner__content">
          <p class="banner__text xbig__text">Сервис психологической помощи</p>
          <a class="banner__btn"
            href="https://anettaschool.ru/psyconsult?utm_source=getcourse&amp;utm_medium=banner&amp;utm_campaign=psyconsult"
            target="_blank">Узнать подробнее</a>
        </div>
      </div>
      <div class="banner">
        <div class="banner__content">
          <p class="banner__text xbig__text">Магазин SE</p>
          <p class="banner__text big__text">Одежда, которая вдохновляет</p>
          <a class="banner__btn"
            href="https://anettaschool.ru/store?utm_source=getcourse&amp;utm_medium=banner&amp;utm_campaign=merch"
            target="_blank">Перейти</a>
        </div>
      </div>
    </div>
  `;
  block.insertAdjacentHTML("afterbegin", banners);
}

function changeBanners() {
  let renderedBanners = Array.from(document.querySelectorAll(".banner"));
  let lastElem = renderedBanners.pop();
  renderedBanners.unshift(lastElem);
  let bannerContainer = document.querySelector(".banner__container");
  bannerContainer.innerHTML = "";
  renderedBanners.forEach(banner => {
    bannerContainer.appendChild(banner);
  });
}