<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
    <head>
        <meta charset = "ISO-8859-1" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha256-NJWeQ+bs82iAeoT5Ktmqbi3NXwxcHlfaVejzJI2dklU=" crossorigin="anonymous"/>
        <link rel="stylesheet" type="text/css" href="/css/styles.css"/>
        <script type="text/javascript" src="/js/scripts.js"></script>
        <title>ECM Document Search - Criteria</title>
    </head>
    <body>
    	<header>
        	<h1 class="text-center">ECM Document Search</h1>
        </header>
        
        <div class="content">
	        <div class="error text-center">An unexpected error occurred. Please try again later.</div>
	        <form action="/search" method="post">
	        <input type="hidden" id="size" name="size" value="" />
	        <fieldset class="container col-7 p-2 border border-dark">
	        <legend class="w-auto text-center">Please enter your search criteria</legend>
	        	<div class="form-group row">
	        		<label for="documentName" class="col-sm-3 col-form-label ml-2 font-weight-bold">Document Name</label>
	        		<input type="text" class="col-sm-8 form-control form-control-sm" id="documentName" name="documentName" value=""/>
	        	</div>
	        	<div class="form-group row">
	        		<label for="category" class="col-sm-3 col-form-label ml-2 font-weight-bold">Category</label>
	                <select class="col-sm-8 form-control form-control-sm" id="category" name="category">
	                    <option value=""></option>
	                    
	                </select>
	        	</div>
	        	<div class="form-group row">
	        		<label for="subCategory" class="col-sm-3 col-form-label ml-2 font-weight-bold">Sub-Category</label>
	                <select class="col-sm-8 form-control form-control-sm" id="subCategory" name="subCategory">
	                    <option value=""></option>
	                    
	                </select>
	         	</div>
	         	<div id="showMore" class="row ">
	           		<button type="button" class="link col-sm-3 ml-2 text-left" id="lnkShowMore">Advanced Search</button>
	           		<input type="hidden" id="advanced" name="advanced" value="false"/>
	         	</div>
	         	<div id="advancedSearch" class="collapse">
		        	<div class="form-group row">
		        		<label for="typeOfServices" class="col-sm-3 col-form-label ml-2 font-weight-bold">Type of Services</label>
		                <select class="col-sm-8 form-control form-control-sm" id="typeOfServices" name="typeOfServices">
		                    <option value=""></option>
		                    
		                </select>
		        	</div>
		        	<div class="form-group row">
		        		<label for="location" class="col-sm-3 col-form-label ml-2 font-weight-bold">Location</label>
		                <select class="col-sm-8 form-control form-control-sm" id="location" name="location">
		                    <option value=""></option>
		                    
		                </select>
		        	</div>
		        	<div class="form-group row">
		        		<label for="unit" class="col-sm-3 col-form-label ml-2 font-weight-bold">Unit</label>
		                <select class="col-sm-8 form-control form-control-sm" id="unit" name="unit">
		                    <option value=""></option>
		                    
		                </select>
		        	</div>
		        	<div class="form-group row">
		        		<label for="year" class="col-sm-3 col-form-label ml-2 font-weight-bold">Year</label>
		        		<input type="number" class="col-sm-8 form-control form-control-sm" size="4" id="year" name="year" value=""/>
		        	</div>
	        	</div>
	        	<div class="row justify-content-center">
	        		<div class="col-auto">
	            		<button type="submit" class="btn btn-primary ml-4">Search</button>
	            	</div>
	            </div>
	        </fieldset>
	        </form>
        </div>
        
        <footer class="page-footer font-small pt-4">
        	<p class="footer-copyright text-center py-3">ECM Search - Build <span></span> - &copy; <span>2021-</span><span>2026</span> ICT Authority. All rights reserved.</p>
        </footer>
	    
	    <script type="text/javascript" src="/js/index.js"></script>
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha256-C8oQVJ33cKtnkARnmeWp6SDChkU+u7KvsNMFUzkkUzk=" crossorigin="anonymous"></script>
    </body>
</html>
