{% extends 'hexabox/elements/layouts/admin.html' %}
{% load static %}
        
{% block additional_css %}
{% endblock %}
		
{% block content %}
			<div class="container-fluid">
				<div class="row">

					<!-- Start - Email Template -->
					<div class="col-xl-12">
						<div class="card card-collapse">
							<div class="card-header">
								<h4 class="card-title"><i class="fa-sharp fa-solid fa-filter me-1 text-primary"></i> Filter</h4>
								<a class="collapse-indicator" data-bs-toggle="collapse" href="#collapseFilter" role="button" aria-expanded="false" aria-controls="collapseFilter">
									<i class="fa fa-angle-down"></i>
								</a>
							</div>
							<div class="collapsed collapse show" id="collapseFilter">
								<div class="card-body">
									<div class="row">
										<div class="col-xxl-3 col-lg-4 col-sm-6 mb-3 mb-xxl-0">
											<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Title">
										</div>
										<div class="col-xxl-3 col-lg-4 col-sm-6 mb-3 mb-xxl-0">
											<select class="selectpicker form-select">
												<option selected>Select Status</option>
												<option value="1">Published</option>
												<option value="2">Draft</option>
												<option value="3">Trash</option>
												<option value="4">Private</option>
												<option value="5">Pending</option>
											</select> 
										</div>
										<div class="col-xxl-3 col-lg-4 col-sm-6 mb-3 mb-xxl-0">
											<input class="form-control" type="text" value="Select Date.." id="defaultFlatpickr">
										</div>
										<div class="col-xxl-3 col-lg-12 col-sm-6">
											<button class="btn btn-primary me-2" title="Click here to Search" type="button">
												<i class="fa-sharp fa-solid fa-filter"></i>Filter
											</button>
											<button class="btn btn-danger light" title="Click here to remove filter" type="button">Remove Filter</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="mb-4">
							<a href="{% url 'hexabox:add-content' %}" class="btn btn-primary">New Email Template</a>
						</div>
						
						<div class="card card-collapse">
							<div class="card-header">
								<h4 class="card-title"><i class="fa-solid fa-file-lines me-1 text-primary"></i>Email Template</h4>
								<a class="collapse-indicator" data-bs-toggle="collapse" href="#collapseContactList" role="button" aria-expanded="false" aria-controls="collapseContactList">
									<i class="fa fa-angle-down"></i>
								</a>
							</div>
							<div class="collapsed collapse show" id="collapseContactList">
								<div class="card-body">
									<div class="table-responsive">
										<table class="table table-bordered table-striped">
											<thead>
												<tr>
													<th class="mw-80">S.No</th>
													<th class="mw-150">Title</th>
													<th class="mw-150">Status</th>
													<th class="mw-150">Modified</th>
													<th class="mw-150 text-end">Actions</th>
												</tr>
											</thead>
											<tbody class="text-nowrap">
												<tr>
													<td>1</td>
													<td>User Registration</td>
													<td> 
														<div class="form-check">
															<input class="form-check-input" type="checkbox" checked>
														</div>
													</td>
													<td>03 Feb, 2024</td>
													<td class="text-end">
														<a href="javascript:void(0);" class="btn btn-square btn-warning btn-sm">
															<i class="fa-solid fa-pen-to-square"></i>
														</a>
														<a href="javascript:void(0);" class="btn btn-square btn-danger btn-sm">
															<i class="fa-solid fa-trash"></i>
														</a>
													</td>
												</tr>
												<tr>
													<td>2</td>
													<td>User Forgot Password</td>
													<td> 
														<div class="form-check">
															<input class="form-check-input" type="checkbox" checked>
														</div>
													</td>
													<td>04 Feb, 2024</td>
													<td class="text-end">
														<a href="javascript:void(0);" class="btn btn-square btn-warning btn-sm">
															<i class="fa-solid fa-pen-to-square"></i>
														</a>
														<a href="javascript:void(0);" class="btn btn-square btn-danger btn-sm">
															<i class="fa-solid fa-trash"></i>
														</a>
													</td>
												</tr>
												<tr>
													<td>3</td>
													<td>User Activation</td>
													<td> 
														<div class="form-check">
															<input class="form-check-input" type="checkbox" checked>
														</div>
													</td>
													<td>05 Feb, 2024</td>
													<td class="text-end">
														<a href="javascript:void(0);" class="btn btn-square btn-warning btn-sm">
															<i class="fa-solid fa-pen-to-square"></i>
														</a>
														<a href="javascript:void(0);" class="btn btn-square btn-danger btn-sm">
															<i class="fa-solid fa-trash"></i>
														</a>
													</td>
												</tr>
												<tr>
													<td>4</td>
													<td>User Login</td>
													<td> 
														<div class="form-check">
															<input class="form-check-input" type="checkbox" checked>
														</div>
													</td>
													<td>06 Feb, 2024</td>
													<td class="text-end">
														<a href="javascript:void(0);" class="btn btn-square btn-warning btn-sm">
															<i class="fa-solid fa-pen-to-square"></i>
														</a>
														<a href="javascript:void(0);" class="btn btn-square btn-danger btn-sm">
															<i class="fa-solid fa-trash"></i>
														</a>
													</td>
												</tr>
												<tr>
													<td>5</td>
													<td>User Account Locked</td>
													<td> 
														<div class="form-check">
															<input class="form-check-input" type="checkbox" checked>
														</div>
													</td>
													<td>07 Feb, 2024</td>
													<td class="text-end">
														<a href="javascript:void(0);" class="btn btn-square btn-warning btn-sm">
															<i class="fa-solid fa-pen-to-square"></i>
														</a>
														<a href="javascript:void(0);" class="btn btn-square btn-danger btn-sm">
															<i class="fa-solid fa-trash"></i>
														</a>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<div class="d-flex align-items-center gap-3 justify-content-xl-between flex-wrap justify-content-start justify-content-xl-center">
										<small>Page 1 of 5, showing 2 records out of 8 total, starting on record 1, ending on 2</small>
										<nav aria-label="Page navigation">
											<ul class="pagination mb-2 mb-sm-0">
												<li class="page-item"><a class="page-link" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
												<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
												<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
												<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
												<li class="page-item"><a class="page-link " href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
											</ul>
										</nav>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- End - Email Template -->

				</div>
			
			</div>

{% endblock %}