<!DOCTYPE html>
<html class="has-navbar-fixed-top is-fullwidth" lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content="<%= csrfToken %>">

    <title>
        <%= headTitle %>: <%= configFunctions.getProperty("application.applicationName") %>
    </title>

    <link rel="icon" href="<%= urlPrefix %>/images/favicon.png" />

    <link rel="stylesheet" href="<%= urlPrefix %>/stylesheets/style.css" />
    <link rel="stylesheet" href="<%= urlPrefix %>/lib/leaflet/leaflet.css" />
</head>

<body>
    <nav class="navbar is-light is-fixed-top is-static-print" id="cityssm-theme--navbar" role="navigation"
        aria-label="main navigation">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item" href="<%= urlPrefix %>/dashboard">
                    <img class="mr-3" src="<%= urlPrefix + configFunctions.getProperty("application.logoURL") %>" alt=""
                        height="28" />
                    <strong><%= configFunctions.getProperty("application.applicationName") %></strong>
                </a>

                <a class="navbar-burger burger is-hidden-print" role="button" aria-label="menu" aria-expanded="false">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>

            <div class="navbar-menu">
                <div class="navbar-start">

                    <a class="navbar-item" href="<%= urlPrefix %>/lotOccupancies">
                        <span class="icon mr-1">
                            <span class="fa-layers fa-fw" aria-hidden="true">
                                <i class="fas fa-vector-square"></i>
                                <i class="fas fa-user" data-fa-transform="shrink-10"></i>
                            </span>
                        </span>
                        <span><%= configFunctions.getProperty("aliases.occupancies") %></span>
                    </a>
                    
                    <a class="navbar-item" href="<%= urlPrefix %>/workOrders">
                        <span class="icon mr-1">
                            <i class="fas fa-hard-hat" aria-hidden="true"></i>
                        </span>
                        <span>Work Orders</span>
                    </a>

                    <div class="navbar-item has-dropdown">

                        <a class="navbar-link is-arrowless" href="#">
                            <span>More</span>
                            <span class="icon ml-1">
                                <i class="fas fa-angle-down" aria-hidden="true"></i>
                            </span>
                        </a>
                        <div class="navbar-dropdown">
                            <a class="navbar-item" href="<%= urlPrefix %>/lots">
                                <span class="icon mr-1">
                                    <i class="fas fa-fw fa-vector-square" aria-hidden="true"></i>
                                </span>
                                <span><%= configFunctions.getProperty("aliases.lots") %></span>
                            </a><a class="navbar-item" href="<%= urlPrefix %>/maps">
                                <span class="icon mr-1">
                                    <i class="far fa-fw fa-map" aria-hidden="true"></i>
                                </span>
                                <span><%= configFunctions.getProperty("aliases.maps") %></span>
                            </a>
                            <hr class="navbar-divider" />
                            <a class="navbar-item" href="<%= urlPrefix %>/reports">
                                <span class="icon mr-1">
                                    <i class="fas fa-fw fa-file" aria-hidden="true"></i>
                                </span>
                                <span>Reports</span>
                            </a>
                            <hr class="navbar-divider" />
                            <a class="navbar-item" href="https://cityssm.github.io/lot-occupancy-system/"
                                target="_blank" rel="noopener noreferrer">
                                <span class="icon mr-1">
                                    <i class="fas fa-fw fa-question-circle" aria-hidden="true"></i>
                                </span>
                                <span>Help</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="navbar-end">
                    <a class="navbar-item" id="cityssm-theme--logout-button" role="button" href="#">
                        <span class="icon mr-1">
                            <i class="fas fa-fw fa-sign-out-alt" aria-hidden="true"></i>
                        </span>
                        <span>Log Out <%=user.userName %></span>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <main class="container pt-2 px-3 mr-auto has-min-page-height"
        data-session-keep-alive-millis="<%= configFunctions.keepAliveMillis %>"
        data-url-prefix="<%= urlPrefix %>"
        data-can-update="<%= user.userProperties.canUpdate ? "true" : "false" %>"
        data-is-admin="<%= user.userProperties.isAdmin ? "true" : "false" %>"
        data-api-key="<%= user.userProperties.apiKey %>">