{% comment %}
  Cart Shipping Calculator (postcode based)
  Shopify Dawn theme only
{% endcomment %}

<div class="cart-shipping-calc" data-cart-shipping-calc>
  <h3 class="cart-shipping-calc__title h5">
    {{ 'general.cart.shipping_calculator.title' | t }}
  </h3>

  <div class="cart-shipping-calc__form">
    <!-- Postcode -->
    <div class="field cart-shipping-calc__field">
      <input
        id="CartShippingZip"
        class="field__input cart-shipping-calc__input"
        name="shipping_address[zip]"
        type="text"
        inputmode="text"
        autocomplete="postal-code"
        placeholder=" "
        data-cart-shipping-zip
      >
      <label class="field__label" for="CartShippingZip">Postcode</label>
    </div>

    <!-- Country -->
    <div class="cart-shipping-calc__field">
      <div class="select">
        <select
          id="CartShippingCountry"
          class="select__select cart-shipping-calc__select"
          name="shipping_address[country]"
          data-cart-shipping-country
        >
          <option value="Australia" selected>Australia</option>
        </select>
        <span class="select__caret"></span>
      </div>
      <label class="field__label" for="CartShippingCountry">Country</label>
    </div>

    <!-- State -->
    <div class="cart-shipping-calc__field">
      <div class="select">
        <select
          id="CartShippingProvince"
          class="select__select cart-shipping-calc__select"
          name="shipping_address[province]"
          data-cart-shipping-province
        >
          <option value="">Select state</option>
          <option value="Australian Capital Territory">Australian Capital Territory</option>
          <option value="New South Wales">New South Wales</option>
          <option value="Northern Territory">Northern Territory</option>
          <option value="Queensland">Queensland</option>
          <option value="South Australia">South Australia</option>
          <option value="Tasmania">Tasmania</option>
          <option value="Victoria">Victoria</option>
          <option value="Western Australia">Western Australia</option>
        </select>
        <span class="select__caret"></span>
      </div>
      <label class="field__label" for="CartShippingProvince">State</label>
    </div>

    <button
      type="button"
      class="button cart-shipping-calc__button"
      data-cart-shipping-submit
    >
      Calculate
    </button>
  </div>

  <div
    class="cart-shipping-calc__status"
    aria-live="polite"
    data-cart-shipping-status
  ></div>

  <div
    class="cart-shipping-calc__results"
    hidden
    data-cart-shipping-results
  >
    <ul
      class="cart-shipping-calc__rates list-unstyled"
      data-cart-shipping-rates
    ></ul>

    <div
      class="cart-shipping-calc__summary"
      hidden
      data-cart-shipping-summary
    >
      <p class="cart-shipping-calc__summary-line">
        <span>Estimated total</span>
        <strong data-cart-shipping-est-total></strong>
      </p>
      <small class="cart-shipping-calc__note">
        Final shipping and taxes are confirmed at checkout.
      </small>
    </div>
  </div>
</div>