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

{{ define "title" }}Setting - Users{{ end }}
{{ define "extraheader" }}
{{ 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="{{ .URL.Configuration.UserAdd }}"
				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>User</th>
								<th>Role</th>
								<th>Status</th>
								<th>Tags</th>
								<th>Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>
									<div class="d-flex align-items-center">
										<img
											src="https://randomuser.me/api/portraits/men/32.jpg"
											alt="John Davis"
											class="tech-photo me-3"
										/>
										<div>
											<div class="fw-bold">John Davis</div>
										</div>
									</div>
								</td>
								<td><span class="badge bg-success">Tech I</span></td>
								<td>
									<span class="badge bg-success status-badge">Active</span>
								</td>
								<td></td>
								<td>
									<button class="btn btn-sm btn-warning" title="Deactivate">
										<i class="bi bi-person-x"></i>
									</button>
								</td>
							</tr>
							<tr>
								<td>
									<div class="d-flex align-items-center">
										<img
											src="https://randomuser.me/api/portraits/women/65.jpg"
											alt="Sarah Johnson"
											class="tech-photo me-3"
										/>
										<div>
											<div class="fw-bold">Sarah Johnson</div>
										</div>
									</div>
								</td>
								<td><span class="badge bg-success">Tech III</span></td>
								<td>
									<span class="badge bg-success status-badge">Active</span>
								</td>
								<td>
									<span class="badge bg-warrant">warrant service</span>
									<span class="badge bg-drone">drone pilot</span>
								</td>
								<td>
									<button class="btn btn-sm btn-warning" title="Deactivate">
										<i class="bi bi-person-x"></i>
									</button>
								</td>
							</tr>
							<tr>
								<td>
									<div class="d-flex align-items-center">
										<img
											src="https://randomuser.me/api/portraits/men/44.jpg"
											alt="Michael Chen"
											class="tech-photo me-3"
										/>
										<div>
											<div class="fw-bold">Michael Chen</div>
										</div>
									</div>
								</td>
								<td><span class="badge bg-success">Tech I</span></td>
								<td>
									<span class="badge bg-success status-badge">Active</span>
								</td>
								<td>
									<span class="badge bg-drone">drone pilot</span>
								</td>
								<td>
									<button class="btn btn-sm btn-warning" title="Deactivate">
										<i class="bi bi-person-x"></i>
									</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
{{ end }}