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

<h1 class="title is-1">
    <%= configFunctions.getProperty("application.applicationName") %>
</h1>

<div class="columns">
    <% if (workOrderMilestones.length > 0) { %>
        <% const workOrderPrints = configFunctions.getProperty("settings.workOrders.prints"); %>
        <div class="column is-4">
            <div class="panel is-info">
                <div class="panel-heading">
                    <div class="level is-mobile">
                        <div class="level-left">
                            <div class="level-item">
                                <h2 class="title is-5 has-text-weight-bold has-text-white">
                                    Today's Milestones
                                </h2>
                            </div>
                        </div>
                        <div class="level-right">
                            <div class="level-item">
                                <span class="tag"><%= workOrderMilestones.length %></span>
                            </div>
                        </div>
                    </div>
                </div>
                <% for (const milestone of workOrderMilestones) { %>
                    <div class="panel-block is-block">
                        <div class="columns is-mobile">
                            <div class="column is-narrow">
                                <% if (milestone.workOrderMilestoneCompletionDate) { %>
                                    <span class="icon is-small has-tooltip-right" data-tooltip="Completed">
                                        <i class="fas fa-check" aria-label="Completed"></i>
                                    </span>
                                <% } else { %>
                                    <span class="icon is-small has-tooltip-right" data-tooltip="Incomplete">
                                        <i class="far fa-square" aria-label="Incomplete"></i>   
                                    </span>
                                <% } %>
                            </div>
                            <div class="column">
                                <% if (workOrderPrints.length > 0) { %>
                                    <span class="is-pulled-right">
                                        <a class="button is-small" data-tooltip="Print Work Order" href="<%=urlPrefix %>/print/<%= workOrderPrints[0] %>/?workOrderId=<%= milestone.workOrderId %>" target="_blank" aria-label="Print">
                                            <i class="fas fa-print" aria-hidden="true"></i>
                                        </a>
                                    </span>
                                <% } %>
                                <% if (milestone.workOrderMilestoneTime) { %>
                                    <%= milestone.workOrderMilestoneTimeString %><br />
                                <% } %>
                                <% if (milestone.workOrderMilestoneTypeId) { %>
                                    <strong><%= milestone.workOrderMilestoneType %></strong><br />
                                <% } %>
                                <span class="is-size-7">
                                    <a href="<%= urlPrefix %>/workOrders/<%= milestone.workOrderId %>">
                                        <i class="fas fa-circle" data-work-order-number="<%= milestone.workOrderNumber %>" aria-label="Work Order"></i> <%= milestone.workOrderNumber %>
                                    </a><br />
                                    <% 
                                        if (milestone.workOrderLots.length > 0) {
                                            for (const lot of milestone.workOrderLots) {
                                    %>
                                    <span class="has-tooltip-right" data-tooltip="<%= lot.mapName %>">
                                        <i class="fas fa-fw fa-vector-square" aria-label="<%= configFunctions.getProperty("aliases.lot") %>"></i>
                                        <%= lot.lotName %>
                                    </span><br />
                                    <%
                                            }
                                        }
                                    
                                        if (milestone.workOrderLotOccupancies.length > 0) {
                                            for (const occupancy of milestone.workOrderLotOccupancies) {
                                                for (const occupant of occupancy.lotOccupancyOccupants) {
                                    %>
                                    <span class="has-tooltip-right" data-tooltip="<%= occupant.lotOccupantType %>">
                                        <i class="fas fa-fw fa-<%= occupant.fontAwesomeIconClass || 'user' %>" aria-label="<%= configFunctions.getProperty("aliases.occupancy") %>"></i>
                                        <%= occupant.occupantName %>
                                    </span><br />
                                    <%
                                                }
                                            }
                                        }
                                    %>
                                </span>
                            </div>
                        </div>
                    </div>
                <% } %>
            </div>
        </div>
    <% } %>
    <div class="column">
        <div class="columns is-desktop">
            <div class="column">
                <div class="card">
                    <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                                <i class="fas fa-3x fa-fw fa-hard-hat" aria-hidden="true"></i>
                            </div>
                            <div class="media-content has-text-black">
                                <div class="level is-marginless is-mobile">
                                    <div class="level-left">
                                        <div class="level-item">
                                            <h2 class="title is-4 is-marginless">
                                                <a href="<%= urlPrefix %>/workOrders">Work Orders</a>
                                            </h2>
                                        </div>
                                    </div>
                                    <% if (workOrderCount > 0) { %>
                                        <div class="level-right">
                                            <div class="level-item">
                                                <a class="tag is-info" href="<%= urlPrefix %>/workOrders/?workOrderOpenDateString=<%= dateTimeFunctions.dateToString(new Date()) %>"><%= workOrderCount %> Open Today</a>
                                            </div>
                                        </div>
                                    <% } %>
                                </div>
                                <p>View and maintain work orders.</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <% if (user.userProperties.canUpdate) { %>
                            <a class="card-footer-item" href="<%= urlPrefix %>/workOrders/new">
                                <span class="icon">
                                    <i class="fas fa-plus" aria-hidden="true"></i>
                                </span>
                                <span>New Work Order</span>
                            </a>
                        <% } %>
                        <a class="card-footer-item" href="<%= urlPrefix %>/workOrders/milestoneCalendar">
                            <span class="icon">
                                <i class="fas fa-calendar" aria-hidden="true"></i>
                            </span>
                            <span>Milestone Calendar</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="card">
                    <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                                <span class="fa-layers fa-3x fa-fw" aria-hidden="true">
                                    <i class="fas fa-vector-square"></i>
                                    <i class="fas fa-user" data-fa-transform="shrink-10"></i>
                                </span>
                            </div>
                            <div class="media-content has-text-black">
                                <h2 class="title is-4 is-marginless">
                                    <a href="<%= urlPrefix %>/lotOccupancies"><%= configFunctions.getProperty("aliases.occupancies") %></a>
                                </h2>
                                <p>View and maintain current and past
                                    <%= configFunctions.getProperty("aliases.occupancies").toLowerCase() %>.</p>
                            </div>
                        </div>
                    </div>
                    <% if (user.userProperties.canUpdate) { %>
                        <div class="card-footer">
                            <a class="card-footer-item" href="<%= urlPrefix %>/lotOccupancies/new">
                                <span class="icon">
                                    <i class="fas fa-plus" aria-hidden="true"></i>
                                </span>
                                <span>New <%= configFunctions.getProperty("aliases.occupancy") %></span>
                            </a>
                        </div>
                    <% } %>
                </div>
            </div>
        </div>
        <div class="columns">
            <div class="column">
                <div class="card">
                    <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                                <i class="fas fa-3x fa-fw fa-vector-square" aria-hidden="true"></i>
                            </div>
                            <div class="media-content has-text-black">
                                <h2 class="title is-4 is-marginless">
                                    <a href="<%= urlPrefix %>/lots"><%= configFunctions.getProperty("aliases.lots") %></a>
                                </h2>
                                <p>View and maintain <%= configFunctions.getProperty("aliases.lots").toLowerCase() %> within a
                                    <%= configFunctions.getProperty("aliases.map").toLowerCase() %>.</p>
                            </div>
                        </div>
                    </div>
                    <% if (user.userProperties.canUpdate) { %>
                        <div class="card-footer">
                            <a class="card-footer-item" href="<%= urlPrefix %>/lots/new">
                                <span class="icon">
                                    <i class="fas fa-plus" aria-hidden="true"></i>
                                </span>
                                <span>New <%= configFunctions.getProperty("aliases.lot") %></span>
                            </a>
                        </div>
                    <% } %>
                </div>
            </div>
            <div class="column">
                <div class="card">
                    <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                                <i class="far fa-3x fa-fw fa-map" aria-hidden="true"></i>
                            </div>
                            <div class="media-content has-text-black">
                                <h2 class="title is-4 is-marginless">
                                    <a href="<%= urlPrefix %>/maps"><%= configFunctions.getProperty("aliases.maps") %></a>
                                </h2>
                                <p>View and maintain <%= configFunctions.getProperty("aliases.maps").toLowerCase() %>.</p>
                            </div>
                        </div>
                    </div>
                    <% if (user.userProperties.canUpdate) { %>
                        <div class="card-footer">
                            <a class="card-footer-item" href="<%= urlPrefix %>/maps/new">
                                <span class="icon">
                                    <i class="fas fa-plus" aria-hidden="true"></i>
                                </span>
                                <span>New <%= configFunctions.getProperty("aliases.map") %></span>
                            </a>
                        </div>
                    <% } %>
                </div>
            </div>
        </div>
        <div class="columns">
            <div class="column">
                <div class="card">
                    <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                                <i class="fas fa-3x fa-fw fa-file" aria-hidden="true"></i>
                            </div>
                            <div class="media-content has-text-black">
                                <h2 class="title is-4 is-marginless">
                                    <a href="<%= urlPrefix %>/reports">Report Library</a>
                                </h2>
                                <p>Produce reports and export data.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="card">
                    <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                                <i class="fas fa-3x fa-fw fa-question-circle" aria-hidden="true"></i>
                            </div>
                            <div class="media-content has-text-black">
                                <h2 class="title is-4 is-marginless">
                                    <a href="https://cityssm.github.io/lot-occupancy-system/docs" target="_blank"
                                        rel="noopener noreferrer">Help Documentation</a>
                                </h2>
                                <p>Instructions on how to use this application.</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <a class="card-footer-item has-tooltip-bottom" data-tooltip="Latest Updates, Issue Tracker, Say Hello"
                            href="https://github.com/cityssm/lot-occupancy-system" target="_blank" rel="noreferrer">
                            <span class="icon">
                                <i class="fab fa-github" aria-hidden="true"></i>
                            </span>
                            GitHub
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <% if (user.userProperties.isAdmin) { %>
        <h2 class="title is-3">Administrator Tools</h2>
        
        <div class="card">
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="fa-layers fa-3x fa-fw" aria-hidden="true">
                            <i class="fas fa-dollar-sign"></i>
                            <i class="fas fa-cog" data-fa-transform="shrink-8 right-8 down-5" data-fa-glow="10"></i>
                        </span>
                    </div>
                    <div class="media-content has-text-black">
                        <h2 class="title is-4 is-marginless">
                            <a href="<%= urlPrefix %>/admin/fees">Fee Management</a>
                        </h2>
                        <p>
                            Manage fees for
                            <%= configFunctions.getProperty("aliases.lot").toLowerCase() %>
                            <%= configFunctions.getProperty("aliases.occupancy").toLowerCase() %>
                            and specific
                            <%= configFunctions.getProperty("aliases.lot").toLowerCase() %> types.
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="fa-layers fa-3x fa-fw" aria-hidden="true">
                            <i class="fas fa-user-friends"></i>
                            <i class="fas fa-cog" data-fa-transform="shrink-8 right-8 down-5" data-fa-glow="10"></i>
                        </span>
                    </div>
                    <div class="media-content has-text-black">
                        <h2 class="title is-4 is-marginless">
                            <a href="<%= urlPrefix %>/admin/occupancyTypes"><%= configFunctions.getProperty("aliases.occupancy") %> Type Management</a>
                        </h2>
                        <p>
                            Manage
                            <%= configFunctions.getProperty("aliases.occupancy").toLowerCase() %> types,
                            the fields associated with them,
                            and their available print options.
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="fa-layers fa-3x fa-fw" aria-hidden="true">
                            <i class="fas fa-vector-square"></i>
                            <i class="fas fa-cog" data-fa-transform="shrink-8 right-8 down-5" data-fa-glow="10"></i>
                        </span>
                    </div>
                    <div class="media-content has-text-black">
                        <h2 class="title is-4 is-marginless">
                            <a href="<%= urlPrefix %>/admin/lotTypes"><%= configFunctions.getProperty("aliases.lot") %> Type Management</a>
                        </h2>
                        <p>
                            Manage
                            <%= configFunctions.getProperty("aliases.lot").toLowerCase() %> types
                            and fields associated with them.
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="fa-layers fa-3x fa-fw" aria-hidden="true">
                            <i class="fas fa-table"></i>
                            <i class="fas fa-cog" data-fa-transform="shrink-8 right-8 down-5" data-fa-glow="10"></i>
                        </span>
                    </div>
                    <div class="media-content has-text-black">
                        <h2 class="title is-4 is-marginless">
                            <a href="<%= urlPrefix %>/admin/tables">Config Table Management</a>
                        </h2>
                        <p>
                            Manage simple configuration tables fees for
                            work order types,
                            <%= configFunctions.getProperty("aliases.lot").toLowerCase() %> statuses,
                            and <%= configFunctions.getProperty("aliases.lot").toLowerCase() %> <%= configFunctions.getProperty("aliases.occupant").toLowerCase() %> types.
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <i class="fas fa-3x fa-fw fa-broom" aria-hidden="true"></i>
                    </div>
                    <div class="media-content has-text-black">
                        <h2 class="title is-4 is-marginless">
                            <a href="<%= urlPrefix %>/admin/cleanup">Database Cleanup</a>
                        </h2>
                        <p>
                            Permanently delete records that have been previously deleted from the database.
                        </p>
                    </div>
                </div>
            </div>
            <% if (configFunctions.getProperty("application.ntfyStartup")) { %>
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <i class="fas fa-3x fa-fw fa-comment-alt" aria-hidden="true"></i>
                        </div>
                        <div class="media-content has-text-black">
                            <h2 class="title is-4 is-marginless">
                                <a href="<%= urlPrefix %>/admin/ntfyStartup">Ntfy Startup Notification</a>
                            </h2>
                            <p>
                                Subscribe to application startup notifications on a phone or a desktop computer.
                            </p>
                        </div>
                    </div>
                </div>
            <% } %>
        </div>
        <% } %>
    </div>
</div>

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

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

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