<!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"  th:with="title=${param['jobCardCode']}" data-vue-app>
                <job-card-for-reporting th:attr="title=${title}"
                                        v-bind:id-field-name="'job-card-id'"
                                        v-bind:title-field-name="''"
                ></job-card-for-reporting>
            </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>Select Account</label>
                <select class="form-control" name="accountId">
                    <option value="">Please Select</option>
                    <option th:each="account : ${accounts}"
                            th:value="${account.id}"
                            th:selected="${account.id == (param['accountId'] ?: accountId)}"
                            th:text="${account.title}">
                    </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 th:replace="_fragments :: page-footer-scripts"></div>
    </div>
</aside>
</body>
</html>