package components

import "portfolio-tracker/internal/model"

templ PageLayout(authenticated bool, username string, title string, content templ.Component, portfolios []model.Portfolio) {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="utf-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1"/>
			<title>{ title }</title>
			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/css/tabler.min.css"/>
			<style>
			html, body {
				height: 100%;
				width: 100%;
			}
			body {
				min-height: 100vh;
				width: 100vw;
				overflow-x: hidden;
			}
			.container-xl, .container-fluid {
				width: 100% !important;
				max-width: 100% !important;
				padding-left: 24px;
				padding-right: 24px;
			}
			.page-wrapper {
				margin-left: 220px;
				width: auto;
			}
			.card {
				width: 100%;
			}
			.dropdown-search {
				position: relative;
			}
			.dropdown-menu-search {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				z-index: 1000;
				background: #fff;
				border: 1px solid #ddd;
				border-radius: 0 0 .25rem .25rem;
				max-height: 300px;
				overflow-y: auto;
			}
			.dropdown-menu-search.show {
				display: block;
			}
			.dropdown-item-search {
				display: block;
				padding: .5rem 1rem;
				cursor: pointer;
			}
			.dropdown-item-search:hover {
				background: #f1f3f4;
			}
		</style>
		</head>
		<body>
			<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
			@Search()
			<div class="page">
				@Navigation(authenticated, portfolios)
				<div class="page-wrapper">
					@content
				</div>
			</div>
			@SearchJS()
			<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/js/tabler.min.js"></script>
		</body>
	</html>
}
