TabContainer = {
  initTabGroups() {
    const groups = document.querySelectorAll(".tab-group");
    const unloadedGroups = [...groups].filter((g) => !g.initialised);
    unloadedGroups.forEach((group) => {
      const containers = group.querySelectorAll(".tab-container");
      const tabTitles = [...containers].map((c) => c.getAttribute("title"));

      const tabList = document.createElement("div");
      tabList.classList.add("tab-buttons");
      tabTitles.forEach((title) => {
        const tabButton = document.createElement("button");
        tabButton.innerHTML = title;
        tabButton.onclick = (e) => {
          this.setActiveTab(e.target);
        };
        tabList.appendChild(tabButton);
      });
      group.prepend(tabList);

      this.setActiveTab(tabList.firstChild);

      group.initialised = true;
    });
  },
  setActiveTab(tabButton) {
    const group = tabButton.closest(".tab-group");

    group.querySelectorAll(".active").forEach((el) => el.classList.remove("active"));

    tabButton.classList.add("active");
    group.querySelector(`[title="${tabButton.innerHTML}"]`).classList.add("active");
  },
};

document.addEventListener("DOMContentLoaded", () => {
  TabContainer.initTabGroups();
});