<html>
    <head>
        <style>
            <%- include('style.css'); %>
        </style>
    </head>
    <body>
        <table class="layout-table">
            <tr>
                <td>
                    <h1 class="m-0">Work Order #<%= workOrder.workOrderNumber %></h1>
                </td>
                <td class="has-text-right is-vcentered">
                    <strong>
                        <% if (workOrder.workOrderCloseDate) { %>
                            CLOSED<br />
                            <% } %>
                        <%= workOrder.workOrderType %>
                    </strong>
                </td>
            </tr>
        </table>
        <div class="box mt-1">
            <table class="layout-table">
                <tr>
                    <td>
                        
                        <p>
                            <strong>Description</strong><br />
                            <%= workOrder.workOrderDescription %>
                        </p>
                    </td>
                    <td class="pl-1 is-width-1 has-text-nowrap">
                        <p>
                            <strong><%= configFunctions.getProperty("aliases.workOrderOpenDate") %></strong><br />
                            <%= workOrder.workOrderOpenDateString %>
                        </p>
                        <% if (workOrder.workOrderCloseDate) { %>
                            <p>
                                <strong><%= configFunctions.getProperty("aliases.workOrderCloseDate") %></strong><br />
                                <%= workOrder.workOrderCloseDateString %>
                            </p>
                        <% } %>
                    </td>
                </tr>
            </table>
        </div>

        <h2 class="mb-0">Comments</h2>

        <% if (workOrder.workOrderComments.length === 0) { %>
            <p>There are no comments associated with this work order.</p>
        <% } else { %>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Commentor</th>
                        <th>Comment Time</th>
                        <th>Comment</th>
                    </tr>
                </thead>
            <tbody>
                <% for (const comment of workOrder.workOrderComments) { %>
                    <tr>
                        <td><%= comment.recordUpdate_userName %></td>
                        <td><%= comment.workOrderCommentDateString %> <%= comment.workOrderCommentTimeString %></td>
                        <td><%= comment.workOrderComment %></td>
                    </tr>
                    <% } %>
                </tbody>
            </table>
        <% } %>
            

        <p class="has-text-right is-italic is-8pt" style="position:absolute;bottom:10px;right:10px">
            <%
                const recordCreateDate = new Date(workOrder.recordCreate_timeMillis);
                const currentDate = new Date();
            %>
            Work order created <%= dateTimeFunctions.dateToString(recordCreateDate) %> at <%= dateTimeFunctions.dateToTimeString(recordCreateDate) %>.
            Printed <%= dateTimeFunctions.dateToString(currentDate) %> at <%= dateTimeFunctions.dateToTimeString(currentDate) %>.<br />
            workOrderId = <%= workOrder.workOrderId %>            
        </p>
    </body>
</html>