{{ template "sync/layout/base.html" . }}

{{ define "title" }}Dash{{ end }}
{{ define "extraheader" }}
	<style>
		.form-check-input.switch-lg {
			width: 3em;
			height: 1.5em;
		}
		.status-badge {
			width: 100px;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container-fluid p-4">
		<div class="d-flex justify-content-between align-items-center mb-4">
			<h1 class="mb-0">User Management</h1>
			<a
				href="{{ .URLs.SettingUserAdd }}"
				class="btn btn-primary"
				id="addUserBtn"
			>
				<i class="bi bi-plus-circle me-2"></i>Add New User
			</a>
		</div>

		<div class="card">
			<div class="card-body">
				<div class="table-responsive">
					<table class="table table-striped table-hover">
						<thead class="table-light">
							<tr>
								<th>Full Name</th>
								<th>Email Address</th>
								<th>Username</th>
								<th>Role</th>
								<th>Serve Warrants</th>
								<th>Status</th>
								<th>Last Login</th>
								<th>Actions</th>
							</tr>
						</thead>
						<tbody>
							<!-- Sample user data -->
							<tr>
								<td>John Doe</td>
								<td>john.doe@example.com</td>
								<td>johndoe</td>
								<td>
									<select class="form-select form-select-sm">
										<option>Lead</option>
										<option selected>Technician</option>
										<option>Administrator</option>
									</select>
								</td>
								<td>
									<div class="form-check form-switch">
										<input
											class="form-check-input switch-lg"
											type="checkbox"
											checked
										/>
									</div>
								</td>
								<td>
									<span class="badge bg-success status-badge">Active</span>
								</td>
								<td>2023-06-15 09:45 AM</td>
								<td>
									<button class="btn btn-sm btn-warning" title="Deactivate">
										<i class="bi bi-person-x"></i>
									</button>
								</td>
							</tr>
							<tr>
								<td>Jane Smith</td>
								<td>jane.smith@example.com</td>
								<td>janesmith</td>
								<td>
									<select class="form-select form-select-sm">
										<option selected>Lead</option>
										<option>Technician</option>
										<option>Administrator</option>
									</select>
								</td>
								<td>
									<div class="form-check form-switch">
										<input class="form-check-input switch-lg" type="checkbox" />
									</div>
								</td>
								<td>
									<span class="badge bg-success status-badge">Active</span>
								</td>
								<td>2023-06-17 14:20 PM</td>
								<td>
									<button class="btn btn-sm btn-warning" title="Deactivate">
										<i class="bi bi-person-x"></i>
									</button>
								</td>
							</tr>
							<tr>
								<td>Robert Johnson</td>
								<td>robert.j@example.com</td>
								<td>robertj</td>
								<td>
									<select class="form-select form-select-sm">
										<option>Lead</option>
										<option>Technician</option>
										<option selected>Administrator</option>
									</select>
								</td>
								<td>
									<div class="form-check form-switch">
										<input
											class="form-check-input switch-lg"
											type="checkbox"
											checked
										/>
									</div>
								</td>
								<td>
									<span class="badge bg-secondary status-badge"
										>Deactivated</span
									>
								</td>
								<td>2023-06-10 11:30 AM</td>
								<td>
									<button class="btn btn-sm btn-success" title="Activate">
										<i class="bi bi-person-check"></i>
									</button>
								</td>
							</tr>
							<tr>
								<td>Emily Wilson</td>
								<td>emily.w@example.com</td>
								<td>emilyw</td>
								<td>
									<select class="form-select form-select-sm">
										<option>Lead</option>
										<option selected>Technician</option>
										<option>Administrator</option>
									</select>
								</td>
								<td>
									<div class="form-check form-switch">
										<input class="form-check-input switch-lg" type="checkbox" />
									</div>
								</td>
								<td>
									<span class="badge bg-warning text-dark status-badge"
										>Invited</span
									>
								</td>
								<td>Never</td>
								<td>
									<button class="btn btn-sm btn-info" title="Resend Invitation">
										<i class="bi bi-envelope"></i>
									</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
{{ end }}