cityssm/attendance-tracking

<div class="modal" role="dialog" aria-label="Record a New Call In">
  <div class="modal-background"></div>
  <div class="modal-card" style="width:900px">
    <div class="modal-card-head">
      <h2 class="modal-card-title">Record a New Call In</h2>
      <button
        class="delete is-close-modal-button"
        aria-label="close"
        type="button"
      ></button>
    </div>
    <section class="modal-card-body">
      <form id="form--callInAdd">
        <div class="columns mb-0">
          <div class="column">
            <div class="field">
              <label class="label" for="callInAdd--employeeNumber">Employee Number</label>
              <div class="control">
                <input
                  class="input"
                  id="callInAdd--employeeNumber"
                  name="employeeNumber"
                  type="text"
                  maxlength="20"
                />
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="callInAdd--employeeName">Employee Name</label>
              <div class="control has-icons-right">
                <input class="input" id="callInAdd--employeeName" name="employeeName" type="text" maxlength="200" required />
                <span class="icon is-small is-right">
                  <i class="fas fa-asterisk" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
        <fieldset>
          <legend class="label">Type of Call In</legend>
          <div class="field is-grouped">
            <div class="control">
              <label class="button">
                <input class="is-hidden" id="callInAdd--callInType_absence" name="callInType" type="radio" value="absence" required />
                <span class="icon mr-2">
                  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
                </span>
                <span>Absence</span>
              </label>
            </div>
            <div class="control">
              <label class="button">
                <input class="is-hidden" id="callInAdd--callInType_returnToWork" name="callInType" type="radio" value="returnToWork" required />
                <span class="icon mr-2">
                  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
                </span>
                <span>Return to Work</span>
              </label>
            </div>
          </div>
        </fieldset>
        <fieldset class="mt-3 is-hidden" data-call-in-type="absence" disabled>
          <div class="columns mb-0">
            <div class="column">
              <div class="field">
                <label class="label" for="callInAdd--absenceDateString-absence">Absence Date</label>
                <div class="control">
                  <input class="input" id="callInAdd--absenceDateString-absence" name="absenceDateString" type="date" required />
                </div>
              </div>
            </div>
            <div class="column">
              <div class="field">
                <label class="label" for="callInAdd--absenceTypeKey-absence">Absence Type</label>
                <div class="control">
                  <div class="select is-fullwidth">
                    <select id="callInAdd--absenceTypeKey-absence" name="absenceTypeKey" required>
                      <option value="">(Select an Absence Type)</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="field">
            <label class="label" for="callInAdd--returnDateString-absence">Expected Return Date</label>
            <div class="control">
              <input class="input" id="callInAdd--returnDateString-absence" name="returnDateString" type="date" />
            </div>
          </div>
        </fieldset>
        <fieldset class="mt-3 is-hidden" data-call-in-type="returnToWork" disabled>
          <div class="columns">
            <div class="column">
              <div class="field">
                <label class="label" for="callInAdd--returnDateString-returnToWork">Return Date</label>
                <div class="control">
                  <input class="input" id="callInAdd--returnDateString-returnToWork" name="returnDateString" type="date" required />
                </div>
              </div>
            </div>
            <div class="column">
              <div class="field">
                <label class="label" for="callInAdd--returnShift-returnToWork">Return Shift</label>
                <div class="control">
                  <input class="input" id="callInAdd--returnShift-returnToWork" name="returnShift" type="text" maxlength="100" list="datalist--returnShifts" />
                </div>
              </div>
            </div>
          </div>
        </fieldset>
        <div class="field mt-3">
          <label class="label" for="callInAdd--recordComment">Comments</label>
          <div class="control">
            <textarea class="textarea" id="callInAdd--recordComment" name="recordComment"></textarea>
          </div>
        </div>
      </form>
    </section>
    <div class="modal-card-foot justify-right">
      <button
        class="button is-success"
        type="submit"
        form="form--callInAdd"
      >
        <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
        <span>Record Call In</span>
      </button>
      <button class="button is-close-modal-button" type="button">Cancel</button>
    </div>
  </div>
</div>