<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>{{ template "title" . }} - Nidus Sync</title>
		<!-- Bootstrap CSS -->
		<link href="/static/css/bootstrap.css" rel="stylesheet" />
		<!-- Fontawesome Icons -->
		<link rel="stylesheet" href="/static/vendor/css/bootstrap-icons.min.css" />
		<!-- favicon -->
		<link rel="icon" href="/static/favicon-sync.ico" type="image/x-icon" />
		{{ block "extraheader" . }}{{ end }}
		<script>
			function setTooltipsForSidebar() {
				const sidebarTooltips = document.querySelectorAll(
					'#sidebar [data-bs-toggle="tooltip"]',
				);
				const isExpanded = document
					.getElementById("content")
					.classList.contains("expanded");
				sidebarTooltips.forEach((t) => {
					const tooltip = bootstrap.Tooltip.getOrCreateInstance(t);
					if (isExpanded) {
						tooltip.enable();
					} else {
						tooltip.disable();
					}
				});
			}
			document.addEventListener("DOMContentLoaded", function () {
				var popoverTriggerList = [].slice.call(
					document.querySelectorAll('[data-bs-toggle="popover"]'),
				);
				var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
					return new bootstrap.Popover(popoverTriggerEl);
				});
				console.log("Initialized ", popoverTriggerList.length, " popovers");

				var tooltipTriggerList = [].slice.call(
					document.querySelectorAll('[data-bs-toggle="tooltip"]'),
				);
				var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
					let t = new bootstrap.Tooltip(tooltipTriggerEl);
					return t;
				});
				console.log("Initialized ", tooltipTriggerList.length, " tooltips");
				setTooltipsForSidebar();
			});
		</script>
		{{ if not .Config.IsProductionEnvironment }}
			<script src="/.flogo/injector.js"></script>
		{{ end }}
	</head>
	<body>
		{{ template "sync/component/icons.html" }}
		<div class="d-flex">
			{{ if .User }}
				{{ template "sync/component/sidebar.html" . }}
			{{ end }}
		</div>

		<div id="content">
			{{ template "content" . }}
		</div>
		<div id="flogo"></div>
		<script src="/static/vendor/js/bootstrap.bundle.min.js"></script>
		<script>
			document.getElementById("sidebarToggle").addEventListener("click", () => {
				document.getElementById("sidebar").classList.toggle("collapsed");
				document.getElementById("content").classList.toggle("expanded");
				setTooltipsForSidebar();
			});
		</script>
	</body>
</html>
