cityssm/attendance-tracking

<div class="modal" role="dialog" aria-label="Add a New Employee">
  <div class="modal-background"></div>
  <div class="modal-card">
    <div class="modal-card-head">
      <h2 class="modal-card-title">Add a New Employee</h2>
      <button
        class="delete is-close-modal-button"
        aria-label="close"
        type="button"
      ></button>
    </div>
    <section class="modal-card-body">
      <form id="form--employeeAdd">
        <input name="isSynced" type="hidden" value="0" />
        <input name="syncContacts" type="hidden" value="0" />
        <input name="isActive" type="hidden" value="1" />
        <div class="field">
          <label class="label" for="employeeAdd--employeeNumber"
            >Employee Number</label
          >
          <div class="control has-icons-right">
            <input
              class="input"
              id="employeeAdd--employeeNumber"
              name="employeeNumber"
              type="text"
              maxlength="20"
              required
            />
            <span class="icon is-right">
              <i class="fas fa-asterisk" aria-hidden="true"></i>
            </span>
          </div>
          <p class="help is-info">
            Note that employee numbers  must be unique and cannot be changed after they are set.
          </p>
        </div>
        <div class="columns">
          <div class="column">
            <div class="field">
              <label class="label" for="employeeAdd--employeeSurname"
                >Employee Surname</label
              >
              <div class="control has-icons-right">
                <input
                  class="input"
                  id="employeeAdd--employeeSurname"
                  name="employeeSurname"
                  type="text"
                  maxlength="100"
                  required
                />
                <span class="icon is-right">
                  <i class="fas fa-asterisk" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="employeeAdd--employeeGivenName"
                >Employee Given Name</label
              >
              <div class="control has-icons-right">
                <input
                  class="input"
                  id="employeeAdd--employeeGivenName"
                  name="employeeGivenName"
                  type="text"
                  maxlength="100"
                  required
                />
                <span class="icon is-right">
                  <i class="fas fa-asterisk" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </form>
    </section>
    <div class="modal-card-foot justify-right">
      <button
        class="button is-success"
        type="submit"
        form="form--employeeAdd"
      >
        <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
        <span>Add Employee</span>
      </button>
      <button class="button is-close-modal-button" type="button">Cancel</button>
    </div>
  </div>
</div>