<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{layout}">

<th:block layout:fragment="pagetitle">
	<!--page title-->
	<div th:replace="partials/title-meta :: title-meta('Candidate Lists View')"></div>
</th:block>

<head>
</head>

<body>
	<div layout:fragment="content">
		<div th:replace="partials/page-title :: page-title('List View','Candidate Lists')"></div>

		<div class="row g-4 mb-4">
			<div class="col-sm-auto">
				<div>
					<a href="#!" class="btn btn-primary"><i class="ri-add-line align-bottom me-1"></i> Add Candidate</a>
				</div>
			</div>
			<div class="col-sm">
				<div class="d-md-flex justify-content-sm-end gap-2">
					<div class="search-box ms-md-2 flex-shrink-0 mb-3 mb-md-0">
						<input type="text" class="form-control" id="searchJob" autocomplete="off"
							placeholder="Search for candidate name or designation...">
						<i class="ri-search-line search-icon"></i>
					</div>

					<select class="form-control w-md" data-choices data-choices-search-false>
						<option value="All">All</option>
						<option value="Today">Today</option>
						<option value="Yesterday" selected>Yesterday</option>
						<option value="Last 7 Days">Last 7 Days</option>
						<option value="Last 30 Days">Last 30 Days</option>
						<option value="This Month">This Month</option>
						<option value="Last Year">Last Year</option>
					</select>
				</div>
			</div>
		</div>

		<div class="row gy-2 mb-2" id="candidate-list">
		</div>
		<!-- end row -->

		<div class="row g-0 justify-content-end mb-4" id="pagination-element">
			<!-- end col -->
			<div class="col-sm-6">
				<div
					class="pagination-block pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
					<div class="page-item">
						<a href="javascript:void(0);" class="page-link" id="page-prev">Previous</a>
					</div>
					<span id="page-num" class="pagination"></span>
					<div class="page-item">
						<a href="javascript:void(0);" class="page-link" id="page-next">Next</a>
					</div>
				</div>
			</div><!-- end col -->
		</div>
		<!-- end row -->
	</div>


	<th:block layout:fragment="modal">

	</th:block>

	<th:block layout:fragment="pagejs">
		<!-- job-candidate-lists js -->
		<script src="/assets/js/pages/job-candidate-lists.init.js"></script>
	</th:block>
</body>

</html>