cityssm/parking-ticket-system

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <h3 class="modal-card-title">Edit an Offence</h3>
      <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
    </header>
    <section class="modal-card-body">
      <form id="form--offenceEdit">
        <input id="offenceEdit--locationKey" name="locationKey" type="hidden" />
        <input id="offenceEdit--bylawNumber" name="bylawNumber" type="hidden" />
        <div class="columns">
          <div class="column">
            <div class="has-text-centered has-tooltip-bottom" data-tooltip="Location">
              <span id="offenceEdit--locationName"></span><br />
              <span class="is-size-7" id="offenceEdit--locationClass"></span>
            </div>
          </div>
          <div class="column">
            <div class="has-text-centered has-tooltip-bottom" data-tooltip="By-Law">
              <span id="offenceEdit--bylawNumberSpan"></span><br />
              <span class="is-size-7" id="offenceEdit--bylawDescription"></span>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column">
            <div class="field">
              <label class="label" for="offenceEdit--accountNumber">Account Number</label>
              <div class="control">
                <input class="input" id="offenceEdit--accountNumber" name="accountNumber" type="text" />
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="offenceEdit--offenceAmount">Offence Amount</label>
              <div class="control has-icons-left">
                <input class="input has-text-right" id="offenceEdit--offenceAmount" name="offenceAmount" type="number" min="0" max="9999.99" step="0.01" required onwheel="return false;" />
                <span class="icon is-left">
                  <i class="fas fa-dollar-sign" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column">
            <div class="field">
              <label class="label" for="offenceEdit--discountDays">Discount Days</label>
              <div class="control">
                <input class="input has-text-right" id="offenceEdit--discountDays" name="discountDays" type="number" min="0" max="60" step="1" required onwheel="return false;" />
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="offenceEdit--discountOffenceAmount">Discount Offence Amount</label>
              <div class="control has-icons-left">
                <input class="input has-text-right" id="offenceEdit--discountOffenceAmount" name="discountOffenceAmount" type="number" min="0" max="9999.99" step="0.01" required onwheel="return false;" />
                <span class="icon is-left">
                  <i class="fas fa-dollar-sign" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="field mb-4">
          <label class="label" for="offenceEdit--parkingOffence">Offence Description</label>
          <div class="control">
            <textarea class="textarea" id="offenceEdit--parkingOffence" name="parkingOffence"></textarea>
          </div>
        </div>
      </form>
    </section>
    <footer class="modal-card-foot justify-flex-end">
      <button class="button is-close-modal-button" type="button">Cancel</button>
      <button class="button is-success" type="submit" form="form--offenceEdit">
        <span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
        <span>Update Offence</span>
      </button>
      <button class="button is-danger is-delete-button" type="button">
        <span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>
        <span>Remove</span>
      </button>
    </footer>
  </div>
</div>