cityssm/contract-expiration-tracker

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <h3 class="modal-card-title">Add a New <span data-customization="contract.alias"></span></h3>
      <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
    </header>
    <section class="modal-card-body">
      <form id="form--contractAdd">
        <div class="field">
          <label class="label" for="contractAdd--contractTitle"><span data-customization="contract.alias"></span> Title</label>
          <div class="control has-icons-right">
            <input class="input" id="contractAdd--contractTitle" name="contractTitle" 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 class="columns">
          <div class="column is-4">
            <div class="field">
              <label class="label" for="contractAdd--contractCategoryIsNew"><span data-customization="contractCategory.alias"></span> Type</label>
              <div class="control">
                <div class="select is-fullwidth">
                  <select id="contractAdd--contractCategoryIsNew" name="contractCategoryIsNew">
                    <option value="0">Existing</option>
                    <option value="1">New</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field mb-0" id="field--contractAdd--contractCategory-existing">
              <label class="label" for="contractAdd--contractCategory-existing">Existing <span data-customization="contractCategory.alias"></span></label>
              <div class="control">
                <div class="select is-fullwidth">
                  <select id="contractAdd--contactCategory-existing" name="contractCategory-existing">
                    <option value="">(Select One)</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="field is-hidden" id="field--contractAdd--contractCategory-new">
              <label class="label" for="contractAdd--contractCategory-new">New <span data-customization="contractCategory.alias"></span></label>
              <div class="control">
                <input class="input" id="contractAdd--contractCategory-new" name="contractCategory-new" type="text" maxlength="100" />
              </div>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column">
            <div class="field">
              <label class="label" for="contractAdd--contractParty"><span data-customization="contractParty.alias"></span></label>
              <div class="control">
                <input class="input" id="contractAdd--contractParty" name="contractParty" type="text" maxlength="200" />
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="field">
              <label class="label" for="contractAdd--managingUserName">Managing User</label>
              <div class="control is-expanded">
                <div class="select is-fullwidth">
                  <select id="contractAdd--managingUserName" name="managingUserName">
                    <option value="">(None Selected)</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="field">
          <label class="label" for="contractAdd--contractDescription">Description</label>
          <div class="control">
            <textarea class="textarea" id="contractAdd--contractDescription" name="contractDescription"></textarea>
          </div>
        </div>
        <div class="field">
          <label class="label" for="contractAdd--privateContractDescription">Private Description</label>
          <div class="control">
            <textarea class="textarea" id="contractAdd--privateContractDescription" name="privateContractDescription"></textarea>
          </div>
          <p class="help">Only available to update users.</p>
        </div>
        <div class="columns">
          <div class="column">
            <div class="field">
              <label class="label" for="contractAdd--startDateString">Start Date</label>
              <div class="control has-icons-right">
                <input class="input" id="contractAdd--startDateString" name="startDateString" type="date" required />
                <span class="icon is-small 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="contractAdd--endDateString">End Date</label>
              <div class="control">
                <input class="input" id="contractAdd--endDateString" name="endDateString" type="date" />
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="contractAdd--extensionDateString">Extension Date</label>
              <div class="control">
                <input class="input" id="contractAdd--extensionDateString" name="extensionDateString" type="date" />
              </div>
            </div>
          </div>
        </div>
        <div class="facheck">
          <input id="contractAdd--hasBeenReplaced" name="hasBeenReplaced" type="checkbox" />
          <label for="contractAdd--hasBeenReplaced">
            <span data-customization="contract.alias"></span> Has Been Replaced
          </label>
        </div>
      </form>
    </section>
    <footer class="modal-card-foot is-justify-content-right">
      <button class="button is-success" type="submit" form="form--contractAdd">
        <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
        <span>Add New <span data-customization="contract.alias"></span></span>
      </button>
      <button class="button is-close-modal-button" type="button">Cancel</button>
    </footer>
  </div>
</div>