<%- include('_header'); -%>

<div class="columns">
    <div class="column is-3 is-hidden-mobile">
        <%- include('_menu-workOrders'); -%>
    </div>
    <div class="column">
        <nav class="breadcrumb">
            <ul>
                <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
                <li class="is-active">
                    <a href="#" aria-current="page">
                        <span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span>
                        <span>Work Orders</span>
                    </a>
                </li>
            </ul>
        </nav>

        <h1 class="title is-1">
            Work Order Search
        </h1>

        <% if (user.userProperties.canUpdate) { %>
        <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
            <a class="button is-circle is-primary has-tooltip-left"
                data-tooltip="Create a New Work Order"
                href="<%= urlPrefix %>/workOrders/new">
                <i class="fas fa-plus" aria-hidden="true"></i>
                <span class="is-sr-only">Create a New Work Order</span>
            </a>
        </div>
        <% } %>

        <div class="box">
            <form id="form--searchFilters">
                <input id="searchFilter--limit" name="limit" type="hidden" value="100" />
                <input id="searchFilter--offset" name="offset" type="hidden" value="0" />

                <div class="columns">
                    <div class="column">
                        <div class="field">
                            <label class="label" for="searchFilter--workOrderTypeId">Work Order Type</label>
                            <div class="control has-icons-left">
                                <div class="select is-fullwidth">
                                <select id="searchFilter--workOrderTypeId" name="workOrderTypeId">
                                    <option value="">(All Work Order Types)</option>
                                    <% for (const workOrderType of workOrderTypes) { %>
                                    <option value="<%= workOrderType.workOrderTypeId %>"><%= workOrderType.workOrderType || "(No Name)" %></option>
                                    <% } %>
                                </select>
                                </div>
                                <span class="icon is-small is-left">
                                    <i class="fas fa-search" aria-hidden="true"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field">
                            <label class="label" for="searchFilter--workOrderOpenStatus">Open Status</label>
                            <div class="control">
                                <div class="select is-fullwidth">
                                    <select id="searchFilter--workOrderOpenStatus" name="workOrderOpenStatus">
                                        <option value="">(All Statuses)</option>
                                        <option value="open" selected>Open</option>
                                        <option value="closed">Closed</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>  
                </div>
            </form>
        </div>

        <div id="container--searchResults"></div>
    </div>
</div>

<%- include('_footerA'); -%>

<script src="<%= urlPrefix %>/javascripts/workOrderSearch.min.js"></script>

<%- include('_footerB'); -%>