{{template "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}}