<!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('Job Grid Lists')"></div>
</th:block>

<head>

</head>

<body>
	<div layout:fragment="content">
		<div th:replace="partials/page-title :: page-title('Job Grid Lists','Jobs')"></div>

		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-body">
						<form>
							<div class="row g-3">
								<div class="col-xxl-4 col-sm-12">
									<div class="search-box">
										<input type="text" class="form-control search bg-light border-light"
											id="searchJob" autocomplete="off"
											placeholder="Search for jobs or companies...">
										<i class="ri-search-line search-icon"></i>
									</div>
								</div>
								<!--end col-->
								<div class="col-xxl-3 col-sm-4">
									<input type="text" class="form-control bg-light border-light" id="datepicker"
										data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true"
										placeholder="Select date">
								</div>
								<!--end col-->
								<div class="col-xxl-2 col-sm-4">
									<div class="input-light">
										<select class="form-control" data-choices data-choices-search-false
											name="choices-idType" id="idType">
											<option value="all" selected>All</option>
											<option value="Full Time">Full Time</option>
											<option value="Part Time">Part Time</option>
											<option value="Intership">Intership</option>
											<option value="Freelance">Freelance</option>
										</select>
									</div>
								</div>
								<!--end col-->

								<div class="col-xxl-2 col-sm-4">
									<div class="input-light">
										<select class="form-control" data-choices data-choices-search-false
											name="choices-single-default" id="idStatus">
											<option value="all" selected>All</option>
											<option value="Active">Active</option>
											<option value="New">New</option>
											<option value="Close">Close</option>
										</select>
									</div>
								</div>
								<!--end col-->

								<div class="col-xxl-1 col-sm-4">
									<button type="button" class="btn btn-primary w-100" onclick="filterData();">
										<i class="ri-equalizer-fill me-1 align-bottom"></i> Filters
									</button>
								</div>
								<!--end col-->
							</div>
							<!--end row-->
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-- end row -->

		<div class="row">
			<div class="col-lg-12">
				<div class="d-flex align-items-center mb-4">
					<div class="flex-grow-1">
						<p class="text-muted fs-14 mb-0">Result: <span id="total-result"></span></p>
					</div>
					<div class="flex-shrink-0">
						<div class="dropdown">
							<a class="text-muted fs-14 dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
								data-bs-toggle="dropdown" aria-expanded="false">
								All View
							</a>
							<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
								<li><a class="dropdown-item" href="#">Action</a></li>
								<li><a class="dropdown-item" href="#">Another action</a></li>
								<li><a class="dropdown-item" href="#">Something else here</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- end row -->

		<div class="row" id="job-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-grid-list js -->
        <script src="assets/js/pages/job-grid-list.init.js"></script>

	</th:block>
</body>