{% extends "../../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 %}
	<!-- begin::Vendors Javascript(used by this page) -->
	<script src="/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.js"></script>
	<!-- end::Vendors Javascript -->

	<!-- end::Custom Javascript -->
	<script src="/cms-static/common/js/form-data-json.min.js"></script>
	<script src="/cms-static/common/js/es-form.js"></script>
{% endblock %}

{% block content %}

	<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">
						{{ 'Edit' if admin else 'Add' }} Admin
				</h1>
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
						<li class="breadcrumb-item text-muted">
							<a href="{{LANDING_URL}}" 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">Admin 
					<span class="bullet bg-gray-400 w-5px h-2px"></span>
						</li>
						<li class="breadcrumb-item text-muted">{{ 'Edit' if admin else 'New' }}</li>
					</ul>
				</div>
			</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 class="card mb-5 mb-xl-10">
					<div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#beaver_account_profile_details" aria-expanded="true" aria-controls="beaver_account_profile_details">
						<div class="card-title m-0">
							<h3 class="fw-bold m-0">Admin Form</h3>
						</div>
					</div>
					<div id="beaver_account_settings_profile_details">
						<form id="beaver_account_profile_details_form" class="form es-form" action="/admin/config/admin/save" data-redirect-url="/admin/config/admin" method="post" autocomplete="off">
							<input type="hidden" name="id" value="{{ admin._id }}">
							<div class="card-body border-top p-9">
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Name</label>
									<div class="col-lg-8">
										<div class="row">
											<div class="col-lg-12 fv-row">
												<input type="text" name="name" placeholder="Name" value="{{ admin.name }}" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
												<div class="fv-plugins-message-container invalid-feedback" id="field-error-name"></div>
											</div>
										</div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Role</label>
									<div class="col-lg-8 fv-row">
										<select name="role" data-placeholder="Select a role" class="form-select mb-2">
											<option value="super_admin" {{ 'selected' if admin.role == 'super_admin'}}>Super Admin</option>
											<option value="admin" {{ 'selected' if admin.role == 'admin'}}>Admin</option>
											<option value="editor" {{ 'selected' if admin.role == 'editor' }}>Editor</option>
											<option value="finance" {{ 'selected' if admin.role == 'finance'}}>Finance</option>
										</select>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Status</label>
									<div class="col-lg-8 fv-row">
										<select name="status" data-placeholder="Select Status" class="form-select mb-2">
											<option value="true" {{ 'selected' if admin.active }}>Active</option>
											<option value="false" {{ 'selected' if admin.active == false }}>In Active</option>
										</select>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Email</label>
									<div class="col-lg-8 fv-row">
										<input type="text" name="email" placeholder="Email" value="{{ admin.email }}" class="form-control form-control-lg form-control-solid">
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-email"></div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">
										<span class="required">Password</span>
										<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Current password should be enter to update profile details"></i>
									</label>
									<div class="col-lg-8 fv-row">
										<input type="password" name="password" placeholder="Password" value="" autocomplete="off" class="form-control form-control-lg form-control-solid">
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-password"></div>
									</div>
								</div>
							</div>
							<div class="card-footer d-flex justify-content-end py-6 px-9">
								<button id="beaver_account_profile_details_submit" class="btn btn-dark form-submit-btn" type="submit">
									<span class="preloader d-none">Updating</span>
									<span class="label">Save</span>
								</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}