---
import "../style/global.css";
// import "../../svelte-dialogs.config"
import Header from "#components/design/header/Header.astro";
import Footer from "#components/design/footer/Footer.astro";
import SidebarLeft from "#components/design/sidebars/SidebarLeft.astro";
import SidebarRight from "#components/design/sidebars/SidebarRight.astro";
import { NotificationWrapper } from "@ibcornelsen/ui";

export interface Props {
	title: string;
}

const { title } = Astro.props;
---

<script>
/*
window.addEventListener("scroll", (event) => {
    let scroll = window.scrollY;

	if(scroll>=144){
		console.log(scroll);
		document.getElementById('header').style.position = 'fixed';
		document.getElementById('header').style.zIndex = '1000';
		document.getElementById('header').style.width = '100%';
		document.getElementById('header').style.top = '0';

		document.getElementById('header-grid').classList.add('2xl:py-0');
		document.getElementById('header-grid').classList.remove('2xl:py-4')
		document.getElementById('header-grid').classList.remove('bg-white');

		document.getElementById('header-grid').classList.add('bg-secondary');
		document.getElementById('header-text-1').classList.add('hidden');
		document.getElementById('header-text-2').classList.add('hidden');
		document.getElementById('header-line').classList.add('xl:h-[6px]');
		document.getElementById('header-logo').src= '/images/header/logo-IBC-white.svg';
		document.getElementById('header-logo').style.height = '62px';
		document.getElementById('header-logo').classList.add('xl:px-2','py-[5px]');
;
		document.getElementById('card-login').classList.remove('lg:ring-2','box');
		document.getElementById('LoginButton')?.classList.add('ring-[1px]','ring-white');
		document.getElementById('passwort-vergessen')?.classList.add('hidden');

		document.getElementById('main').style.marginTop = '211px';

	}else{

		document.getElementById('header').style.position = 'relative';
		document.getElementById('header').style.zIndex = '0';
		document.getElementById('header').style.top = '0';

		document.getElementById('header-grid')?.classList.add('2xl:py-4');
		document.getElementById('header-grid')?.classList.remove('2xl:py-0');

		document.getElementById('header-grid')?.classList.add('bg-white');
		document.getElementById('header-grid')?.classList.remove('bg-secondary');
		document.getElementById('header-text-1').classList.remove('hidden');
		document.getElementById('header-text-1')?.classList.remove('text-white');
		document.getElementById('header-text-1').classList.add('xl:leading-[4.5rem]');
		document.getElementById('header-text-2')?.classList.remove('hidden');
		document.getElementById('header-line')?.classList.remove('xl:h-[6px]');
		document.getElementById('header-logo').src= '/images/header/logo-IBC-big.svg';
		document.getElementById('header-logo').style.height = '107.53px';
		document.getElementById('header-logo')?.classList.remove('xl:bg-white','xl:px-2');

		document.getElementById('card-login')?.classList.add('lg:ring-2');
		document.getElementById('LoginButton')?.classList.remove('ring-[1px]','ring-white');
		document.getElementById('passwort-vergessen')?.classList.remove('hidden');

		document.getElementById('main').style.marginTop = '0px';

	}
    

});
*/
</script>

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
		<meta
			name="description"
			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
		/>
		<title>
			{title || "Energieausweis online erstellen - Online Energieausweis"}
		</title>
	</head>

	<body>
			
		<Header />
	
		<main id="main"
		class="w-full p-0 grid
		xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
		sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
		md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
		lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
		xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
		2xl:grid-cols-[minmax(300px,300px)1fr_minmax(300px,300px)] 2xl:gap-5 2xl:p-6
		">

		<SidebarLeft />
		
		<article class="box rounded-tl-none
		xl:px-10 py-8">
		<slot />
		</article>
		
		<SidebarRight />

		</main>
	
		<Footer />
		<NotificationWrapper client:load />
	</body>
</html>


