<!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>Title</label>
                        <input type="text" class="form-control" name="item-title" maxlength="100" th:value="${param['item-title']}">
                    </div>
                    <div class="form-group">
                        <label>Sku</label>
                        <input type="text" class="form-control" name="item-sku" maxlength="100" th:value="${param['item-sku']}">
                    </div>
                    <div class="form-group">
                        <label>Item Unit</label>
                        <select class="form-control" name="item-unit" th:value="${param['item-unit']}">
                            <option value="">Please Select</option>
                            <option th:each="itemUnit: ${itemUnits}"
                                    th:value="${itemUnit.id}"
                                    th:text="${itemUnit.title}"
                                    th:selected="${#strings.equals(param['item-unit'], #strings.toString(itemUnit.id))}"></option>
                        </select>
                    </div>
                    <div class="form-group" th:if="${isShown}">
                        <label>Item Status</label>
                        <select class="form-control" name="item-request-approval-status" data-s2 multiple>
                            <option value="ALL" th:selected="${param['item-request-approval-status'] == null || #strings.equals('ALL', param['item-request-approval-status'])}">ALL</option>
                            <option th:each="status: ${T(com.utopiaindustries.uind.model.inventory.ItemRequestApprovalStatus).values()}"
                                    th:value="${status}"
                                    th:text="${status}"
                                    th:selected="${param['item-request-approval-status'] == null ? false : #lists.contains(param['item-request-approval-status'], #strings.toString(status))}"></option>
                        </select>
                    </div>
                    <div data-item-type-category-container>
                        <div class="form-group">
                            <label>Type</label>
                            <select name="item-type-id" class="form-control" data-item-type>
                                <option data-empty-option value="">Please select</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Category</label>
                            <select name="item-category-id" class="form-control" data-item-category id = "item-category-select">
                                <option data-empty-option value="">Please select</option>
                            </select>
                        </div>
                    </div>
                    <!--				th:if="${isRequest}"-->
                    <div class="form-group">
                        <label>From Date</label>
                        <input type="date" class="form-control" name="from-date" >
                    </div>
                    <div class="form-group">
                        <label>To Date</label>
                        <input type="date" class="form-control" name="to-date" >
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="item-status" class="form-control">
                            <option value="">All</option>
                            <option value="1" th:selected="${#strings.equals(param['item-status'], #strings.toString(1))}">Active</option>
                            <option value="0" th:selected="${#strings.equals(param['item-status'], #strings.toString(0))}">Inactive</option>
                        </select>
                    </div>
                    <!-- number of items -->
                    <div class="form-group">
                        <label>Number of Items</label>
                        <input type="number" class="form-control" name="item-count" th:value="(${param['item-count']} != null) ? ${param['item-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>