<!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>PO Code</label>
                <input type="text" class="form-control" name="purchaseOrderCode" maxlength="100" th:value="${param['purchaseOrderCode']}">
            </div>
            <div class="form-group">
                <label>Article Name</label>
                <input type="text" class="form-control" name="articleName" maxlength="100" th:value="${param['articleName']}">
            </div>
            <div class="form-group">
                <label>From Date</label>
                <input type="date" class="form-control" name="created-start-date" th:value="${param['created-start-date'] ?: startDate }" >
            </div>
            <div class="form-group">
                <label>To Date</label>
                <input type="date" class="form-control" name="created-end-date" th:value="${param['created-end-date'] ?: endDate}" >
            </div>
            <div class="form-group">
                <label>Count</label>
                <input type="number" class="form-control" name="limit"
                       th:value="${param['limits'] ?: 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>