cityssm/lottery-licence-manager

<div class="modal" id="is-location-lookup-modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <h3 class="modal-card-title">Select a Location</h3>
      <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
    </header>
    <section class="modal-card-body">
      <div class="tabs is-boxed">
        <ul role="tablist">
          <li class="is-active" role="presentation">
            <a id="locationTab--lookup" role="tab" href="#locationTabContent--lookup" aria-selected="true">
              <span class="icon is-small"><i class="fas fa-search" aria-hidden="true"></i></span>
              <span>Existing Locations</span>
            </a>
          </li>
          <li role="presentation">
            <a id="locationTab--create" role="tab" href="#locationTabContent--create">
              <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
              <span>Create a Location</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="tab-container">
        <div class="tab-content is-active" id="locationTabContent--lookup" role="tabpanel" aria-labelledby="locationTab--lookup">
          <label class="sr-only" for="locationLookup--searchStr">Filter Locations</label>
          <div class="control has-icons-left">
            <input class="input" id="locationLookup--searchStr" type="text" placeholder="Filter Locations" disabled />
            <span class="icon is-left">
              <i class="fas fa-filter" aria-hidden="true"></i>
            </span>
          </div>
          <div class="my-4" id="container--locationLookup">
            <p class="has-text-centered has-text-grey-lighter">
              <i class="fas fa-3x fa-circle-notch fa-spin" aria-hidden="true"></i><br />
              Loading locations...
            </p>
          </div>
        </div>
        <div class="tab-content" id="locationTabContent--create" role="tabpanel" aria-labelledby="locationTab--create">
          <form id="form--newLocation">
            <input name="locationIsDistributor" type="hidden" value="0" />
            <input name="locationIsManufacturer" type="hidden" value="0" />
            <div class="field">
              <label class="label" for="newLocation--locationName">New Location Name</label>
              <div class="control">
                <input class="input" id="newLocation--locationName" name="locationName" type="text" maxlength="100" />
              </div>
              <p class="help">If the location does not have a common name, leave it blank.</p>
            </div>
            <div class="field">
              <label class="label" for="newLocation--locationAddress1">Address</label>
              <div class="control">
                <input class="input" id="newLocation--locationAddress1" name="locationAddress1" type="text" maxlength="50" placeholder="Line 1" required />
              </div>
            </div>
            <div class="field">
              <label class="sr-only" for="newLocation--locationAddress2">Address Line 2</label>
              <div class="control">
                <input class="input" id="newLocation--locationAddress2" name="locationAddress2" type="text" maxlength="50" placeholder="Line 2" />
              </div>
            </div>
            <div class="columns">
              <div class="column is-8">
                <div class="field">
                  <label class="label" for="newLocation--locationCity">City</label>
                  <div class="control">
                    <input class="input" id="newLocation--locationCity" name="locationCity" type="text" maxlength="20" required />
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="field">
                  <label class="label" for="newLocation--locationProvince">Province</label>
                  <div class="control">
                    <input class="input" id="newLocation--locationProvince" name="locationProvince" type="text" maxlength="2" required />
                  </div>
                </div>
              </div>
            </div>
            <div class="field">
              <label class="label" for="newLocation--locationPostalCode">Postal Code</label>
              <div class="control">
                <input class="input" id="newLocation--locationPostalCode" name="locationPostalCode" type="text" minlength="5" maxlength="7" autocomplete="off" />
              </div>
            </div>
            <div class="has-text-right mb-3">
              <button class="button is-success" type="submit">
                Create Location
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
    <footer class="modal-card-foot justify-right">
      <button class="button is-close-modal-button" type="button">Cancel</button>
    </footer>
  </div>
</div>