package sidebaruserprofile

import "cpone/models"

templ Navbaruserprofile(dataUser models.User) {
	<div id="kt_quick_user" class="offcanvas offcanvas-right p-10">
		<!--begin::Header-->
		<div class="offcanvas-header d-flex align-items-center justify-content-between pb-5">
			<h3 class="font-weight-bold m-0 text-black">
				User Profile
				// <small class="text-muted font-size-sm ml-2">12 messages</small>
			</h3>
			<a href="#" class="btn btn-xs btn-icon btn-light btn-hover-primary" id="kt_quick_user_close">
				<i class="ki ki-close icon-xs text-muted"></i>
			</a>
		</div>
		<!--end::Header-->
		<!--begin::Content-->
		<div class="offcanvas-content pr-5 mr-n5">
			<!--begin::Header-->
			@ProfileHeader(dataUser)
			<!--end::Header-->
			<!--begin::Separator-->
			<div class="separator separator-dashed my-7"></div>
			<div class="navi mt-2">
				<a 
					class="btn btn-sm btn-light-primary font-weight-bolder py-2 px-5 block"
					style="width: 100%"
					data-toggle="modal"
					data-target="#modal-ganti-pass"
				>
					Change Password
				</a>
			</div>
			<div class="navi mt-2">
				<a 
					class="btn btn-sm btn-light-primary font-weight-bolder py-2 px-5 block"
					hx-get="/login/signout"
					hx-indicator=".logoutloading"
					style="width: 100%"
				>
					<span class="htmx-indicator spinner-border spinner-border-sm logoutloading" role="status" aria-hidden="true"></span>
					Sign Out
				</a>
			</div>
		</div>
		<!--end::Content-->
	</div>
	@SidebarForm()
}

templ ProfileHeader(dataUser models.User) {
	<div class="d-flex mt-5">
		<div class="symbol symbol-100 mr-5 p-2 bg-primary-transparent">
			// <div class="symbol-label" style="background-image:url('/assets/media/users/300_21.jpg')"></div>
			// <i class="symbol-badge bg-success"></i>
			<span class="iconify symbol-label bg-primary-transparent text-primary" data-icon="gravity-ui:person"></span>
		</div>
		<div class="d-flex flex-column">
			<a href="#" class="font-weight-bold font-size-h5 text-dark-75 text-hover-primary">
				{ dataUser.UserFullName }
			</a>
			<div class="text-muted mt-1">
				{ dataUser.UserPosition }
			</div>
		</div>
	</div>
}

templ NotificationCard() {
	<div class="d-flex align-items-center bg-light-warning rounded p-5 gutter-b">
		<span class="svg-icon svg-icon-warning mr-5">
			<span
				class="svg-icon svg-icon-lg"
			>
				<!--begin::Svg Icon | path:/assets/media/svg/icons/Home/Library.svg-->
				<span class="iconify" data-icon="material-symbols:notifications-active-outline-rounded"></span>
			</span>
		</span>
		<div class="d-flex flex-column flex-grow-1 mr-2">
			<a href="#" class="font-weight-normal text-dark-75 text-hover-primary font-size-lg mb-1">
				Another
				purpose persuade
			</a>
			<span class="text-muted font-size-sm">Due in 2 Days</span>
		</div>
	</div>
}
