package layout

templ DashboardLayout(
    title string, 
    css templ.Component, 
    js templ.Component,
    navbaruser templ.Component,
    sidebaruser templ.Component,
) {
	<!DOCTYPE html>
    <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">
            <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::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="mb-24 mt-8" style="padding-left: 10vw; padding-right: 10vw;">
                <div class="align-item-center">
					@navbaruser
				</div>
                <div class="mt-16">
					// 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>				
                    { children... }
                </div>
            </div>
            <!--end::Navbar Laptop With Sidebar-->
            @sidebaruser
			<!--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>
    </html>
}