
{%- comment -%}
  Renders a shipping calculator

  Accepts:
  - form_id: {String} Form ID (required)

  Usage:
   {%- render 'shipping-calculator' -%}
{%- endcomment -%}
{%- capture calculator_content -%}
  <hdt-country-province-selector class="hdt-contents" {% if customer and customer.default_address %}country="{{ customer.default_address.country | escape }}"{% endif %}>
    <div class="hdt-field">
      <label for="ShippingCountry_{{ form_id }}">{{ 'sections.cart.shipping_estimator.country' | t }}</label>
      <select id="ShippingCountry_{{ form_id }}" name="address[country]" data-default="{% if customer %}{{ customer.default_address.country }}{% endif %}">{{- country_option_tags -}}</select>
    </div>
    <div class="hdt-field">
      <label for="ShippingProvince_{{ form_id }}" id="address_province_label">{{ 'sections.cart.shipping_estimator.province' | t }}</label>
      <select id="ShippingProvince_{{ form_id }}" name="address[province]" data-default="{% if customer %}{{ customer.default_address.province }}{% endif %}"></select>
    </div>
  </hdt-country-province-selector>
  <div class="hdt-field">
    <label for="ShippingZip_{{ form_id }}">{{ 'sections.cart.shipping_estimator.zip_code' | t }}</label>
    <input type="text" data-opend-focus id="ShippingZip_{{ form_id }}" name="address[zip]" value="{% if customer %}{{ customer.default_address.zip }}{% endif %}"/>
  </div>
  {%- if request.page_type != 'cart' -%}
    <div class="hdt-cart__tool-btns hdt-row-flex hdt-flex-cols-1 lg:hdt-flex-cols-2 hdt-justify-center hdt-align-center hdt-text-center">
      <div class="hdt-col">
        <button type="button" class="hdt-cart__tool-primary hdt-get__rates hdt-inline-flex hdt-align-center hdt-justify-center hdt-relative hdt-btn hdt-oh hdt-btn-solid hdt-font-semibold"><span class="hdt-truncate">{{ 'sections.cart.shipping_estimator.estimate' | t }}</span></button>
      </div>
      <div class="hdt-col">
        <wrapp-close-btn>
          <button type="button" class="hdt-cart-tool__back hdt-inline-flex hdt-align-center hdt-justify-center hdt-relative hdt-btn hdt-oh hdt-btn-link hdt-font-semibold"><span class="hdt-truncate">{{ 'sections.cart.tool.cancel' | t }}</span></button>
        </wrapp-close-btn>
      </div>
    </div>
  {%- else -%}
    <div class="hdt-cart__tool-btns">
      <button type="button" class="hdt-cart__tool-primary hdt-get__rates hdt-inline-flex hdt-align-center hdt-justify-center hdt-relative hdt-btn hdt-oh hdt-btn-solid hdt-font-semibold" style="width:50%"><span class="hdt-truncate">{{ 'sections.cart.shipping_estimator.estimate' | t }}</span></button>
    </div>
  {%- endif -%}
  <div role="region" aria-live="polite" class="hdt-response__rates"></div>
  <template data-lang-rates class="hdt-hidden">
  {
    "multiple_rates": {{ 'sections.cart.shipping_estimator.multiple_rates' | t | json }},
    "one_rate": {{ 'sections.cart.shipping_estimator.one_rate' | t | json }},
    "no_rates": {{ 'sections.cart.shipping_estimator.no_rates' | t | json }},
    "errors": {{ 'sections.cart.shipping_estimator.errors' | t | json }},
    "free": {{ 'sections.cart.shipping_estimator.free' | t | json }}
  }
  </template>
{%- endcapture -%}
<hdt-shipping-calculator class="hdt-shipping-calculator hdt-block" id="shipping-calculator-{{ form_id }}">
  {%- unless calculator_accordion -%}
    <div class="hdt-shipping-calculator-heading hdt-s-text">
      <div class="hdt-shipping-calculator-heading-icon hdt-inline-flex hdt-align-center hdt-justify-center hdt-rounded-full">
        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="15" viewBox="0 0 21 15" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.441406 1.13155C0.441406 0.782753 0.724159 0.5 1.07295 0.5H12.4408C12.7896 0.5 13.0724 0.782753 13.0724 1.13155V2.91575H16.7859C18.8157 2.91575 20.5581 4.43473 20.5581 6.42296V11.8878C20.5581 12.2366 20.2753 12.5193 19.9265 12.5193H18.7542C18.4967 13.6534 17.4823 14.5 16.2703 14.5C15.0582 14.5 14.0439 13.6534 13.7864 12.5193H7.20445C6.94692 13.6534 5.93259 14.5 4.72054 14.5C3.50849 14.5 2.49417 13.6534 2.23664 12.5193H1.07295C0.724159 12.5193 0.441406 12.2366 0.441406 11.8878V1.13155ZM2.26988 11.2562C2.57292 10.1881 3.55537 9.40578 4.72054 9.40578C5.88572 9.40578 6.86817 10.1881 7.17121 11.2562H11.8093V1.76309H1.7045V11.2562H2.26988ZM13.0724 4.17884V6.68916H19.295V6.42296C19.295 5.2348 18.2252 4.17884 16.7859 4.17884H13.0724ZM19.295 7.95226H13.0724V11.2562H13.8196C14.1227 10.1881 15.1051 9.40578 16.2703 9.40578C17.4355 9.40578 18.4179 10.1881 18.7209 11.2562H19.295V7.95226ZM4.72054 10.6689C4.0114 10.6689 3.43652 11.2437 3.43652 11.9529C3.43652 12.662 4.0114 13.2369 4.72054 13.2369C5.42969 13.2369 6.00456 12.662 6.00456 11.9529C6.00456 11.2437 5.42969 10.6689 4.72054 10.6689ZM16.2703 10.6689C15.5611 10.6689 14.9863 11.2437 14.9863 11.9529C14.9863 12.662 15.5611 13.2369 16.2703 13.2369C16.9794 13.2369 17.5543 12.662 17.5543 11.9529C17.5543 11.2437 16.9794 10.6689 16.2703 10.6689Z"/></svg>
      </div>
      <span class="hdt-inline-block hdt-font-semibold">{{ 'sections.cart.shipping_estimator.title' | t }}</span>
    </div>
    {{ calculator_content }}
  {%- else -%}
  <hdt-accordion class="hdt-contents">
    <details aria-expanded="false" class="hdt-shipping-calculator__accordion">
      <summary class="hdt-flex hdt-align-center hdt-relative hdt-justify-between">
        <h3 class="hdt-shipping-calculator__title hdt-text-lg hdt-font-semibold">{{ 'sections.cart.shipping_estimator.title' | t }}</h3>  
        <span class="hdt-shipping-calculator__accordion-icon hdt-s-text hdt-relative"></span>
      </summary>
      <div class="hdt-shipping-calculator__accordion-content">{{ calculator_content }}</div>
    </details>
  </hdt-accordion>
  {%- endunless -%}
</hdt-shipping-calculator>