package layout

// LAYOUT PLAYGROUND
templ CorporateLayout(title string, css templ.Component, js templ.Component, navbarmenu templ.Component,
	navbaruser templ.Component, sidebaruserprofile templ.Component) {
	<!DOCTYPE html>
	<!--
		Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
		Author: KeenThemes
		Website: http://www.keenthemes.com/
		Contact: support@keenthemes.com
		Follow: www.twitter.com/keenthemes
		Dribbble: www.dribbble.com/keenthemes
		Like: www.facebook.com/keenthemes
		Purchase: https://1.envato.market/EA4JP
		Renew Support: https://1.envato.market/EA4JP
		License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
		-->
	<html lang="en">
		<!--begin::Head-->
		<head>
			<base href="/"/>
			<meta charset="utf-8"/>
			<title>Company Portal | { title }</title>
			<meta name="description" content="Company Portal"/>
			<meta
				name="viewport"
				content="width=device-width, initial-scale=1, shrink-to-fit=no"
			/>
			<!--begin::Fonts-->
			<link
				rel="stylesheet"
				href="assets/css/googlefont/poppins.css"
			/>
			<!--end::Fonts-->
			<!--begin::Page Custom Styles(used by this page)-->
			<link
				href="assets/css/pages/login/login-1.css"
				rel="stylesheet"
				type="text/css"
			/>
			<!--end::Page Custom Styles-->
			<!--begin::Global Theme Styles(used by all pages)-->
			<link
				href="assets/plugins/global/plugins.bundle.css"
				rel="stylesheet"
				type="text/css"
			/>
			<link
				href="assets/plugins/custom/prismjs/prismjs.bundle.css"
				rel="stylesheet"
				type="text/css"
			/>
			<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
			<!--end::Global Theme Styles-->
			<!--begin::Layout Themes(used by all pages)-->
			<link
				href="assets/css/themes/layout/header/base/light.css"
				rel="stylesheet"
				type="text/css"
			/>
			<link
				href="assets/css/themes/layout/header/menu/light.css"
				rel="stylesheet"
				type="text/css"
			/>
			<link
				href="assets/css/themes/layout/brand/dark.css"
				rel="stylesheet"
				type="text/css"
			/>
			<link
				href="assets/css/themes/layout/aside/dark.css"
				rel="stylesheet"
				type="text/css"
			/>
			<!--end::Layout Themes-->
			<link
				rel="shortcut icon"
				href="asset-corporate-portal/media/logo/logo-small.jpg"
			/>
			<!--end::Layout Themes SAS-->
			<link
				href="asset-corporate-portal/css/sas.bundle.css"
				rel="stylesheet"
				type="text/css"
			/>
			<link
				rel="stylesheet"
				href="assets/css/googlefont/publicsans.css"
			/>
			<link
				rel="stylesheet"
				href="assets/css/googlefont/roboto.css"
			/>
			<!-- slick -->
			<link
				rel="stylesheet"
				type="text/css"
				href="assets/css/slick/slick.css"
			/>
			<link
				rel="stylesheet"
				type="text/css"
				href="assets/css/slick/slick-theme.css"
			/>
			@css
		</head>
		<!--end::Head-->
		<!--begin::Body-->
		<body
			id="kt_body"
			class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading bg-white"
		>
			// htmx
			<script src="assets/js/htmx/htmx.min.js"></script>
			<!--start::Navbar Mobile-->
			<div id="kt_header_mobile" class="header-mobile align-items-center  header-mobile-fixed ">
				<!--begin::Logo-->
				<a href="index.html">
					<img alt="Logo" src="asset-corporate-portal/media/logo/logo.png" style="object-fit: contain;height: 4vh;"/>
				</a>
				<!--end::Logo-->
				<!--begin::Toolbar-->
				<div class="d-flex align-items-center">
					<!--begin::Aside Mobile Toggle-->
					<button class="btn p-0 burger-icon burger-icon-left" id="kt_aside_mobile_toggle">
						<span></span>
					</button>
					<!--end::Aside Mobile Toggle-->
					<!--begin::Topbar Mobile Toggle-->
					<button class="btn btn-hover-text-primary p-0 ml-2" id="kt_header_mobile_topbar_toggle">
						<span class="svg-icon svg-icon-xl">
							<!--begin::Svg Icon | path:/assets/media/svg/icons/General/User.svg-->
							<svg
								xmlns="http://www.w3.org/2000/svg"
								xmlns:xlink="http://www.w3.org/1999/xlink"
								width="24px"
								height="24px"
								viewBox="0 0 24 24"
								version="1.1"
							>
								<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
									<polygon points="0 0 24 0 24 24 0 24"></polygon>
									<path
										d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z"
										fill="#000000"
										fill-rule="nonzero"
										opacity="0.3"
									></path>
									<path
										d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z"
										fill="#000000"
										fill-rule="nonzero"
									></path>
								</g>
							</svg><!--end::Svg Icon-->
						</span>
					</button>
					<!--end::Topbar Mobile Toggle-->
				</div>
				<!--end::Toolbar-->
			</div>
			<!--start::Navbar Mobile-->
			<!--start::Navbar Laptop With Sidebar-->
			<div class="d-flex flex-column flex-root">
				<!--begin::Page-->
				<div class="d-flex flex-row flex-column-fluid page">
					<!--begin::Aside-->
					<div class="aside aside-left  aside-fixed  d-flex flex-column flex-row-auto" id="kt_aside">
						<!--begin::Brand-->
						<div class="brand flex-column-auto " id="kt_brand">
							<!--begin::Logo-->
							<a href="index.html" class="brand-logo" style="">
								<img alt="Logo" class="img-fluid" src="asset-corporate-portal/media/logo/logo.png"/>
							</a>
							<!--end::Logo-->
							<!--begin::Toggle-->
							<button class="brand-toggle btn btn-sm px-0" id="kt_aside_toggle">
								<span
									class="svg-icon svg-icon svg-icon-xl"
								>
									<!--begin::Svg Icon | path:/assets/media/svg/icons/Navigation/Angle-double-left.svg-->
									<svg
										xmlns="http://www.w3.org/2000/svg"
										xmlns:xlink="http://www.w3.org/1999/xlink"
										width="24px"
										height="24px"
										viewBox="0 0 24 24"
										version="1.1"
									>
										<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
											<polygon points="0 0 24 0 24 24 0 24"></polygon>
											<path
												d="M5.29288961,6.70710318 C4.90236532,6.31657888 4.90236532,5.68341391 5.29288961,5.29288961 C5.68341391,4.90236532 6.31657888,4.90236532 6.70710318,5.29288961 L12.7071032,11.2928896 C13.0856821,11.6714686 13.0989277,12.281055 12.7371505,12.675721 L7.23715054,18.675721 C6.86395813,19.08284 6.23139076,19.1103429 5.82427177,18.7371505 C5.41715278,18.3639581 5.38964985,17.7313908 5.76284226,17.3242718 L10.6158586,12.0300721 L5.29288961,6.70710318 Z"
												fill="#000000"
												fill-rule="nonzero"
												transform="translate(8.999997, 11.999999) scale(-1, 1) translate(-8.999997, -11.999999) "
											></path>
											<path
												d="M10.7071009,15.7071068 C10.3165766,16.0976311 9.68341162,16.0976311 9.29288733,15.7071068 C8.90236304,15.3165825 8.90236304,14.6834175 9.29288733,14.2928932 L15.2928873,8.29289322 C15.6714663,7.91431428 16.2810527,7.90106866 16.6757187,8.26284586 L22.6757187,13.7628459 C23.0828377,14.1360383 23.1103407,14.7686056 22.7371482,15.1757246 C22.3639558,15.5828436 21.7313885,15.6103465 21.3242695,15.2371541 L16.0300699,10.3841378 L10.7071009,15.7071068 Z"
												fill="#000000"
												fill-rule="nonzero"
												opacity="0.3"
												transform="translate(15.999997, 11.999999) scale(-1, 1) rotate(-270.000000) translate(-15.999997, -11.999999) "
											></path>
										</g>
									</svg><!--end::Svg Icon-->
								</span>
							</button>
							<!--end::Toolbar-->
						</div>
						<!--end::Brand-->
						<!--begin::Aside Menu-->
						@navbarmenu
						<!--end::Aside Menu-->
					</div>
					<!--end::Aside-->
					<!--begin::Wrapper-->
					<div class="d-flex flex-column flex-row-fluid wrapper" id="kt_wrapper">
						<!--begin::Header-->
						@navbaruser
						<!--end::Header-->
						<!--begin::Content-->
						<div class="container-fluid">
							// toast
							<div class="toast-top-right" id="container-system-notification" style="position: absolute; top: 1vh; right: 0vw; z-index: 999;">
								<!-- toast success -->
								<div
									id="notification-001"
									class="toast fade hide"
									role="alert"
									aria-live="assertive"
									aria-atomic="true"
								>
									<div class="toast-header bg-success text-white">
										<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
										<strong class="mr-auto">Success</strong>
										<small class="text-muted text-white">just now</small>
										<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
											<span aria-hidden="true">×</span>
										</button>
									</div>
									<div class="toast-body bg-success-transparent">
										This is a success toast.
									</div>
								</div>
							</div>
							// end toast
							{ children... }
						</div>
						<!--end::Content-->
					</div>
					<!--end::Wrapper-->
				</div>
				<!--end::Page-->
			</div>
			<!--end::Navbar Laptop With Sidebar-->
			@sidebaruserprofile
			<!--begin::Global Config(global config for global JS scripts)-->
			<script src="asset-corporate-portal/js/ktappsetting.js"></script>
			<!--end::Global Config-->
			<!--begin::Global Theme Bundle(used by all pages)-->
			<script src="assets/plugins/global/plugins.bundle.js"></script>
			<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
			<script src="assets/js/scripts.bundle.js"></script>
			<!--end::Global Theme Bundle-->
			<script src="assets/js/iconify/iconify.min.js"></script>
			// bootstrap datepicker
			<script src="assets/js/pages/crud/forms/widgets/bootstrap-datepicker.js"></script>
			@js
			<!--end::Page Scripts-->
		</body>
		<!--end::Body-->
	</html>
}
