document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".tab-group").forEach((TabGroup) => {
		const toolbar = TabGroup.querySelector(".tab-group__toolbar");
		const tabs = toolbar.querySelectorAll("button");

		function setActiveTab(currentTab) {
			tabs.forEach((tab) => {
				tab.setAttribute("aria-selected", "false");
			});
			currentTab.setAttribute("aria-selected", "true");
		}
		function setActiveTabPanel(currentTabButton) {
			const currentTabPanelId = currentTabButton.getAttribute("aria-controls");
			const currentTabPanel = TabGroup.querySelector(`#${currentTabPanelId}`);
			hideAllTabPanels();
			currentTabPanel.setAttribute("data-active", "true");
		}
		function hideAllTabPanels() {
			const tabPanels = TabGroup.querySelectorAll(
				".tab-group__innerblocks .tab",
			);
			tabPanels.forEach((tabPanel) => {
				tabPanel.setAttribute("data-active", "false");
			});
		}
		tabs.forEach((tab) => {
			tab.addEventListener("click", () => {
				setActiveTab(tab);
				setActiveTabPanel(tab);
			});
		});
	});
});
