cityssm/attendance-tracking

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

<div class="columns">
  <div class="column is-3">
    <%- include('_admin.menu.ejs') %>
  </div>
  <div class="column">
    <nav class="breadcrumb is-hidden-mobile">
      <ul>
        <li class="is-active">
          <a href="#">
            Administration
          </a>
        </li>
        <li class="is-active">
          <a href="#" aria-current="page">
            <span>Employee Maintenance</span>
          </a>
        </li>
      </ul>
    </nav>
    <div class="columns is-vcentered">
      <div class="column">
        <h1 class="title is-1 is-size-3-mobile">
          Employee Maintenance
        </h1>
      </div>
      <div class="column is-narrow has-text-right">
        <button class="button is-success" id="is-add-employee-button" data-cy="add-employee" type="button">
          <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
          <span>Add Employee</span>
        </button>
      </div>
    </div>
    <div class="box">
      <div class="columns">
        <div class="column is-8">
          <div class="field">
            <div class="control has-icons-left">
              <input class="input" id="employeeSearch--employeeNameNumber" name="employeeNameNumber" type="text"
                placeholder="Search by Employee Number and Name" aria-label="Employee number and name" />
              <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">
            <div class="control has-icons-left">
              <div class="select is-fullwidth">
                <select id="employeeSearch--isActive" name="isActive" aria-label="Active Status">
                  <option value="">(All Active Statuses)</option>
                  <option value="1" selected>Active Only</option>
                  <option value="0">Inactive Only</option>
                </select>
              </div>
              <span class="icon is-small is-left">
                <i class="fas fa-filter" aria-hidden="true"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="container--employees"></div>
  </div>
</div>

<datalist id="datalist--employeePropertyNames">
  <% for (const propertyName of employeePropertyNames) { %>
  <option value="<%= propertyName %>" />
  <% } %>
</datalist>

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

<script>
  exports.employees = <%- JSON.stringify(employees) %>;
  exports.selfService = <%= configFunctions.getConfigProperty('features.selfService') ? 'true' : 'false' %>;

  <% if (configFunctions.getConfigProperty('settings.employeeNumberRegularExpression')) { %>
    exports.employeeNumberRegularExpression = <%- configFunctions.getConfigProperty('settings.employeeNumberRegularExpression').toString() %>;
  <% } %>
</script>

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

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