{% extends "../../admin-njk/layouts/master.njk" %}

{% block csslib %}
	<link href='/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.css' rel='stylesheet' type='text/css'/>
{% endblock %}

{% block jslib %}
	<script src='/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.js'></script>
{% endblock %}

{% block content %}
	{% block title %}
		<title>Account Overview - {{browserTitle | upper()}} CMS</title>
	{% endblock %}

	<div class="d-flex flex-column flex-column-fluid">
		<div id="beaver_app_toolbar" class="app-toolbar py-3 py-lg-6">
			<div id="beaver_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
					<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Account Overview</h1>
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
						<li class="breadcrumb-item text-muted">
							<a class="text-muted text-hover-primary" >Dashboard</a>
						</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span>
						</li>
						<li class="breadcrumb-item text-muted">Account</li>
					</ul>
				</div>
				<!-- Other toolbar content -->
			</div>
		</div>
		<div id="beaver_app_content" class="app-content flex-column-fluid">
			<div id="beaver_app_content_container" class="app-container container-xxl">
				<div id="beaver_profile_details_view" class="card mb-5 mb-xl-10">
					<div class="card-header cursor-pointer">
						<div class="card-title m-0">
							<h3 class="fw-bold m-0">Profile Details</h3>
						</div>
						<div class="card-toolbar">
							<a class="btn btn-light btn-sm mx-1" href="/admin/admin-user/change-password">Change Password</a>
							<a class="btn btn-dark btn-sm" href="/admin/admin-user/update-profile">Update Profile</a>
						</div>
					</div>
					<div class="card-body p-9">
						<div class="row mb-7">
							<label class="col-lg-4 fw-semibold text-muted">Full Name</label>
							<div class="col-lg-8">
								<span class="fw-bold fs-6 text-gray-800">{{ userDetails.name }}</span>
							</div>
						</div>
						<div class="row mb-7">
							<label class="col-lg-4 fw-semibold text-muted">Role</label>
							<div class="col-lg-8 fv-row">
								<span class="fw-semibold text-gray-800 fs-6">{{ userDetails.role }}</span>
							</div>
						</div>
						<div class="row mb-7">
							<label class="col-lg-4 fw-semibold text-muted">
              					Email
							</label>
							<div class="col-lg-8 d-flex align-items-center">
								<span class="fw-bold fs-6 text-gray-800 me-2">{{ userDetails.email }}</span>
							</div>
						</div>
						<div class="row mb-7">
							<label class="col-lg-4 fw-semibold text-muted">Active</label>
							<div class="col-lg-8">
								{% if userDetails.active %}
									<span class="badge badge-light-success">Active</span>
								{% else %}
									<span class="badge badge-light-danger">Inactive</span>
								{% endif %}
							</div>
						</div>
						<!-- Other profile details content -->
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}