{% import "_includes/forms" as forms %}
{% set name = (namespaceInputName is not defined) ? 'address' : namespaceInputName %}
{% set addressBox = (namespaceInputId is not defined) ? 'sproutaddressinfo-box' : 'sproutaddressinfo-box-' ~ namespaceInputId %}

{% set addressInput %}
    <div class="{{ addressBox }}"
            {% if addressId is defined and addressId %}
                data-addressinfoid='{{ addressId }}'
            {% endif %}

            {% if defaultCountryCode is defined and defaultCountryCode %}
                data-defaultcountrycode='{{ defaultCountryCode }}'
            {% endif %}

            {% if hideCountryDropdown is defined and hideCountryDropdown %}
                data-hidecountrydropdown='{{ hideCountryDropdown }}'
            {% endif %}
    >
        <div class='address-add-button hidden'>
            <a class='btn add icon dashed sproutaddress-edit'
               href='#'>{{ "Add Address"|t('sprout-base') }}</a>
        </div>
        <div class='address-edit-buttons hidden'>
            <a class='small btn right icon sproutaddress-edit clear-button'
               href='#'>{{ "Clear"|t('sprout-base') }}</a>
            <a class='small btn right icon sproutaddress-edit update-button'
               href='#'>{{ "Edit"|t('sprout-base') }}</a>
        </div>
        <div class='address-format hidden'>
            {{ addressFormat|raw }}
        </div>
        <div class='sproutaddress-form hidden'>
            {{ countryInput|raw }}
            {{ addressForm|raw }}
            <input type="hidden" name="{{ field.handle }}[delete]" />
        </div>
    </div>

{% endset %}

{{ forms.field({
}, addressInput) }}

{% do view.registerAssetBundle("barrelstrength\\sproutbase\\app\\fields\\web\\assets\\address\\AddressFieldAsset") %}

{% css %}
    /**
    * Address Field
    */
    .{{ addressBox }} {
    display: inline-flex;
    justify-content: flex-start;
    }
    .{{ addressBox }} .address-add-button {
    order: 1;
    }
    .{{ addressBox }} .address-edit-buttons {
    order: 3;
    }
    .{{ addressBox }} .address-format {
    order: 2;
    padding-right: 20px;
    }

    .sproutaddress-body .text,
    .sproutaddress-body .select {
    padding: 0;
    }

    .sproutaddress-modal {
    overflow: visible;
    min-width: 380px!important;
    }

    .modal .sproutaddress-body {
    padding: 0;
    }
{% endcss %}

{% js %}
    $( document ).ready(function() {
    new Craft.SproutBase.AddressBox($('.{{ addressBox }}'), { namespace: '{{ name }}' })
    });
{% endjs %}