<div class="container reduced-container bottom-space max-width-on-mobile w-container">
  <div class="w-form">
    <form>
      <legend class="form-label form-item separator">Tax calculations for a seller based in Belgium, whose only registered jurisdiction is Belgium. Please fill in buyer and purchase details:</legend>
      <div class="form-item separator">
        <div class="form-label-block">
          <label class="form-label" for="country">
            Country:
          </label>
        </div>
        <div class="form-field-block">
          <select class="form-select" id="country">
            <option value="">Select...</option>
            <option value="US" selected>United States</option>
            <option value="GB">United Kingdom</option>
            <option value="DE">Germany</option>
            <option value="FR">France</option>
            <option value="IT">Italy</option>
            <option value="ES">Spain</option>
            <option value="CA">Canada</option>
            <option value="AU">Australia</option>
          </select>
        </div>
      </div>

      <div class="form-item separator">
        <div class="form-label-block">
          <label class="form-label" for="postal-code">
            Postal code:
          </label>
        </div>
        <div class="form-field-block">

          <input class="form-field w-input" id="postal-code">
        </div>
      </div>

      <div class="form-item separator">
        <div class="form-label-block">
          <label class="form-label" for="business-number">
            Business number:
          </label>
        </div>
        <div class="form-field-block">

          <input class="form-field w-input" id="business-number">
        </div>
      </div>

      <div class="form-item separator">
        <div class="form-label-block">
          <label class="form-label" for="tax-class">
            Tax Code:
          </label>
        </div>
        <div class="form-field-block">
          <select class="form-select" id="tax-class">
            <option value="standard">standard</option>
            <option value="eservice">eservice</option>
            <option value="ebook">ebook</option>
            <option value="saas">saas</option>
          </select>
        </div>
      </div>
    </form>
  </div>
  <div class="h3 result">Taxes: <span id="tax-rate"></span>
  </div>
</div>

$blue: #324d5c;
$blue-90: #eaedee; //rgba($blue, 0.9)

* {
  box-sizing: border-box;
}

Body{
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  background-color: $blue-90;
}

input, select {
  width: 100%;
}

.result {
    font-weight:700;
}

 // never expose your private API key on your frontend, use the public API key instead
let publishableKey = "pk_test_sehLRfXzfy1M6KuLFPBs";
  Quaderno.init(publishableKey).then(function(){
    console.log('Quaderno.js successfully initialized');
  }).catch(function(error){
    console.log(error.description, error.messages);
  });    

function reloadTaxes(options){
      console.log("Calling calculateTaxes with params", options)
      Quaderno.calculateTaxes(options).then(function(taxObject){
        console.log("Taxes calculated:", taxObject)
        taxObject.name === null ? taxObject.name = '' : taxObject.name
        document.querySelector('#tax-rate').innerHTML = taxObject.name + " " + taxObject.rate + "%"; // ie.: VAT 20%
      })
    }

    // Handle the change events on the relevant user-inputs
    document.querySelector('#country').addEventListener('change', function () {
      country = this.value
      postalCode = document.querySelector('#postal-code').value
      businessNumber = document.querySelector('#business-number').value

      reloadTaxes({ country: country, postalCode: postalCode, businessNumber: businessNumber})
    })

    document.querySelector('#postal-code').addEventListener('change', function () {
      postalCode = this.value
      country = document.querySelector('#country').value
      businessNumber = document.querySelector('#business-number').value

      reloadTaxes({ country: country, postalCode: postalCode, businessNumber: businessNumber })
    })

    document.querySelector('#business-number').addEventListener('change', function () {
      businessNumber = this.value
      country = document.querySelector('#country').value
      postalCode = document.querySelector('#postal-code').value

      Quaderno.validateBusinessNumber(businessNumber, country).then(function(){
        reloadTaxes({ businessNumber: businessNumber, country: country, postalCode: postalCode })
      })
    })

    document.querySelector('#tax-class').addEventListener('change', function () {
      taxClass = this.value
      country = document.querySelector('#country').value
      postalCode = document.querySelector('#postal-code').value
      businessNumber = document.querySelector('#business-number').value

      reloadTaxes({ taxClass: taxClass, country: country, postalCode: postalCode, businessNumber: businessNumber })
    })