{% load static %}
<div class="card">
		<div class="card-header">
			<h4 class="card-title">My To Do Items</h4>
			<div class="clearfix">
				<a href="javascript:void(0);" class="text-primary me-2">View All</a>
				<a href="javascript:void(0);" class="text-black">+ Add To Do</a>
			</div>
		</div>
		<div class="card-body px-0 pt-0">
			<div class="list-group list-group-flush ic-draggable dropzoneContainer ic-scroll height440">
				<div class="list-group-item draggable p-3">
					<span class="text-warning d-block mb-2">
						<svg class="me-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M3.61051 15.3276H14.3978C15.5843 15.3276 16.329 14.0451 15.7395 13.0146L10.35 3.59085C9.75676 2.5536 8.26126 2.55285 7.66726 3.5901L2.26876 13.0139C1.67926 14.0444 2.42326 15.3276 3.61051 15.3276Z" stroke="var(--bs-warning)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M9.00189 10.0611V7.7361" stroke="var(--bs-warning)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M8.99625 12.375H9.00375" stroke="var(--bs-warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
						</svg>
						Latest to do's
					</span>
					<div class="d-flex justify-content-between flex-wrap">
						<div class="d-flex gap-3">
							<div class="draggable-handle">
								<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
									<rect width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
								</svg>
							</div>
							<div class="clearfix">
								<div class="form-check">
									<input class="form-check-input" type="checkbox" id="customCheckBox1">
									<label class="form-check-label text-black" for="customCheckBox1">Implement dark mode toggle</label>
								</div>
								<span>2023-12-26 07:15:00</span>
							</div>
						</div>
						<div class="clearfix">
							<div class="btn btn-square btn-danger light btn-sm">
								<i class="fa-regular fa-trash-can "></i>
							</div>
							<div class="btn btn-square btn-primary light btn-sm ms-1">
								<i class="fa fa-pen "></i>
							</div>
						</div>
					</div>
				</div>
				<div class="list-group-item draggable p-3">
					<span class="text-success d-block mb-2">
						<svg class="me-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M15 4.5L6.75 12.75L3 9" stroke="var(--bs-success)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						Latest finished to do's
					</span>
					<div class="d-flex justify-content-between flex-wrap">
						<div class="d-flex gap-3">
							<div class="draggable-handle">
								<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
									<rect width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
								</svg>
							</div>
							<div class="clearfix">
								<div class="form-check">
									<input class="form-check-input" type="checkbox" id="customCheckBox2">
									<label class="form-check-label text-black" for="customCheckBox2">Add translations for navbar</label>
								</div>
								<span>2023-12-26 07:15:00</span>
							</div>
						</div>
						<div class="clearfix">
							<div class="btn btn-square btn-danger light btn-sm">
								<i class="fa-regular fa-trash-can "></i>
							</div>
							<div class="btn btn-square btn-primary light btn-sm ms-1">
								<i class="fa fa-pen "></i>
							</div>
						</div>
					</div>
				</div>
				<div class="list-group-item draggable p-3">
					<div class="d-flex justify-content-between flex-wrap">
						<div class="d-flex gap-3">
							<div class="draggable-handle">
								<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
									<rect width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
								</svg>
							</div>
							<div class="clearfix">
								<div class="form-check">
									<input class="form-check-input" type="checkbox" id="customCheckBox3">
									<label class="form-check-label text-black" for="customCheckBox3">Fix header responsiveness issue</label>
								</div>
								<span>2023-12-26 07:15:00</span>
							</div>
						</div>
						<div class="clearfix">
							<div class="btn btn-square btn-danger light btn-sm">
								<i class="fa-regular fa-trash-can "></i>
							</div>
							<div class="btn btn-square btn-primary light btn-sm ms-1">
								<i class="fa fa-pen "></i>
							</div>
						</div>
					</div>
				</div>
				<div class="list-group-item draggable p-3">
					<div class="d-flex justify-content-between flex-wrap">
						<div class="d-flex gap-3">
							<div class="draggable-handle">
								<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
									<rect width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
								</svg>
							</div>
							<div class="clearfix">
								<div class="form-check">
									<input class="form-check-input" type="checkbox" id="customCheckBox4">
									<label class="form-check-label text-black" for="customCheckBox4">Test mobile view of login page</label>
								</div>
								<span>2023-12-26 07:15:00</span>
							</div>
						</div>
						<div class="clearfix">
							<div class="btn btn-square btn-danger light btn-sm">
								<i class="fa-regular fa-trash-can "></i>
							</div>
							<div class="btn btn-square btn-primary light btn-sm ms-1">
								<i class="fa fa-pen "></i>
							</div>
						</div>
					</div>
				</div>
				<div class="list-group-item draggable p-3">
					<div class="d-flex justify-content-between flex-wrap">
						<div class="d-flex gap-3">
							<div class="draggable-handle">
								<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
									<rect width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
									<rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
								</svg>
							</div>
							<div class="clearfix">
								<div class="form-check">
									<input class="form-check-input" type="checkbox" id="customCheckBox5">
									<label class="form-check-label text-black" for="customCheckBox5">Fix dashboard alignment issue</label>
								</div>
								<span>2023-12-26 07:15:00</span>
							</div>
						</div>
						<div class="clearfix">
							<div class="btn btn-square btn-danger light btn-sm">
								<i class="fa-regular fa-trash-can "></i>
							</div>
							<div class="btn btn-square btn-primary light btn-sm ms-1">
								<i class="fa fa-pen "></i>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>