cityssm/attendance-tracking

<div class="modal" role="dialog" aria-label="Edit Call Out Record">
  <div class="modal-background"></div>
  <div class="modal-card">
    <div class="modal-card-head">
      <h3 class="modal-card-title">Edit Call Out Record</h3>
      <button
        class="delete is-close-modal-button"
        aria-label="close"
        type="button"
      ></button>
    </div>
    <section class="modal-card-body">
      <form id="form--callOutRecordEdit">
        <input id="callOutRecordEdit--recordId" name="recordId" type="hidden" />
        <input id="callOutRecordEdit--listId" name="listId" type="hidden" />
        <input
          id="callOutRecordEdit--employeeNumber"
          name="employeeNumber"
          type="hidden"
        />
        <div class="columns is-desktop">
          <div class="column">
            <div class="field">
              <label class="label" for="callOutRecordEdit--callOutDateString"
                >Call Out Date</label
              >
              <div class="control">
                <input
                  class="input"
                  id="callOutRecordEdit--callOutDateString"
                  name="callOutDateString"
                  type="date"
                  required
                />
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="callOutRecordEdit--callOutTimeString"
                >Call Out Time</label
              >
              <div class="control">
                <input
                  class="input"
                  id="callOutRecordEdit--callOutTimeString"
                  name="callOutTimeString"
                  type="time"
                  required
                />
              </div>
            </div>
          </div>
        </div>
        <div class="field">
          <label class="label" for="callOutRecordEdit--natureOfCallOut"
            >Nature of Call Out</label
          >
          <div class="control">
            <input
              class="input"
              id="callOutRecordEdit--natureOfCallOut"
              name="natureOfCallOut"
              type="text"
              maxlength="200"
            />
          </div>
        </div>
        <div class="columns is-desktop">
          <div class="column">
            <label class="label" for="callOutRecordEdit--callOutHours"
              >Shift Hours</label
            >
            <div class="field has-addons">
              <div class="control is-expanded has-icons-left">
                <input
                  class="input has-text-right"
                  id="callOutRecordEdit--callOutHours"
                  name="callOutHours"
                  type="number"
                  min="0.25"
                  max="24"
                  step="0.25"
                  onwheel="return false"
                  required
                />
                <span class="icon is-small is-left">
                  <i class="fas fa-asterisk" aria-hidden="true"></i>
                </span>
              </div>
              <div class="control">
                <span class="button is-static"> hours </span>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="callOutRecordEdit--responseTypeId"
                >Response</label
              >
              <div class="control has-icons-left">
                <div class="select is-fullwidth">
                  <select
                    id="callOutRecordEdit--responseTypeId"
                    name="responseTypeId"
                    required
                  ></select>
                </div>
                <span class="icon is-small is-left">
                  <i class="fas fa-asterisk" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="field">
          <label class="label" for="callOutRecordEdit--recordComment"
            >Comment</label
          >
          <div class="control">
            <textarea
              class="textarea"
              id="callOutRecordEdit--recordComment"
              name="recordComment"
            ></textarea>
          </div>
        </div>
      </form>
    </section>
    <div class="modal-card-foot is-justify-content-end">
      <button
        class="button is-success"
        type="submit"
        form="form--callOutRecordEdit"
      >
        <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
        <span>Update Call Out Record</span>
      </button>
      <button class="button is-close-modal-button" type="button">Cancel</button>
    </div>
  </div>
</div>