cityssm/attendance-tracking

<div class="modal" role="dialog" aria-label="Create a New Call Out List">
  <div class="modal-background"></div>
  <div class="modal-card">
    <div class="modal-card-head">
      <h2 class="modal-card-title">Create a New Call Out List</h2>
      <button
        class="delete is-close-modal-button"
        aria-label="close"
        type="button"
      ></button>
    </div>
    <section class="modal-card-body">
      <form id="form--callOutListAdd">
        <div class="field">
          <label class="label" for="callOutListAdd--listName">List Name</label>
          <div class="control has-icons-right">
            <input
              class="input"
              id="callOutListAdd--listName"
              name="listName"
              type="text"
              maxlength="100"
              required
            />
            <span class="icon is-small is-right">
              <i class="fas fa-asterisk" aria-hidden="true"></i>
            </span>
          </div>
        </div>
        <div class="field">
          <label class="label" for="callOutListAdd--listDescription"
            >List Description</label
          >
          <div class="control">
            <textarea
              class="textarea"
              id="callOutListAdd--listDescription"
              name="listDescription"
              maxlength="500"
            ></textarea>
          </div>
        </div>
      </form>
    </section>
    <div class="modal-card-foot justify-right">
      <button
        class="button is-success"
        type="submit"
        form="form--callOutListAdd"
      >
        <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
        <span>Create Call Out List</span>
      </button>
      <button class="button is-close-modal-button" type="button">Cancel</button>
    </div>
  </div>
</div>