{% extends 'hexabox/elements/layouts/admin.html' %}

        
{% block additional_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='hexabox/vendor/flatpickr/dist/flatpickr.min.css')}}">
{% endblock %}		
{% block content %}

			<div class="container-fluid">
				<div class="row">

					<!-- Start - Total Completed -->
					<div class="col-xl-3 col-sm-6">
						<div class="card">
							<div class="card-body d-flex align-items-center">
								<div class="avatar avatar-lg avatar-success rounded-circle border-0">
									<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" clip-rule="evenodd" d="M22.9715 29.3168C15.7197 29.3168 9.52686 30.4132 9.52686 34.8043C9.52686 39.1953 15.6804 40.331 22.9715 40.331C30.2233 40.331 36.4144 39.2328 36.4144 34.8435C36.4144 30.4543 30.2626 29.3168 22.9715 29.3168Z" stroke="var(--bs-success)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<path fill-rule="evenodd" clip-rule="evenodd" d="M22.9714 23.0537C27.7304 23.0537 31.5875 19.1948 31.5875 14.4359C31.5875 9.67694 27.7304 5.81979 22.9714 5.81979C18.2125 5.81979 14.3536 9.67694 14.3536 14.4359C14.3375 19.1787 18.1696 23.0377 22.9107 23.0537H22.9714Z" stroke="var(--bs-success)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="ms-3">
									<h2 class="text-success mb-1">24</h2>
									<span class="fw-semibold text-secondary">Total Completed</span>
								</div>
							</div>
						</div>
					</div>
					<!-- End - Total Completed -->

					<!-- Start - Total In Progress -->
					<div class="col-xl-3 col-sm-6">
						<div class="card">
							<div class="card-body">
								<div class="d-flex align-items-center">
									<div class="avatar avatar-lg avatar-info rounded-circle border-0">
										<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path fill-rule="evenodd" clip-rule="evenodd" d="M32.8961 26.5849C34.1612 26.5849 35.223 27.629 35.0296 28.8783C33.8947 36.2283 27.6026 41.6855 20.0138 41.6855C11.6178 41.6855 4.8125 34.8803 4.8125 26.4862C4.8125 19.5704 10.0664 13.1283 15.9816 11.6717C17.2526 11.3579 18.5553 12.252 18.5553 13.5605C18.5553 22.4263 18.8533 24.7197 20.5368 25.9671C22.2204 27.2145 24.2 26.5849 32.8961 26.5849Z" stroke="var(--bs-info)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M41.1733 19.2019C41.2739 13.5059 34.2772 4.32428 25.7509 4.48217C25.0877 4.49402 24.5568 5.04665 24.5272 5.70783C24.3121 10.3914 24.6022 16.4605 24.764 19.2118C24.8134 20.0684 25.4864 20.7414 26.341 20.7907C29.1693 20.9526 35.4594 21.1736 40.0759 20.4749C40.7035 20.3802 41.1634 19.8355 41.1733 19.2019Z" stroke="var(--bs-info)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
									</div>
									<div class="total-projects ms-3">
										<h2 class="text-info mb-1">12</h2> 
										<span class="fw-semibold text-secondary">Total In Progress</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- End - Total In Progress -->

					<!-- Start - Total Testing -->
					<div class="col-xl-3 col-sm-6">
						<div class="card">
							<div class="card-body">
								<div class="d-flex align-items-center">
									<div class="avatar avatar-lg avatar-warning rounded-circle border-0">
										<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path fill-rule="evenodd" clip-rule="evenodd" d="M22.9717 41.0539C22.9717 41.0539 37.3567 36.6983 37.3567 24.6908C37.3567 12.6814 37.878 11.7439 36.723 10.5889C35.5699 9.43391 24.858 5.69891 22.9717 5.69891C21.0855 5.69891 10.3736 9.43391 9.21863 10.5889C8.0655 11.7439 8.58675 12.6814 8.58675 24.6908C8.58675 36.6983 22.9717 41.0539 22.9717 41.0539Z" stroke="var(--bs-warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<path d="M26.4945 26.4642L19.4482 19.4179" stroke="var(--bs-warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<path d="M19.4487 26.4642L26.495 19.4179" stroke="var(--bs-warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
									</div>
									<div class="total-projects ms-3">
										<h2 class="text-warning mb-1">07</h2>
										<span class="fw-semibold text-secondary">Total Testing</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- End - Total Testing -->

					<!-- Start - Total Pending -->
					<div class="col-xl-3 col-sm-6">
						<div class="card">
							<div class="card-body">
								<div class="d-flex align-items-center">
									<div class="avatar avatar-lg avatar-danger rounded-circle border-0">
										<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path d="M34.0396 20.974C36.6552 20.6065 38.6689 18.364 38.6746 15.6471C38.6746 12.9696 36.7227 10.7496 34.1633 10.3296" stroke="var(--bs-danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<path d="M37.4912 27.262C40.0243 27.6407 41.7925 28.5276 41.7925 30.3557C41.7925 31.6139 40.96 32.4314 39.6137 32.9451" stroke="var(--bs-danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7879 28.0373C16.7616 28.0373 11.6147 28.9504 11.6147 32.5973C11.6147 36.2423 16.7297 37.1817 22.7879 37.1817C28.8141 37.1817 33.9591 36.2779 33.9591 32.6292C33.9591 28.9804 28.846 28.0373 22.7879 28.0373Z" stroke="var(--bs-danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7876 22.8325C26.742 22.8325 29.9483 19.6281 29.9483 15.6719C29.9483 11.7175 26.742 8.51123 22.7876 8.51123C18.8333 8.51123 15.627 11.7175 15.627 15.6719C15.612 19.6131 18.7939 22.8194 22.7351 22.8325H22.7876Z" stroke="var(--bs-danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<path d="M11.5344 20.974C8.91691 20.6065 6.90504 18.364 6.89941 15.6471C6.89941 12.9696 8.85129 10.7496 11.4107 10.3296" stroke="var(--bs-danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<path d="M8.0825 27.262C5.54937 27.6407 3.78125 28.5276 3.78125 30.3557C3.78125 31.6139 4.61375 32.4314 5.96 32.9451" stroke="var(--bs-danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
									</div>
									<div class="total-projects ms-3">
										<h2 class="text-danger mb-1">05</h2> 
										<span class="fw-semibold text-secondary">Total Pending</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- End - Total Pending -->

				</div>
				
				<!-- Start - Projects -->
				<div class="d-flex justify-content-between align-items-center mb-4">
					<h5 class="mb-0">Projects</h5>
					<div class="d-flex align-items-center">
						<a href="/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 data-bs-toggle="offcanvas" href="#addTaskmodal" role="button" aria-controls="addTaskmodal" class="btn btn-primary btn-sm ms-2">+ Add Task</a>
					</div>
				</div>
				<!-- End - Projects -->
				
				<div class="row">
				
					<!-- Start - Project 1 -->
					<div class="col-xxl-3 col-xl-4 col-md-6">
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0 card-title"># 1 . Multimedia Platform AD.</h5>
							</div>
							<div class="card-body">
								<div class="clearfix d-flex">
									<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar1.webp')}}" class="avatar avatar-sm rounded-circle me-2" alt="">
									<div class="clearfix">
										<h6 class="mb-0 fw-semibold">Olivia Grace</h6>
										<span class="small">06 Feb 2023</span>	
									</div>	
								</div>
								<p class="my-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<div class="clearfix">
									<h6 class="mb-1 fw-medium">Team</h6>
									<div class="avatar-list avatar-list-stacked">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar1.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar3.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar4.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar2.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
									</div>
								</div>
								<div class="mt-3">
									<div class="d-flex justify-content-between">
										<span>Project Complete</span>
										<span>60%</span>
									</div>
									<div class="progress mt-2">
										<div class="progress-bar bg-purple" style="width:60%;" role="progressbar"></div>
									</div>
								</div>
							</div>
							<div class="card-footer d-flex justify-content-between flex-wrap">
								<p class="mb-0 fw-medium">Due <span class="text-purple">: 2023-06-02</span></p>
								<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>
							</div>
						</div>
					</div>
					<!-- End - Project 1 -->
					
					<!-- Start - Project 2 -->
					<div class="col-xxl-3 col-xl-4 col-md-6">
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0 card-title"># 2 .business Platform AD.</h5>
							</div>
							<div class="card-body">
								<div class="clearfix d-flex">
									<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar7.webp')}}" class="avatar avatar-sm rounded-circle me-2" alt="">
									<div class="clearfix">
										<h6 class="mb-0 fw-semibold">Charlotte Mae</h6>
										<span class="small">06 Feb 2023</span>	
									</div>	
								</div>
								<p class="my-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<div class="clearfix">
									<h6 class="mb-1 fw-medium">Team</h6>
									<div class="avatar-list avatar-list-stacked">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar1.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar3.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar4.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar2.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
									</div>
								</div>
								<div class="mt-3">
									<div class="d-flex justify-content-between">
										<span>Project Complete</span>
										<span>69%</span>
									</div>
									<div class="progress mt-2">
										<div class="progress-bar bg-danger" style="width:69%;" role="progressbar"></div>
									</div>
								</div>
							</div>
							<div class="card-footer d-flex justify-content-between flex-wrap">
								<p class="mb-0 fw-medium">Due <span class="text-purple">: 2023-06-02</span></p>
								<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>
							</div>
						</div>
					</div>
					<!-- End - Project 2 -->
					
					<!-- Start - Project 3 -->
					<div class="col-xxl-3 col-xl-4 col-md-6">
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0 card-title"># 3 . Multimedia Platform AD.</h5>
							</div>
							<div class="card-body">
								<div class="clearfix d-flex">
									<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar2.webp')}}" class="avatar avatar-sm rounded-circle me-2" alt="">
									<div class="clearfix">
										<h6 class="mb-0 fw-semibold">Oliver Noah</h6>
										<span class="small">06 Feb 2023</span>	
									</div>	
								</div>
								<p class="my-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<div>
									<h6 class="mb-1 fw-medium">Team</h6>
									<div class="avatar-list avatar-list-stacked">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar1.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar3.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar4.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar2.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
									</div>
								</div>
								<div class="mt-3">
									<div class="d-flex justify-content-between">
										<span>Project Complete</span>
										<span>75%</span>
									</div>
									<div class="progress mt-2">
										<div class="progress-bar bg-purple" style="width:75%;" role="progressbar"></div>
									</div>
								</div>
							</div>
							<div class="card-footer d-flex justify-content-between flex-wrap">
								<p class="mb-0 fw-medium">Due <span class="text-purple">: 2023-06-02</span></p>
								<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>
							</div>
						</div>
					</div>
					<!-- End - Project 3 -->
					
					<!-- Start - Project 4 -->
					<div class="col-xxl-3 col-xl-4 col-md-6">
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0 card-title"># 4 . Advertising Platform AD.</h5>
							</div>
							<div class="card-body">
								<div class="clearfix d-flex">
									<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar3.webp')}}" class="avatar avatar-sm rounded-circle me-2" alt="">
									<div class="clearfix">
										<h6 class="mb-0 fw-semibold">Isabella Claire</h6>
										<span class="small">06 Feb 2023</span>	
									</div>	
								</div>
								<p class="my-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<div>
									<h6 class="mb-1 fw-medium">Team</h6>
									<div class="avatar-list avatar-list-stacked">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar1.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar3.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar4.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar2.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
									</div>
								</div>
								<div class="mt-3">
									<div class="d-flex justify-content-between">
										<span>Project Complete</span>
										<span>92%</span>
									</div>
									<div class="progress mt-2">
										<div class="progress-bar bg-danger" style="width:92%;" role="progressbar"></div>
									</div>
								</div>
							</div>
							<div class="card-footer d-flex justify-content-between flex-wrap">
								<p class="mb-0 fw-medium">Due <span class="text-purple">: 2023-06-02</span></p>
								<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>
							</div>
						</div>
					</div>
					<!-- End - Project 4 -->
					
					<!-- Start - Project 5 -->
					<div class="col-xxl-3 col-xl-4 col-md-6">
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0 card-title"># 5 . Business Platform AD.</h5>
							</div>
							<div class="card-body">
								<div class="clearfix d-flex">
									<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar4.webp')}}" class="avatar avatar-sm rounded-circle me-2" alt="">
									<div class="clearfix">
										<h6 class="mb-0 fw-semibold">Liam Risher</h6>
										<span class="small">06 Feb 2023</span>	
									</div>	
								</div>
								<p class="my-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<div>
									<h6 class="mb-1 fw-medium">Team</h6>
									<div class="avatar-list avatar-list-stacked">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar1.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar3.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar4.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar2.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
									</div>
								</div>
								<div class="mt-3">
									<div class="d-flex justify-content-between">
										<span>Project Complete</span>
										<span>68%</span>
									</div>
									<div class="progress mt-2">
										<div class="progress-bar bg-danger" style="width:68%;" role="progressbar"></div>
									</div>
								</div>
							</div>
							<div class="card-footer d-flex justify-content-between flex-wrap">
								<p class="mb-0 fw-medium">Due <span class="text-purple">: 2023-06-02</span></p>
								<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>
							</div>
						</div>
					</div>
					<!-- End - Project 5 -->
					
					<!-- Start - Project 6 -->
					<div class="col-xxl-3 col-xl-4 col-md-6">
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0 card-title"># 6 . Advertising Platform AD.</h5>
							</div>
							<div class="card-body">
								<div class="clearfix d-flex">
									<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar5.webp')}}" class="avatar avatar-sm rounded-circle me-2" alt="">
									<div class="clearfix">
										<h6 class="mb-0 fw-semibold">Harper Joy</h6>
										<span class="small">06 Feb 2023</span>	
									</div>	
								</div>
								<p class="my-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<div>
									<h6 class="mb-1 fw-medium">Team</h6>
									<div class="avatar-list avatar-list-stacked">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar1.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar3.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar4.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar2.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
									</div>
								</div>
								<div class="mt-3">
									<div class="d-flex justify-content-between">
										<span>Project Complete</span>
										<span>68%</span>
									</div>
									<div class="progress mt-2">
										<div class="progress-bar bg-danger" style="width:68%;" role="progressbar"></div>
									</div>
								</div>
							</div>
							<div class="card-footer d-flex justify-content-between flex-wrap">
								<p class="mb-0 fw-medium">Due <span class="text-purple">: 2023-06-02</span></p>
								<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>
							</div>
						</div>
					</div>
					<!-- End - Project 6 -->
					
					<!-- Start - Project 7 -->
					<div class="col-xxl-3 col-xl-4 col-md-6">
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0 card-title"># 7 . Maltimedia Platform AD.</h5>
							</div>
							<div class="card-body">
								<div class="clearfix d-flex">
									<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar6.webp')}}" class="avatar avatar-sm rounded-circle me-2" alt="">
									<div class="clearfix">
										<h6 class="mb-0 fw-semibold">William Jasper</h6>
										<span class="small">06 Feb 2023</span>	
									</div>	
								</div>
								<p class="my-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<div>
									<h6 class="mb-1 fw-medium">Team</h6>
									<div class="avatar-list avatar-list-stacked">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar1.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar3.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar4.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar2.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
									</div>
								</div>
								<div class="mt-3">
									<div class="d-flex justify-content-between">
										<span>Project Complete</span>
										<span>86%</span>
									</div>
									<div class="progress mt-2">
										<div class="progress-bar bg-purple" style="width:86%;" role="progressbar"></div>
									</div>
								</div>
							</div>
							<div class="card-footer d-flex justify-content-between flex-wrap">
								<p class="mb-0 fw-medium">Due <span class="text-purple">: 2023-06-02</span></p>
								<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>
							</div>
						</div>
					</div>
					<!-- End - Project 7 -->
					
					<!-- Start - Project 8 -->
					<div class="col-xxl-3 col-xl-4 col-md-6">
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0 card-title"># 8 . Advertising Platform AD.</h5>
							</div>
							<div class="card-body">
								<div class="clearfix d-flex">
									<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar8.webp')}}" class="avatar avatar-sm rounded-circle me-2" alt="">
									<div class="clearfix">
										<h6 class="mb-0 fw-semibold">Alexander Finn</h6>
										<span class="small">06 Feb 2023</span>	
									</div>	
								</div>
								<p class="my-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
								<div>
									<h6 class="mb-1 fw-medium">Team</h6>
									<div class="avatar-list avatar-list-stacked">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar1.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar3.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar4.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										<img src="{{ url_for('static', filename='hexabox/images/avatar/small/avatar2.webp')}}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
									</div>
								</div>
								<div class="mt-3">
									<div class="d-flex justify-content-between">
										<span>Project Complete</span>
										<span>65%</span>
									</div>
									<div class="progress mt-2">
										<div class="progress-bar bg-danger" style="width:65%;" role="progressbar"></div>
									</div>
								</div>
							</div>
							<div class="card-footer d-flex justify-content-between flex-wrap">
								<p class="mb-0 fw-medium">Due <span class="text-purple">: 2023-06-02</span></p>
								<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>
							</div>
						</div>
					</div>
					<!-- End - Project 8 -->
				
				</div>
			
			</div>
		<!-- Start - Modal Add New Task -->
		<div class="offcanvas offcanvas-end custom-offcanvas" tabindex="-1" id="addTaskmodal">
			<div class="offcanvas-header pb-0">
				<h2 class="modal-title fs-5" id="#gridSystemModal1">Add New Task</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">
				<form class="row">
					<div class="col-xl-6 mb-3">
						<label for="exampleFormControlInputfirst" class="form-label">Title<span class="text-danger">*</span></label>
						<input type="text" class="form-control" id="exampleFormControlInputfirst" placeholder="Title">
					</div>	
					<div class="col-xl-6 mb-3">
						<label class="form-label">Project<span class="text-danger">*</span></label>
						<select class="selectpicker form-select">
							<option data-display="Select">Project</option>
							<option value="html">HTML</option>
							<option value="css">CSS</option>
							<option value="javascript">JavaScript</option>
						</select>
					</div>	
					<div class="col-xl-6 mb-3">
						<label for="defaultFlatpickr" class="form-label">Start 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">End Date<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 class="form-label">Estimated Hour<span class="text-danger">*</span></label>
						<input type="text" class="form-control bs-datepicker" value="09:30" id="timeFlatpickr">
					</div>
					<div class="col-xl-6 mb-3">
						<label class="form-label">Status<span class="text-danger">*</span></label>
						<select class="selectpicker form-select">
							<option data-display="Select">Status</option>
							<option value="In Progess">In Progess</option>
							<option value="Pending">Pending</option>
							<option value="Completed">Completed</option>
						</select>
					</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 class="col-xl-6 mb-3">
						<label class="form-label">Category<span class="text-danger">*</span></label>
						<select class="selectpicker form-select">
							<option data-display="Select">Category</option>
							<option value="Designing">Designing</option>
							<option value="Development">Development</option>
							<option value="react developer">React Developer</option>
						</select>
					</div>
					<div class="col-xl-6 mb-3">
						<label class="form-label">Permission<span class="text-danger">*</span></label>
						<select class="selectpicker form-select">
							<option data-display="Select">Permission</option>
							<option value="Public">Public</option>
							<option value="Private">Private</option>
						</select>
					</div>
					<div class="col-xl-6 mb-3">
						<label class="form-label">Deadline add<span class="text-danger">*</span></label>
						<select class="selectpicker form-select">
							<option data-display="Select">Deadline</option>
							<option value="Yes">Yes</option>
							<option value="No">No</option>
						</select>
					</div>
					<div class="col-xl-6 mb-3">
						<label class="form-label">Assigned to<span class="text-danger">*</span></label>
						<select class="selectpicker form-select">
							<option data-display="Select">Assigned</option>
							<option value="Bernard">Bernard</option>
							<option value="Sergey Brin">Sergey Brin</option>
							<option value="Larry Ellison">Larry Ellison</option>
						</select>
					</div>
					<div class="col-xl-6 mb-3">
						<label class="form-label">Responsible Person<span class="text-danger">*</span></label>
						<input name='tagify' class="form-control basic-tagify" value='James, Harry'>
					</div>
					<div class="col-xl-12 mb-3">
						<label class="form-label">Description<span class="text-danger">*</span></label>
						<textarea rows="3" class="form-control"></textarea>
					</div>
					<div class="col-xl-12 mb-3">
						<label class="form-label">Summary<span class="text-danger">*</span></label>
						<textarea rows="3" class="form-control"></textarea>
					</div>
					<div class="col-xl-12">					
						<button class="btn btn-danger light">Cancel</button>
						<button class="btn btn-primary ms-2">Submit</button>
					</div>
				</form>
			</div>
		</div>
		<!-- End - Modal Add New Task -->

{% endblock %}

{% block additional_js %}
<!--  Script For Flatpickr  --> 
<script src="{{ url_for('static', filename='hexabox/vendor/flatpickr/dist/flatpickr.min.js')}}"></script>
<script src="{{ url_for('static', filename='hexabox/vendor/flatpickr/dist/l10n/ru.js')}}"></script>
<script src="{{ url_for('static', filename='hexabox/js/plugins-init/flatpickr-init.js')}}"></script>
{% endblock %}