<!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>Item ID</label>
                <input type="text" class="form-control" name="item-id" maxlength="100" th:value="${param['item-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>Bundle ID</label>
                <input type="number" class="form-control" min="0" name="bundle-id" th:value="${param['bundle-id']}">
            </div>
            <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>Status</label>
                <select class="form-control" name="status">
                    <option value="" th:selected="${param.status == null}">Please Select</option>
                    <option value="APPROVED" th:selected="${param.status == 'true'}">Approved</option>
                    <option value="REJECT" th:selected="${param.status == 'false'}">Reject</option>
                </select>
            </div>

            <div class="form-group">
                <label>Count</label>
                <input type="number" class="form-control" name="count" maxlength="100" min="0" 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>