<%- 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>
                    <a href="<%= urlPrefix %>/workOrders">
                        <span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span>
                        <span>Work Orders</span>
                    </a>
                </li>
                <li class="is-active">
                    <a href="#" aria-current="page">
                        Milestone Calendar
                    </a>
                </li>
            </ul>
        </nav>

        <h1 class="title is-1">
            Milestone Calendar
        </h1>

        <div class="box">
            <form id="form--searchFilters">
                <div class="columns">
                    <div class="column">
                        <div class="field">
                            <label class="label" for="searchFilter--workOrderMilestoneDateFilter">Miestone Date Filter Type</label>
                            <div class="control">
                                <div class="select is-fullwidth">
                                    <select id="searchFilter--workOrderMilestoneDateFilter" name="workOrderMilestoneDateFilter">
                                        <option value="upcomingMissed" selected>Upcoming and Missed</option>
                                        <option value="recent">Recent</option>
                                        <option value="date">Specific Date</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field">
                            <label class="label" for="searchFilter--workOrderMilestoneDateString">Milestone Date</label>
                            <div class="control">
                                <input class="input" id="searchFilter--workOrderMilestoneDateString" name="workOrderMilestoneDateString" type="date" value="<%= dateTimeFunctions.dateToString(new Date()) %>" disabled required />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

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

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

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

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