	<!doctype html>
	<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<title>DweebUI - Account</title>
		<!-- CSS files -->
		<link href="/css/tabler.min.css" rel="stylesheet"/>
		<link href="/css/demo.min.css" rel="stylesheet"/>
		<style>
			@import url('/fonts/inter.css');
			:root {
			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
			}
			body {
			  font-feature-settings: "cv03", "cv04", "cv11";
			}
		  </style>
	</head>
	<body >
		<div class="page">
			<!-- Navbar -->
			<%- include('partials/navbar.html') %>
			<div class="page-wrapper">
				<!-- Page header -->
				<div class="page-header d-print-none">
					<div class="container-xl">
						<div class="row g-2 align-items-center">
						<div class="col">
							<h2 class="page-title">
							Settings
							</h2>
						</div>
						</div>
					</div>
				</div>
				<!-- Page body -->
				<div class="page-body">
					<div class="container-xl">
						<div class="card">
							<div class="row g-0">
								
								<%- include('partials/sidebar.html') %>
								
								<div class="col d-flex flex-column">
								<div class="card-body">
									<h2 class="mb-4">My Account</h2>
									<h3 class="card-title">Profile Details</h3>
									<div class="row align-items-center">
										<div class="col-auto"><span class="avatar avatar-xl"><%- avatar %></span>
										</div>
										<div class="col-auto"><a href="#" class="btn">
											Change avatar
											</a>
										</div>
										<div class="col-auto"><a href="#" class="btn btn-ghost-danger">
											Delete avatar
											</a>
										</div>
									</div>
									<h3 class="card-title mt-4">Profile</h3>
									<div class="row g-3">
										<div class="col-md">
											<div class="form-label">Full Name</div>
											<input type="text" class="form-control" value="<%= name %>" readonly="<%= name %>">
										</div>
										<div class="col-md">
											<div class="form-label">First Name</div>
											<input type="text" class="form-control" value="<%= first_name %>" readonly="<%= first_name %>">
										</div>
										<div class="col-md">
											<div class="form-label">Last Name</div>
											<input type="text" class="form-control" value="<%= last_name %>" readonly="<%= last_name %>">
										</div>
									</div>
									<h3 class="card-title mt-4">Email</h3>
									<p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
									<div>
										<div class="row g-2">
											<div class="col-auto">
												<input type="text" class="form-control w-auto" value="<%= email %>" readonly="<%= email %>">
											</div>
											<div class="col-auto">
												<a href="#" class="btn">Change</a>
											</div>
										</div>
									</div>
									<h3 class="card-title mt-4">Password</h3>
									<p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
									<div>
										<a href="#" class="btn">
											Set new password
										</a>
									</div>
									<h3 class="card-title mt-4">Public profile</h3>
									<p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find
									you.</p>
									<div>
										<label class="form-check form-switch form-switch-lg">
											<input class="form-check-input" type="checkbox" >
											<span class="form-check-label form-check-label-on">You're currently visible</span>
											<span class="form-check-label form-check-label-off">You're
											currently invisible</span>
										</label>
									</div>
								</div>
								<div class="card-footer bg-transparent mt-auto">
									<div class="btn-list justify-content-end">
									<a href="#" class="btn">
										Cancel
									</a>
									<a href="#" class="btn btn-primary">
										Submit
									</a>
									</div>
								</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<%- include('partials/footer.html') %>
			</div>
		</div>
		<!-- Libs JS -->
		<!-- Tabler Core -->
		<script src="/js/tabler.min.js" defer></script>
		<script src="/js/demo.min.js" defer></script>
	</body>
</html>