{% 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">
					<h5 class="mb-0">Tasks Summary</h5>
					<div class="d-flex align-items-center">
						<a href="{% url 'hexabox:task-summary' %}" class="btn btn-square btn-secondary btn-sm">
							<svg width="20" height="20" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M8.50032 3H2.66699V8.83333H8.50032V3Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
								<path d="M17.6668 3H11.8335V8.83333H17.6668V3Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
								<path d="M17.6668 12.1667H11.8335V18H17.6668V12.1667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
								<path d="M8.50032 12.1667H2.66699V18H8.50032V12.1667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</a>
						<a href="javascript:void(0)" class="btn btn-primary btn-sm ms-2" data-bs-toggle="modal" data-bs-target="#exampleModal">+ Add Task</a>
					</div>
				</div>
				
				<div class="row">

					<!-- Start - Task Summary -->
					<div class="col-xl-12">
						<div class="card">
							<div class="card-body overflow-hidden">
								<div class="row gx-5 gy-3">
									<div class="col-xl-2 col-sm-4 col-6 border-end">
										<div class="d-flex align-items-center">
											<h2 class="text-primary my-0 fs-3 me-2">8</h2> 
											<span class="text-secondary fw-medium fs-5">Not Started</span>
										</div>
										<span>Tasks assigne</span>
									</div>
									<div class="col-xl-2 col-sm-4 col-6 border-end">
										<div class="d-flex align-items-center ">
											<h2 class="text-purple my-0 fs-3 me-2">7</h2>
											<span class="text-secondary fw-medium fs-5">In Progress</span>
										</div>
										<span>Tasks assigne</span>
									</div>
									<div class="col-xl-2 col-sm-4 col-6 border-end">
										<div class="d-flex align-items-center">
											<h2 class="text-warning my-0 fs-3 me-2">13</h2>
											<span class="text-secondary fw-medium fs-5" >Testing</span>
										</div>
										<span>Tasks assigne</span>
									</div>
									<div class="col-xl-2 col-sm-4 col-6 border-end">
										<div class="d-flex align-items-center">
											<h2 class="text-danger my-0 fs-3 me-2">11</h2>
											<span class="text-secondary fw-medium fs-5">Awaiting</span>
										</div>	
										<span>Tasks assigne</span>
									</div>
									<div class="col-xl-2 col-sm-4 col-6 border-end">
										<div class="d-flex align-items-center">
											<h2 class="text-success my-0 fs-3 me-2">21</h2>
											<span class="text-secondary fw-medium fs-5">Complete</span>
										</div>
										<span>Tasks assigne</span>
									</div>
									<div class="col-xl-2 col-sm-4 col-6">
										<div class="d-flex align-items-center">	
											<h2 class="text-danger my-0 fs-3 me-2">16</h2>
											<span class="text-secondary fw-medium fs-5">pending</span>
										</div>	
										<span>Tasks assigne</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- Start - Task Summary -->
					
					<!-- Start - Task Table -->
					<div class="col-xl-12">
						<div class="card">
							<div class="card-header border-0">
								<h4 class="card-title">Task</h4>
								<div id="tableEmpoloyeesTBL1ExcelBTN"></div>
							</div>
							<div class="card-body table-card-body px-0 pt-0 pb-1">
								<div class="table-responsive check-wrapper">
									<table id="taskTable" class="table table-bottom-borderless">
										<thead class="table-light text-nowrap">
											<tr>
												<th class="mw-50 sorting-disabled">
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-all" required="">
													</div>
												</th>
												<th class="mw-50">#</th>
												<th class="mw-200">Name</th>
												<th class="mw-100">Status</th>
												<th class="mw-100">Start Date</th>
												<th class="mw-100">End Date</th>
												<th class="mw-120">Assigned To</th>
												<th class="mw-100">Tags</th>
												<th class="mw-100 text-end">Priority</th>
											</tr>
										</thead>
										<tbody class="text-nowrap">
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>01</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">Create Frontend WordPress</h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
															Complete
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
													</div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar7.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar8.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar9.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-primary" data-bs-toggle="dropdown" aria-expanded="false">
															Medium
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>02</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">HTML To React Convert </h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
															Testing
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
													</div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar4.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar5.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar6.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
															High
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>03</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">HTML template Issue Complete</h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-danger" data-bs-toggle="dropdown" aria-expanded="false">
															Pending
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
													</div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar1.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar3.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar4.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar2.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
															High
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>04</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">Complete Admin Dashboard Project</h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-info" data-bs-toggle="dropdown" aria-expanded="false">
															In Progress
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
													</div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar8.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar6.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar9.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar7.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar10.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-danger" data-bs-toggle="dropdown" aria-expanded="false">
															Low
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>05</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">Create Frontend WordPress</h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
															Testing
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
													</div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar8.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar7.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar9.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-primary" data-bs-toggle="dropdown" aria-expanded="false">
															Medium
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>01</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">Create Frontend WordPress</h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
															Complete
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
													</div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar7.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar8.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar9.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-primary" data-bs-toggle="dropdown" aria-expanded="false">
															Medium
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>02</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">HTML To React Convert </h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
															Testing
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
													</div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar4.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar5.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar6.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
															High
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>06</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">HTML To React Convert </h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
															Testing
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
												  </div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar4.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar5.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar6.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
															High
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>07</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">HTML template Issue Complete</h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-danger" data-bs-toggle="dropdown" aria-expanded="false">
															Pending
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
												  </div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar1.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar4.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar6.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar8.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light  ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
															High
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>08</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">Complete Admin Dashboard Project</h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-info" data-bs-toggle="dropdown" aria-expanded="false">
															In Progress
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
													</div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar6.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar7.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar8.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar9.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar10.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-danger" data-bs-toggle="dropdown" aria-expanded="false">
															Low
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>09</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">Create Frontend WordPress</h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
															Complete
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
												  </div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar1.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar2.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar3.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar4.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar5.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-info" data-bs-toggle="dropdown" aria-expanded="false">
															Medium
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</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>10</td>
												<td>
													<div class="clearfix">
														<h6 class="mb-1">HTML To React Convert </h6>
														<span>INV-100023456</span>
													</div>
												</td>
												<td>
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
															Testing
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
															<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
														</ul>
													</div>
												</td>
												<td>06 Feb 2023</td>
												<td>19 Feb 2023</td>
												<td>
													<div class="avatar-list avatar-list-stacked">
														<img src="{% static 'hexabox/images/avatar/small/avatar8.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar3.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<img src="{% static 'hexabox/images/avatar/small/avatar6.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
													</div>
												</td>	
												<td>
													<span class="badge-sm rounded badge-primary light me-1">Issue</span>
													<span class="badge-sm rounded badge-primary light  ms-1">HTML</span>
												</td>
												<td class="text-end">
													<div class="dropdown dropdown-badge dropdown-sm">
														<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
															High
														</button>
														<ul class="dropdown-menu dropdown-badge-menu">
															<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
															<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
															<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
														</ul>
													</div>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!-- End - Task Table -->

				</div>
			
			</div>

		<!-- Start - Add Task Modal -->
		<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">Add Task</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-xl-12 mb-3">
								<label for="exampleFormControlInput1" class="form-label">Title<span class="text-danger">*</span></label>
								<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Title Name">
							</div>
							<div class="col-xl-6 mb-3">
								<label for="exampleFormControlInput2" class="form-label">Contacts<span class="text-danger">*</span></label>
								<input type="number" class="form-control type-number" id="exampleFormControlInput2" placeholder="987 654 3210">
							</div>
							<div class="col-xl-6 mb-3">
								<label class="form-label">Priority<span class="text-danger">*</span></label>
								<select class="selectpicker form-select">
									<option data-display="Select">priority</option>
									<option value="Hight">Hight</option>
									<option value="Medium">Medium</option>
									<option value="Low">Low</option>
								</select>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary">Save changes</button>
					</div>
				</div>
			</div>
		</div>
		<!-- End - Add Task Modal -->


{% endblock %}

{% block additional_js %}

{% endblock %}