@Layout = "backend-basic.php"
@Head{
	<title>Manage User Accounts</title>
	<script defer src="/uplift-assets/js/_external/popper.js"></script>
	<script type="module" src="/uplift-assets/js/user-accounts/UserAccounts.js"></script>
}
@Body{
	<backend-service-container>
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="card rounded shadow mb-4">
						<div class="card-header">
							<div class="d-flex justify-content-between align-items-center">
								<h2 class="h6 mb-0">
									User Accounts
								</h2>
								<button type="button" class="btn btn-success" id="new-user-modal-trigger-button">
									<i class="bi bi-person-plus-fill"></i>
									<span>Create a User</span>
								</button>
							</div>
						</div>
						<div class="card-body">
							<div class="d-flex justify-content-end mb-3">
								<form id="user-search-form">
									<div class="input-group">
										<span class="input-group-text">
											<i class="bi bi-search"></i>
										</span>
										<input type="text" id="user-search" name="query" class="form-control" placeholder="Search user accounts">
									</div>
								</form>
							</div>
							<div id="users-rows-headers" class="users-columns">
								<div class="username">
									<strong>Username</strong>
								</div>
								<div class="name">
									<strong>Name</strong>
								</div>
								<div class="role">
									<strong>Role</strong>
								</div>
								<div class="last-activity">
									<strong>Last Activity</strong>
								</div>
								<div class="management-buttons"></div>
							</div>
							<div id="users-loader" class="text-center">
								<div style="width:5rem; height:5rem;" class="spinner-border" role="status">
									<span class="visually-hidden">Loading...</span>
								</div>
							</div>
							<div id="users-rows-container"></div>
							<hr>
							<div class="d-flex justify-content-end">
								<pagination>
	<button class="prev-button" type="button">
		<i class="bi bi-caret-left-fill"></i>
		<span>Prev</span>
	</button>
	<form class="paginator-form">
		<input value="1" type="number" name="paginator-current-page" class="form-control form-control-sm">
		<div>
			<span>of <span class="paginator-max-pages">0</span></span>
		</div>
	</form>
	<button class="next-button" type="button">
		<span>Next</span>
		<i class="bi bi-caret-right-fill"></i>
	</button>
</pagination>							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</backend-service-container>

	<br />
<b>Warning</b>:  Undefined variable $viewScope in <b>/home/mountain/public_html/uplift-core/resources/views/user-accounts/modals/new-user-modal.php</b> on line <b>8</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on null in <b>/home/mountain/public_html/uplift-core/resources/views/user-accounts/modals/new-user-modal.php</b> on line <b>8</b><br />
<div id="new-user-modal" class="modal" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Add a User Account</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form id="new-user-form" autocomplete="off">
					<p>
						<span class="text-danger">*</span> denotes a required field
					</p>
					<hr>
					<div class="mb-3">
						<label for="new-account-username">Username <span class="text-danger">*</span></label>
						<input autocomplete="off" type="text" class="form-control" name="username" id="new-account-username" placeholder="E.g, david_S1999">
						<small>Must be unique - two accounts can't share the same username</small>
					</div>
					<div class="mb-3">
						<div class="container-fluid p-0">
							<div class="row">
								<div class="col-xl-6">
									<label for="new-account-first-name">First name <span class="text-danger">*</span></label>
									<input type="text" class="form-control" name="first-name" id="new-account-first-name" placeholder="">
								</div>
								<div class="col-xl-6">
									<label for="new-account-last-name">Last name <span class="text-danger">*</span></label>
									<input type="text" class="form-control" name="last-name" id="new-account-last-name" placeholder="">
								</div>
							</div>
						</div>
					</div>
					<div class="mb-3">
						<label for="new-account-email">Email</label>
						<input type="email" class="form-control" name="email" id="new-account-email" placeholder="E.g, example@example.com">
						<small>For notifications and account recovery</small>
					</div>
					<div class="mb-3">
						<label for="new-account-password">Password <span class="text-danger">*</span></label>
						<div class="input-group">
							<input autocomplete="offf" type="password" class="form-control" name="password" id="new-account-password">
							<span title="Show password" class="input-group-text" id="new-account-password-viewer-icon">
								<i class="bi bi-eye-fill"></i>
							</span>
						</div>
					</div>
					<div class="mb-3">
						<label for="new-account-role">Permission role <span class="text-danger">*</span></label>
						<select class="form-control" name="role" id="new-account-role">
							<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/mountain/public_html/uplift-core/resources/views/user-accounts/modals/new-user-modal.php</b> on line <b>60</b><br />
						</select>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button form="new-user-form" type="submit" class="btn btn-primary">
					<i class="bi bi-person-video2"></i>
					<span>Create User</span>
				</button>
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
					<span>Cancel</span>
				</button>
			</div>
		</div>
	</div>
</div>}