<!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>Title</label>
                        <input type="text" class="form-control" name="title" maxlength="100"
                               th:value="${param['title']}">
                    </div>
                    <div class="form-group">
                        <label>Active</label>
                        <select name="active" class="form-control" >
                            <option value="">Please select</option>
                            <option value="1" th:selected="${#strings.equals(param['active'], #strings.toString(1))}">Active</option>
                            <option value="0" th:selected="${#strings.equals(param['active'], #strings.toString(0))}">Inactive</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Created By</label>
                        <input type="text" class="form-control" name="created-by" maxlength="50" th:value="${param['created-by']}">
                    </div>
                    <div class="form-group">
                        <label>Created Start Date</label>
                        <input type="date" class="form-control" name="start-date" th:value="${param['start-date']}">
                    </div>
                    <div class="form-group">
                        <label>Created End Date</label>
                        <input type="date" class="form-control" name="end-date" th:value="${param['end-date']}">
                    </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>Count</label>
                        <input type="number" class="form-control" name="count" th:value="${param['count'] ?: 100}" min="0" step="1" />
                    </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>