<!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/Code</label>
                        <input type="text" class="form-control" name="code" maxlength="100" th:value="${param['code']}">
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select class="form-control" name="status">
                            <option value="">Please Select</option>
                            <option th:each="status: ${statuses}"
                                    th:value="${status}"
                                    th:text="${status}"
                                    th:selected="${param['status'] == null ? false : #strings.equals(param['status'], status) }"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Inventory Status</label>
                        <select class="form-control" name="inventory-status">
                            <option value="">Please Select</option>
                            <option th:each="status: ${invStatuses}"
                                    th:value="${status}"
                                    th:text="${status}"
                                    th:selected="${param['inventory-status'] == null ? false : #strings.equals(param['inventory-status'], status) }"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Customer</label>
                        <input type="text" class="form-control" name="customer" maxlength="100" th:value="${param['customer']}">
                    </div>
                    <div class="form-group">
                        <label>Lot Number</label>
                        <input type="text" class="form-control" name="lot-number" maxlength="100" th:value="${param['lot-number']}">
                    </div>
                    <div class="form-group" data-vue-app th:with="id=${param['purchase-order-id']},title=${param['purchase-order-id']}">
                       <purchase-order-search th:attr="id=${id},title=${title}"
                                              v-bind:id-field-name="'purchase-order-id'"
                                              v-bind:code-field-name="'purchase-order-code'"
                       ></purchase-order-search>
                    </div>
                    <div class="form-group" data-vue-app th:with="id=${param['site-id']},title=${param['site-title']}">
                        <location-site-search th:attr="id=${id},title=${title}"
                                              v-bind:id-field-name="'site-id'"
                                              v-bind:title-field-name="'site-title'"
                        ></location-site-search>
                    </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>