cityssm/lottery-licence-manager

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <h3 class="modal-card-title">Add a Transaction</h3>
      <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
    </header>
    <section class="modal-card-body">
      <form id="form--transactionAdd">
        <div class="columns">
          <div class="column">
            <p>
              <strong>Licence Fee</strong><br />
              $<span id="transactionAdd--licenceFee"></span>
            </p>
          </div>
          <div class="column is-narrow align-self-flex-end">
            <i class="fas fa-minus" aria-hidden="true"></i>
          </div>
          <div class="column">
            <p>
              <strong>Transaction Total</strong><br />
              $<span id="transactionAdd--transactionTotal"></span>
            </p>
          </div>
          <div class="column is-narrow align-self-flex-end">
            <i class="fas fa-equals" aria-hidden="true"></i>
          </div>
          <div class="column">
            <p>
              <strong>Discrepancy</strong><br />
              $<span id="transactionAdd--discrepancy"></span>
            </p>
          </div>
        </div>

        <input id="transactionAdd--licenceID" name="licenceID" type="hidden" />
        <input id="transactionAdd--issueLicence" name="issueLicence" type="hidden" value="false" />

        <div class="columns">
          <div class="column">
            <div class="field">
              <label class="label" for="transactionAdd--transactionAmount">Transaction Amount</label>
              <div class="control has-icons-left">
                <input class="input has-text-right" id="transactionAdd--transactionAmount" name="transactionAmount" type="number" 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 class="column">
            <div class="field">
              <label class="label" for="transactionAdd--externalReceiptNumber">&nbsp;</label>
              <div class="control">
                <input class="input" id="transactionAdd--externalReceiptNumber" name="externalReceiptNumber" type="text" maxlength="20" />
              </div>
            </div>
          </div>
        </div>
        <div class="field mb-4">
          <label class="label" for="transactionAdd--transactionNote">Notes</label>
          <div class="control">
            <textarea class="textarea" id="transactionAdd--transactionNote" name="transactionNote"></textarea>
          </div>
        </div>
      </form>
    </section>
    <footer class="modal-card-foot justify-right">
      <button class="button is-success is-hidden" id="is-add-transaction-issue-licence-button" type="button">Add Transaction and Issue Licence</button>
      <button class="button is-success" type="submit" form="form--transactionAdd">Add Transaction</button>
      <button class="button is-close-modal-button" type="button">Cancel</button>
    </footer>
  </div>
</div>