{{inject 'shippingCountryErrorMessage' (lang 'cart.shipping_estimator.empty_country_error')}}
{{inject 'shippingProvinceErrorMessage' (lang 'cart.shipping_estimator.empty_province_error')}}

{{#if shipping_cost}}
    <div class="cart-total-value">
        <div class="subtotal shipping-estimate-show">
            <a href="#" class="shipping-estimate-value">{{shipping_cost.formatted}}</a>
        </div>
    </div>
{{else}}
    <div class="cart-total-value">
        <button data-collapsible="add-shipping" class="shipping-estimate-show" aria-labelledby="estimator-add">
            <span class="shipping-estimate-show__btn-name">{{lang 'cart.shipping_estimator.add_info'}}</span>
            <span id="estimator-add" class="u-hidden">{{lang 'cart.shipping_estimator.add_info'}}</span>
            <span id="estimator-close" class="u-hidden">{{lang 'cart.shipping_estimator.cancel'}}</span>
        </button>
    </div>
{{/if}}

<div id="add-shipping" class="shipping-estimator u-hidden">
    <form class="form estimator-form" data-shipping-estimator>
        <dl>
            <dt class="estimator-form-label">
                <label class="form-label" for="shipping-country">{{lang 'cart.shipping_estimator.select_a_country'}}</label>
            </dt>

            <dd class="estimator-form-input">
                <select class="form-select" id="shipping-country" name="shipping-country" data-field-type="Country">
                    <option>{{lang 'cart.shipping_estimator.select_a_country'}}</option>
                    {{#each countries}}
                        <option value="{{id}}" {{#if selected}}selected="selected"{{/if}}>
                            {{name}}
                        </option>
                    {{/each}}
                </select>
            </dd>

            <dt class="estimator-form-label">
                <label class="form-label" for="shipping-state">{{lang 'cart.shipping_estimator.select_a_state'}}</label>
            </dt>

            <dd class="estimator-form-input">
                {{#if states.length}}
                    <select class="form-select" id="shipping-state" name="shipping-state" data-field-type="State">
                        <option>{{lang 'cart.shipping_estimator.select_a_state'}}</option>
                        {{#each states}}
                            <option value="{{id}}" {{#if selected}}selected="selected"{{/if}}>
                                {{name}}
                            </option>
                        {{/each}}
                    </select>
                {{else}}
                    <input class="form-input" type="text" id="shipping-state" name="shipping-state" data-field-type="State" placeholder="{{lang 'cart.shipping_estimator.select_a_state'}}">
                {{/if}}
            </dd>

            <dt class="estimator-form-label">
                <label class="form-label" for="shipping-city">{{lang 'cart.shipping_estimator.suburb_city'}}</label>
            </dt>
            <dd class="estimator-form-input">
                <input class="form-input" type="text" id="shipping-city" name="shipping-city" value="{{selected_city}}" placeholder="{{lang 'cart.shipping_estimator.suburb_city'}}">
            </dd>

            <dt class="estimator-form-label">
                <label class="form-label" for="shipping-zip">{{lang 'cart.shipping_estimator.zip_postal_code'}}</label>
            </dt>
            <dd class="estimator-form-input">
                <input class="form-input" type="text" id="shipping-zip" name="shipping-zip" value="{{selected_zip}}" placeholder="{{lang 'cart.shipping_estimator.zip_postal_code'}}">
            </dd>
            <button class="button button--primary button--small shipping-estimate-submit">{{lang 'cart.shipping_estimator.estimate_shipping'}}</button>
        </dl>
    </form>
    <div class="shipping-quotes" role="alert" aria-atomic="true" aria-live="assertive"></div>
</div>