{% extends 'hexabox/elements/layouts/admin.html' %}
{% load static %}
        
{% block additional_css %}

{% endblock %}		
{% block content %}

			<div class="container-fluid">
				<div class="d-flex justify-content-between align-items-center mb-4">
					<h4 class="mb-0">Users</h4>
					<div class="d-flex align-items-center">
						<ul class="nav nav-pills nav-pills-square-sm gap-2" id="pills-tab" role="tablist">
							<li class="nav-item" role="presentation">
								<button class="nav-link" id="pills-colm-tab" data-bs-toggle="pill" data-bs-target="#pills-colm" type="button" role="tab" aria-selected="false">
									<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
										<line x1="8" y1="6" x2="21" y2="6"></line>
										<line x1="8" y1="12" x2="21" y2="12"></line>
										<line x1="8" y1="18" x2="21" y2="18"></line>
										<line x1="3" y1="6" x2="3.01" y2="6"></line>
										<line x1="3" y1="12" x2="3.01" y2="12"></line>
										<line x1="3" y1="18" x2="3.01" y2="18"></line>
									</svg>
								</button>
							</li>
							<li class="nav-item" role="presentation">
								<button class="nav-link active" id="pills-week-tab" data-bs-toggle="pill" data-bs-target="#pills-list" type="button" role="tab" aria-selected="true">
									<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid">
										<rect x="3" y="3" width="7" height="7"></rect>
										<rect x="14" y="3" width="7" height="7"></rect>
										<rect x="14" y="14" width="7" height="7"></rect>
										<rect x="3" y="14" width="7" height="7"></rect>
									</svg>
								</button>
							</li>
						</ul>
						<a class="btn btn-primary btn-sm ms-2" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">+ Add User</a>
					</div>
				</div>
					
				<div class="tab-content" id="pills-tabContent">
					<div class="tab-pane fade show active" id="pills-list" role="tabpanel">
						<div class="row">

							<!-- Start - User 1 -->
							<div class="col-xxl-3 col-xl-4 col-sm-6">
								<div class="card">
									<div class="card-body text-center">
										<div class="position-relative d-inline-block mx-auto mb-2">
											<img src="{% static 'hexabox/images/avatar/middle/avatar1.webp' %}" class="avatar avatar-xl rounded-circle border border-4 border-light" alt="">
											<span class="text-success position-absolute bottom-0 end-0 border border-2 border-white rounded-circle mb-lg-3 mb-2 me-2 fa fa-circle fs-8"></span>
										</div>
										<div class="clearfix mb-3">
											<h4 class="mb-0">Olivia Grace</h4>
											<p class="mb-0">demo11@gmail.com</p>
										</div>
										<ul class="d-flex justify-content-center gap-4 mb-3">
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">175</span>
												<span>Posts</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">50</span>
												<span>Followers</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">30</span>
												<span>Following</span>
											</li>
										</ul>
										<ul class="mb-4 text-center">
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Position: </span>
												<span>Software Engineer</span>
											</li>
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Joining Date: </span>
												<span>15 Feb 2023</span>
											</li>
										</ul>
										<div class="d-flex gap-2">
											<a href="{% url 'hexabox:chat' %}" class="btn btn-primary w-100">Message</a>
											<a href="javascript:void(0)" class="btn btn-secondary w-100">Following</a>
										</div>	
									</div>
								</div>
							</div>
							<!-- End - User 1 -->

							<!-- Start - User 2 -->
							<div class="col-xxl-3 col-xl-4 col-sm-6">
								<div class="card">
									<div class="card-body text-center">
										<div class="position-relative d-inline-block mx-auto mb-2">
											<img src="{% static 'hexabox/images/avatar/middle/avatar2.webp' %}" class="avatar avatar-xl rounded-circle border border-4 border-light" alt="">
											<span class="text-danger position-absolute bottom-0 end-0 border border-2 border-white rounded-circle mb-lg-3 mb-2 me-2 fa fa-circle fs-8"></span>
										</div>
										<div class="clearfix mb-3">
											<h4 class="mb-0">Oliver Noah</h4>
											<p class="mb-0">demo11@gmail.com</p>
										</div>
										<ul class="d-flex justify-content-center gap-4 mb-3">
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">172</span>
												<span>Posts</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">47</span>
												<span>Followers</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">20</span>
												<span>Following</span>
											</li>
										</ul>
										<ul class="mb-4 text-center">
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Position: </span>
												<span>Web Doveloper</span>
											</li>
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Joining Date: </span>
												<span>12 Jan 2023</span>
											</li>
										</ul>
										<div class="d-flex gap-2">
											<a href="{% url 'hexabox:chat' %}" class="btn btn-primary w-100">Message</a>
											<a href="javascript:void(0)" class="btn btn-secondary w-100">Following</a>
										</div>	
									</div>
								</div>
							</div>
							<!-- End - User 2 -->

							<!-- Start - User 3 -->
							<div class="col-xxl-3 col-xl-4 col-sm-6">
								<div class="card">
									<div class="card-body text-center">
										<div class="position-relative d-inline-block mx-auto mb-2">
											<img src="{% static 'hexabox/images/avatar/middle/avatar4.webp' %}" class="avatar avatar-xl rounded-circle border border-4 border-light" alt="">
											<span class="text-success position-absolute bottom-0 end-0 border border-2 border-white rounded-circle mb-lg-3 mb-2 me-2 fa fa-circle fs-8"></span>
										</div>
										<div class="clearfix mb-3">
											<h4 class="mb-0">Elijah James</h4>
											<p class="mb-0">demo11@gmail.com</p>
										</div>
										<ul class="d-flex justify-content-center gap-4 mb-3">
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">180</span>
												<span>Posts</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">90</span>
												<span>Followers</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">40</span>
												<span>Following</span>
											</li>
										</ul>
										<ul class="mb-4 text-center">
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Position: </span>
												<span>App Doveloper</span>
											</li>
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Joining Date: </span>
												<span>17 March 2023</span>
											</li>
										</ul>
										<div class="d-flex gap-2">
											<a href="{% url 'hexabox:chat' %}" class="btn btn-primary w-100">Message</a>
											<a href="javascript:void(0)" class="btn btn-secondary w-100">Following</a>
										</div>	
									</div>
								</div>
							</div>
							<!-- End - User 3 -->

							<!-- Start - User 4 -->
							<div class="col-xxl-3 col-xl-4 col-sm-6">
								<div class="card">
									<div class="card-body text-center">
										<div class="position-relative d-inline-block mx-auto mb-2">
											<img src="{% static 'hexabox/images/avatar/middle/avatar3.webp' %}" class="avatar avatar-xl rounded-circle border border-4 border-light" alt="">
											<span class="text-danger position-absolute bottom-0 end-0 border border-2 border-white rounded-circle mb-lg-3 mb-2 me-2 fa fa-circle fs-8"></span>
										</div>
										<div class="clearfix mb-3">
											<h4 class="mb-0">Charlotte Mae</h4>
											<p class="mb-0">demo11@gmail.com</p>
										</div>
										<ul class="d-flex justify-content-center gap-4 mb-3">
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">1500</span>
												<span>Posts</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">130</span>
												<span>Followers</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">10</span>
												<span>Following</span>
											</li>
										</ul>
										<ul class="mb-4 text-center">
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Position: </span>
												<span>App Doveloper</span>
											</li>
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Joining Date: </span>
												<span>17 March 2023</span>
											</li>
										</ul>
										<div class="d-flex gap-2">
											<a href="{% url 'hexabox:chat' %}" class="btn btn-primary w-100">Message</a>
											<a href="javascript:void(0)" class="btn btn-secondary w-100">Following</a>
										</div>	
									</div>
								</div>
							</div>
							<!-- End - User 4 -->

							<!-- Start - User 5 -->
							<div class="col-xxl-3 col-xl-4 col-sm-6">
								<div class="card">
									<div class="card-body text-center">
										<div class="position-relative d-inline-block mx-auto mb-2">
											<img src="{% static 'hexabox/images/avatar/middle/avatar10.webp' %}" class="avatar avatar-xl rounded-circle border border-4 border-light" alt="">
											<span class="text-success position-absolute bottom-0 end-0 border border-2 border-white rounded-circle mb-lg-3 mb-2 me-2 fa fa-circle fs-8"></span>
										</div>
										<div class="clearfix mb-3">
											<h4 class="mb-0">Henry Mason</h4>
											<p class="mb-0">demo11@gmail.com</p>
										</div>
										<ul class="d-flex justify-content-center gap-4 mb-3">
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">450</span>
												<span>Posts</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">782</span>
												<span>Followers</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">585</span>
												<span>Following</span>
											</li>
										</ul>
										<ul class="mb-4 text-center">
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Position: </span>
												<span>Mobile Doveloper</span>
											</li>
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Joining Date: </span>
												<span>17 March 2023</span>
											</li>
										</ul>
										<div class="d-flex gap-2">
											<a href="{% url 'hexabox:chat' %}" class="btn btn-primary w-100">Message</a>
											<a href="javascript:void(0)" class="btn btn-secondary w-100">Following</a>
										</div>	
									</div>
								</div>
							</div>
							<!-- End - User 5 -->

							<!-- Start - User 6 -->
							<div class="col-xxl-3 col-xl-4 col-sm-6">
								<div class="card">
									<div class="card-body text-center">
										<div class="position-relative d-inline-block mx-auto mb-2">
											<img src="{% static 'hexabox/images/avatar/middle/avatar5.webp' %}" class="avatar avatar-xl rounded-circle border border-4 border-light" alt="">
											<span class="text-danger position-absolute bottom-0 end-0 border border-2 border-white rounded-circle mb-lg-3 mb-2 me-2 fa fa-circle fs-8"></span>
										</div>
										<div class="clearfix mb-3">
											<h4 class="mb-0">Emily Kate</h4>
											<p class="mb-0">demo11@gmail.com</p>
										</div>
										<ul class="d-flex justify-content-center gap-4 mb-3">
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">175</span>
												<span>Posts</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">50</span>
												<span>Followers</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">30</span>
												<span>Following</span>
											</li>
										</ul>
										<ul class="mb-4 text-center">
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Position: </span>
												<span>Software Engineer</span>
											</li>
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Joining Date: </span>
												<span>15 Feb 2023</span>
											</li>
										</ul>
										<div class="d-flex gap-2">
											<a href="{% url 'hexabox:chat' %}" class="btn btn-primary w-100">Message</a>
											<a href="javascript:void(0)" class="btn btn-secondary w-100">Following</a>
										</div>	
									</div>
								</div>
							</div>
							<!-- End - User 6 -->

							<!-- Start - User 7 -->
							<div class="col-xxl-3 col-xl-4 col-sm-6">
								<div class="card">
									<div class="card-body text-center">
										<div class="position-relative d-inline-block mx-auto mb-2">
											<img src="{% static 'hexabox/images/avatar/middle/avatar7.webp' %}" class="avatar avatar-xl rounded-circle border border-4 border-light" alt="">
											<span class="text-danger position-absolute bottom-0 end-0 border border-2 border-white rounded-circle mb-lg-3 mb-2 me-2 fa fa-circle fs-8"></span>
										</div>
										<div class="clearfix mb-3">
											<h4 class="mb-0">Abigail Faith</h4>
											<p class="mb-0">demo11@gmail.com</p>
										</div>
										<ul class="d-flex justify-content-center gap-4 mb-3">
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">172</span>
												<span>Posts</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">47</span>
												<span>Followers</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">20</span>
												<span>Following</span>
											</li>
										</ul>
										<ul class="mb-4 text-center">
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Position: </span>
												<span>Web Doveloper</span>
											</li>
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Joining Date: </span>
												<span>12 Jan 2023</span>
											</li>
										</ul>
										<div class="d-flex gap-2">
											<a href="{% url 'hexabox:chat' %}" class="btn btn-primary w-100">Message</a>
											<a href="javascript:void(0)" class="btn btn-secondary w-100">Following</a>
										</div>	
									</div>
								</div>
							</div>
							<!-- End - User 7 -->

							<!-- Start - User 8 -->
							<div class="col-xxl-3 col-xl-4 col-sm-6">
								<div class="card">
									<div class="card-body text-center">
										<div class="position-relative d-inline-block mx-auto mb-2">
											<img src="{% static 'hexabox/images/avatar/middle/avatar8.webp' %}" class="avatar avatar-xl rounded-circle border border-4 border-light" alt="">
											<span class="text-success position-absolute bottom-0 end-0 border border-2 border-white rounded-circle mb-lg-3 mb-2 me-2 fa fa-circle fs-8"></span>
										</div>
										<div class="clearfix mb-3">
											<h4 class="mb-0">Samuel Owen</h4>
											<p class="mb-0">demo11@gmail.com</p>
										</div>
										<ul class="d-flex justify-content-center gap-4 mb-3">
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">180</span>
												<span>Posts</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">90</span>
												<span>Followers</span>
											</li>
											<li class="d-grid">
												<span class="fs-4 fw-semibold text-primary">40</span>
												<span>Following</span>
											</li>
										</ul>
										<ul class="mb-4 text-center">
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Position: </span>
												<span>App Doveloper</span>
											</li>
											<li class="my-1 d-flex gap-2 justify-content-center">
												<span class="text-primary">Joining Date: </span>
												<span>17 March 2023</span>
											</li>
										</ul>
										<div class="d-flex gap-2">
											<a href="{% url 'hexabox:chat' %}" class="btn btn-primary w-100">Message</a>
											<a href="javascript:void(0)" class="btn btn-secondary w-100">Following</a>
										</div>	
									</div>
								</div>
							</div>
							<!-- End - User 8 -->

						</div>
					</div>
					<div class="tab-pane fade" id="pills-colm" role="tabpanel" aria-labelledby="pills-colm-tab">

						<!-- Start - User Table -->
						<div class="card h-auto">
							<div class="card-body table-card-body pt-0 px-0 pb-1">
								<div class="table-responsive check-wrapper">
									<table id="userTable" class="table table-bottom-borderless table-sm mb-0">
										<thead class="table-light">
											<tr>
												<th class="sorting-disabled">
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-all" required="">
													</div>
												</th>
												<th class="mw-200">User</th>
												<th class="mw-100">Email</th>
												<th class="mw-150">Position</th>
												<th class="mw-150">Date Of Joining</th>
												<th class="mw-150">Last Status</th>
												<th class="mw-100">Action</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar9.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Olivia Grace</h6>
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>Software Engineer</td>
												<td>12 Jan 2023</td>
												<td>Monday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar1.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Amelia Rose</h6>	
													</div>
												</td>
												<td>jr@gmail.com</td>
												<td>Software Engineer</td>
												<td>15 Jan 2023</td>
												<td>Monday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar3.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Charlotte Mae</h6>	
													</div>
												</td>
												<td>je@gmail.com</td>
												<td>Software Engineer</td>
												<td>18 Jan 2023</td>
												<td>Friday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar5.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Isabella Claire</h6>	
													</div>
												</td>
												<td>mj@gmail.com</td>
												<td>Software Engineer</td>
												<td>30 Jan 2023</td>
												<td>Monday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar7.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Sophia Jane</h6>	
													</div>
												</td>
												<td>mj@gmail.com</td>
												<td>Software Engineer</td>
												<td>30 Jan 2023</td>
												<td>Monday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar2.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Oliver Noah</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>Software Engineer</td>
												<td>12 Jan 2023</td>
												<td>Monday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar4.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Elijah James</h6>	
													</div>
												</td>
												<td>sj@gmail.com</td>
												<td>Software Engineer</td>
												<td>12 Aug 2023</td>
												<td>Sunday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar6.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Liam Risher</h6>	
													</div>
												</td>
												<td>bj@gmail.com</td>
												<td>Software Engineer</td>
												<td>18 Feb 2023</td>
												<td>Sunday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar8.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Ethan Cole</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>App Doveloper</td>
												<td>18 Mar 2023</td>
												<td>Monday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar10.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Henry Mason</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>Software Engineer</td>
												<td>12 Jan 2023</td>
												<td>Monday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar1.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Harper Joy</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>App Doveloper</td>
												<td>18 Mar 2023</td>
												<td>Sunday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar3.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Emily Kate</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>Web Designer</td>
												<td>25 Jan 2023</td>
												<td>Tuesday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar5.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Abigail Faith</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>App Doveloper</td>
												<td>18 Mar 2023</td>
												<td>Friday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar7.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Scarlett Elise</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>Web Designer</td>
												<td>25 Jan 2023</td>
												<td>Tuesday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar9.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Evelyn Hope</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>Software Engineer</td>
												<td>12 Jan 2023</td>
												<td>Thu</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar10.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">William Jasper</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>App Doveloper</td>
												<td>18 Mar 2023</td>
												<td>Monday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar1.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Evelyn Hope</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>Web Designer</td>
												<td>25 Jan 2023</td>
												<td>Tuesday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar2.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Jackson Miles</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>App Doveloper</td>
												<td>18 Mar 2023</td>
												<td>Monday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/middle/avatar4.webp' %}" class="avatar avatar-xs rounded-circle" alt="">
														<h6 class="mb-0 ms-2">Alexander Finn</h6>	
													</div>
												</td>
												<td>demo@gmail.com</td>
												<td>Web Designer</td>
												<td>25 Jan 2023</td>
												<td>Tuesday</td>
												<td>
													<div class="dropdown">
														<button type="button" class="btn btn-sm btn-primary light btn-square" data-bs-toggle="dropdown">
															<i class="fa-solid fa-ellipsis"></i>
														</button>
														<ul class="dropdown-menu dropdown-menu-end">
															<li><a class="dropdown-item" href="javascript:void(0);">Edit</a></li>
															<li><a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a></li>
														</ul>
													</div>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
						   </div>
						</div>
						<!-- End - User Table -->

					</div>
				</div>
				
			</div>

		<!-- Start - Add User Modal -->
		<div class="offcanvas offcanvas-end custom-offcanvas" tabindex="-1" id="offcanvasExample">
			<div class="offcanvas-header pb-0">
				<h2 class="modal-title fs-5" id="#gridSystemModal">Add User</h2>
				<button type="button" class="btn btn-square btn-danger light btn-sm ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
					<i class="fa-solid fa-xmark"></i>
				</button>
			</div>
			<div class="offcanvas-body">
				<div class="mb-3">
					<label class="form-label">Profile Picture</label>
					<form action="#" class="dropzone">
						<div class="dropzone-content">
							<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M27.1666 26.6667L20.4999 20L13.8333 26.6667" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
								<path d="M20.5 20V35" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
								<path d="M34.4833 30.6501C36.1088 29.7638 37.393 28.3615 38.1331 26.6644C38.8731 24.9673 39.027 23.0721 38.5703 21.2779C38.1136 19.4836 37.0724 17.8926 35.6111 16.7558C34.1497 15.619 32.3514 15.0013 30.4999 15.0001H28.3999C27.8955 13.0488 26.9552 11.2373 25.6498 9.70171C24.3445 8.16614 22.708 6.94647 20.8634 6.1344C19.0189 5.32233 17.0142 4.93899 15.0001 5.01319C12.9861 5.0874 11.015 5.61722 9.23523 6.56283C7.45541 7.50844 5.91312 8.84523 4.7243 10.4727C3.53549 12.1002 2.73108 13.9759 2.37157 15.959C2.01205 17.9421 2.10678 19.9809 2.64862 21.9222C3.19047 23.8634 4.16534 25.6565 5.49994 27.1667" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
								<path d="M27.1666 26.6667L20.4999 20L13.8333 26.6667" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
							</svg>
							<div class="fallback">																
								<input name="file" type="file" multiple>
							</div>
						</div>
					</form>	
				</div>
				<form>
					<div class="row">
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput1" class="form-label">Employee ID <span class="text-danger">*</span></label>
							<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="">
						</div>	
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput2" class="form-label">Employee Name<span class="text-danger">*</span></label>
							<input type="text" class="form-control" id="exampleFormControlInput2" placeholder="">
						</div>	
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput3" class="form-label">Employee Email<span class="text-danger">*</span></label>
							<input type="email" class="form-control" id="exampleFormControlInput3" placeholder="">
						</div>
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput4" class="form-label">Password<span class="text-danger">*</span></label>
							<input type="password" autocomplete="current-password" class="form-control" id="exampleFormControlInput4" placeholder="">
						</div>
						<div class="col-xl-6 mb-3">
							<label class="form-label">Designation<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="html">Software Engineer</option>
								<option value="css">Civil Engineer</option>
								<option value="javascript">Web Doveloper</option>
							</select>
						</div>	
						<div class="col-xl-6 mb-3">
							<label class="form-label">Department<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="html">Software</option>
								<option value="css">Doit</option>
								<option value="javascript">Designing</option>
							</select>
						</div>
						<div class="col-xl-6 mb-3">
							<label class="form-label">Country<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="html">Ind</option>
								<option value="css">USA</option>
								<option value="javascript">UK</option>
							</select>
						</div>
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput88" class="form-label">Mobile<span class="text-danger">*</span></label>
							<input type="number" class="form-control type-number" id="exampleFormControlInput88" placeholder="">
						</div>
						<div class="col-xl-6 mb-3">
							<label class="form-label">Gender<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="html">Male</option>
								<option value="css">Female</option>
								<option value="javascript">Other</option>
							</select>
						</div>
						<div class="col-xl-6 mb-3">
							<label for="defaultFlatpickr" class="form-label">Joining Date<span class="text-danger">*</span></label>
							<input type="text" class="form-control bs-datepicker" id="defaultFlatpickr">
						</div>
						<div class="col-xl-6 mb-3">
							<label for="defaultFlatpickr2" class="form-label">Date of Birth<span class="text-danger">*</span></label>
							<input type="text" class="form-control bs-datepicker" id="defaultFlatpickr2">
						</div>
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput10" class="form-label">Reporting To<span class="text-danger">*</span></label>
							<input type="text" class="form-control" id="exampleFormControlInput10" placeholder="">
						</div>		
						<div class="col-xl-6 mb-3">
							<label class="form-label">Language Select<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="html">English</option>
								<option value="css">Hindi</option>
								<option value="javascript">Canada</option>
							</select>
						</div>
						<div class="col-xl-6 mb-3">
							<label class="form-label">User Role<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="html">Parmanent</option>
								<option value="css">Parttime</option>
								<option value="javascript">Per Hours</option>
							</select>
						</div>
						<div class="col-xl-12 mb-3">
							<label class="form-label">Address<span class="text-danger">*</span></label>
							<textarea rows="2" class="form-control"></textarea>
						</div>
						<div class="col-xl-12 mb-3">
							<label class="form-label">About<span class="text-danger">*</span></label>
							<textarea rows="3" class="form-control"></textarea>
						</div>	
					</div>
					<div class="clearfix">
						<button class="btn btn-danger light">Cancel</button>
						<button class="btn btn-primary ms-2">Submit</button>
					</div>
				</form>
			</div>
		</div>
		<!-- End - Add User Modal -->		

{% endblock %}