<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
    <head th:replace="_fragments :: head('Home Page')"></head>
    <body>
        <!-- sidebar starts -->
        <aside class="col-sm-2" th:fragment="sidebar">
            <div class="page-filters-sidebar">
                <form th:action="@{${#strings.replace(#httpServletRequest.requestURI, #request.getContextPath(), '')}}">
                    <h5 class="mb-4">Refine Your Search</h5>
                    <div class="form-group">
                        <label>ID</label>
                        <input type="text" class="form-control" name="id" maxlength="100" th:value="${param['id']}">
                    </div>
                    <div class="form-group">
                        <label>Sku</label>
                        <input type="text" class="form-control" name="sku" maxlength="100" th:value="${param['sku']}">
                    </div>
                    <div class="form-group">
                        <label>Job Card ID</label>
                        <input type="text" class="form-control" name="jc-id" maxlength="100"
                               th:value="${param['jc-id']}">
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" class="form-control">
                            <option value="">All</option>
                            <option value="1" th:selected="${#strings.equals(param['status'], #strings.toString(1))}">Received</option>
                            <option value="0" th:selected="${#strings.equals(param['status'], #strings.toString(0))}">Not Received</option>
                        </select>
                    </div>
                    <div class="form-group">
                    <div class="form-group">
                        <label>Start Date</label>
                        <input type="date" class="form-control" name="start-date" th:value="${param['start-date'] ?: startDate}">
                    </div>
                    <div class="form-group">
                        <label>End Date</label>
                        <input type="date" class="form-control" name="end-date" th:value="${param['end-date'] ?: endDate}">
                    </div>
                    <div class="form-group">
                        <label>Count</label>
                        <input type="number" class="form-control" name="count" min="0" maxlength="100"
                               th:value="${param['count'] ?: 100}">
                    </div>
                    <input type="submit" class="btn btn-secondary btn-block" value="Search">
                    <a th:href="@{${#strings.replace(#httpServletRequest.requestURI, #request.getContextPath(), '')}}"
                       class="btn btn-secondary btn-block">Reset</a>
                </form>
            </div>
        </aside>
        <!-- sidebar ends -->
        <div th:fragment="page-footer-scripts">
            <script th:src="@{/js/vendor/lazyload-db.js}"></script>
            <script th:src="@{/js/main.js}"></script>
        </div>
    </body>
</html>