{% block component_address_form %}
    {# ludtwig-ignore twig-block-name-snake-case #}
    {% block component_address_form_addressId %}
        {% if data.get('id') %}
            <input type="hidden"
                   name="{{ prefix }}[id]"
                   value="{{ data.get('id') }}">
        {% endif %}
    {% endblock %}

    {% block component_address_form_company %}
        {% if showFormCompany %}
            {% if config('core.loginRegistration.showAccountTypeSelection') %}
                {% set accountTypeRequired = true %}
            {% endif %}

            {% if config('core.loginRegistration.showAccountTypeSelection') or prefix == 'address' or prefix == 'shippingAddress' or hasSelectedBusiness %}
                <div class="{% if prefix == 'shippingAddress' or hasSelectedBusiness %}address-contact-type-company{% elseif prefix == 'address' %}js-field-toggle-contact-type-company d-block{% else %}js-field-toggle-contact-type-company d-none{% endif %}">
                    {% block component_address_form_company_fields %}
                        <div class="row g-2">
                            {% block component_address_form_company_name %}
                                <div class="form-group col-6">
                                    {% if formViolations.getViolations('/company') is not empty %}
                                        {% set violationPath = '/company' %}
                                    {% elseif formViolations.getViolations("/#{prefix}/company") is not empty %}
                                        {% set violationPath = "/#{prefix}/company" %}
                                    {% endif %}

                                    {% block component_address_form_company_name_label %}
                                        <label class="form-label"
                                               for="{{ idPrefix ~ prefix }}company">
                                            {{ 'address.companyNameLabel'|trans|sw_sanitize }}{% if prefix != 'shippingAddress' and accountTypeRequired %}{{ 'general.required'|trans|sw_sanitize }}{% endif %}
                                        </label>
                                    {% endblock %}

                                    {% block component_address_form_company_name_input %}
                                        <input type="text"
                                               class="form-control{% if violationPath %} is-invalid{% endif %}"
                                               autocomplete="organization"
                                               id="{{ idPrefix ~ prefix }}company"
                                               placeholder="{{ 'address.companyNamePlaceholder'|trans|striptags }}"
                                               name="{{ prefix }}[company]"
                                               value="{{ data.get('company') }}"
                                               {% if prefix != 'shippingAddress' and accountTypeRequired %}required="required"{% endif %}>
                                    {% endblock %}

                                    {% block component_address_form_company_name_input_error %}
                                        {% if violationPath %}
                                            {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                                        {% endif %}
                                    {% endblock %}
                                </div>
                            {% endblock %}

                            {% block component_address_form_company_department %}
                                <div class="form-group col-md-6">
                                    {% if formViolations.getViolations('/department') is not empty %}
                                        {% set violationPath = '/department' %}
                                    {% elseif formViolations.getViolations("/#{prefix}/department") is not empty %}
                                        {% set violationPath = "/#{prefix}/department" %}
                                    {% endif %}

                                    {% block component_address_form_company_department_label %}
                                        <label class="form-label"
                                               for="{{ idPrefix ~ prefix }}department">
                                            {{ 'address.companyDepartmentLabel'|trans|sw_sanitize }}
                                        </label>
                                    {% endblock %}

                                    {% block component_address_form_company_department_input %}
                                        <input type="text"
                                               class="form-control{% if violationPath %} is-invalid{% endif %}"
                                               id="{{ idPrefix ~ prefix }}department"
                                               placeholder="{{ 'address.companyDepartmentPlaceholder'|trans|striptags }}"
                                               name="{{ prefix }}[department]"
                                               value="{{ data.get('department') }}">
                                    {% endblock %}

                                    {% block component_address_form_company_department_input_error %}
                                        {% if violationPath %}
                                            {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                                        {% endif %}
                                    {% endblock %}
                                </div>
                            {% endblock %}

                            {# ludtwig-ignore twig-block-name-snake-case #}
                            {% block component_address_form_company_vatId %}
                                {% if prefix == 'address' and showVatIdField %}
                                    <div class="form-group col-md-6">
                                        {% sw_include '@Storefront/storefront/component/address/address-personal-vat-id.html.twig' with {
                                            vatIds: context.customer.vatIds
                                        } %}
                                    </div>
                                {% endif %}
                            {% endblock %}
                        </div>
                    {% endblock %}
                </div>
            {% endif %}
        {% endif %}
    {% endblock %}

    {% block component_address_form_address_fields %}
        {% set options = {
            scopeElementSelector,
            prefix,
        } %}

        <div class="row g-2">
            {% block component_address_form_street %}
                <div class="form-group col-md-6">
                    {% if formViolations.getViolations('/street') is not empty %}
                        {% set violationPath = '/street' %}
                    {% elseif formViolations.getViolations("/#{prefix}/street") is not empty %}
                        {% set violationPath = "/#{prefix}/street" %}
                    {% else %}
                        {% set requiredMessage = 'error.VIOLATION::IS_BLANK_ERROR'|trans({ '%field%': 'address.streetLabel'|trans|sw_sanitize }) %}
                    {% endif %}

                    {% block component_address_form_street_label %}
                        <label class="form-label"
                               for="{{ idPrefix ~ prefix }}AddressStreet">
                            {{ 'address.streetLabel'|trans|sw_sanitize }}{{ 'general.required'|trans|sw_sanitize }}
                        </label>
                    {% endblock %}

                    {% block component_address_form_street_input %}
                        <input type="text"
                               class="form-control{% if violationPath %} is-invalid{% endif %}"
                               autocomplete="{% if prefix == 'shippingAddress' %}shipping {% elseif prefix == 'billingAddress' %}billing {% endif %}address-line1"
                               id="{{ idPrefix ~ prefix }}AddressStreet"
                               placeholder="{{ 'address.streetPlaceholder'|trans|striptags }}"
                               name="{{ prefix }}[street]"
                               value="{{ data.get('street') }}"
                               data-form-validation-required
                               {% if requiredMessage is defined %}data-form-validation-required-message="{{ requiredMessage }}"{% endif %}
                               required="required">
                    {% endblock %}

                    {% block component_address_form_street_input_error %}
                        {% if violationPath %}
                            {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                        {% endif %}
                    {% endblock %}
                </div>
            {% endblock %}

            {% block component_address_form_zipcode_city %}
                {% set zipcodeField %}
                    {% set zipcodeValue = formViolations.getInputData()['zipcode'] ?? data.get('zipcode') %}

                    {% if formViolations.getViolations('/zipcode') is not empty %}
                        {% set violationPath = '/zipcode' %}
                    {% elseif formViolations.getViolations("/#{prefix}/zipcode") is not empty %}
                        {% set violationPath = "/#{prefix}/zipcode" %}
                    {% else %}
                        {% set requiredMessage = 'error.VIOLATION::IS_BLANK_ERROR'|trans({ '%field%': 'address.zipcodeLabel'|trans|sw_sanitize }) %}
                    {% endif %}

                    {% block component_address_form_zipcode_label %}
                        <label class="form-label"
                               for="{{ idPrefix ~ prefix }}AddressZipcode">
                            {{ 'address.zipcodeLabel'|trans|sw_sanitize }}<span class="d-none" id="zipcodeLabel">{{ 'general.required'|trans|sw_sanitize }}</span>
                        </label>
                    {% endblock %}

                    {% block component_address_form_zipcode_input %}
                        <input type="text"
                               class="form-control{% if violationPath %} is-invalid{% endif %}"
                               autocomplete="{% if prefix == 'shippingAddress' %}shipping {% elseif prefix == 'billingAddress' %}billing {% endif %}postal-code"
                               id="{{ idPrefix ~ prefix }}AddressZipcode"
                               placeholder="{{ 'address.zipcodePlaceholder'|trans|striptags }}"
                               name="{{ prefix }}[zipcode]"
                               value="{{ zipcodeValue }}"
                               data-input-name="zipcodeInput"
                        >
                    {% endblock %}

                    {% block component_address_form_zipcode_error %}
                        {% if violationPath %}
                            {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                        {% endif %}
                    {% endblock %}
                {% endset %}

                {% set cityField %}
                    {% if formViolations.getViolations('/city') is not empty %}
                        {% set violationPath = '/city' %}
                    {% elseif formViolations.getViolations("/#{prefix}/city") is not empty %}
                        {% set violationPath = "/#{prefix}/city" %}
                    {% else %}
                        {% set requiredMessage = 'error.VIOLATION::IS_BLANK_ERROR'|trans({ '%field%': 'address.cityLabel'|trans|sw_sanitize }) %}
                        {% set violationPath = null %}
                    {% endif %}

                    {% block component_address_form_city_label %}
                        <label class="form-label"
                               for="{{ idPrefix ~ prefix }}AddressCity">
                            {{ 'address.cityLabel'|trans|sw_sanitize }}{{ 'general.required'|trans|sw_sanitize }}
                        </label>
                    {% endblock %}

                    {% block component_address_form_city_input %}
                        <input type="text"
                               class="form-control{% if violationPath %} is-invalid{% endif %}"
                               autocomplete="{% if prefix == 'shippingAddress' %}shipping {% elseif prefix == 'billingAddress' %}billing {% endif %}address-level2"
                               id="{{ idPrefix ~ prefix }}AddressCity"
                               placeholder="{{ 'address.cityPlaceholder'|trans|striptags }}"
                               name="{{ prefix }}[city]"
                               value="{{ data.get('city') }}"
                               data-form-validation-required
                               {% if requiredMessage is defined %}data-form-validation-required-message="{{ requiredMessage }}"{% endif %}
                               required="required">
                    {% endblock %}

                    {% block component_address_form_city_error %}
                        {% if violationPath %}
                            {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                        {% endif %}
                    {% endblock %}
                {% endset %}

                {% set wrappedZipcodeField %}
                    {% block component_address_form_zipcode_field %}
                        <div class="form-group col-md-2 col-4">
                            {{ zipcodeField }}
                        </div>
                    {% endblock %}
                {% endset %}

                {% set wrappedCityField %}
                    {% block component_address_form_city_field %}
                        <div class="form-group col-md-4 col-8">
                            {{ cityField }}
                        </div>
                    {% endblock %}
                {% endset %}

                {% block component_address_form_zipcode_city_fields %}
                    {% if config('core.loginRegistration.showZipcodeInFrontOfCity') %}
                        {{ wrappedZipcodeField }}
                        {{ wrappedCityField }}
                    {% else %}
                        {{ wrappedCityField }}
                        {{ wrappedZipcodeField }}
                    {% endif %}
                {% endblock %}
            {% endblock %}

            {% block component_address_form_additional_field1 %}
                {% if config('core.loginRegistration.showAdditionalAddressField1') %}
                    {% if formViolations.getViolations('/additionalAddressLine1') is not empty %}
                        {% set violationPath = '/additionalAddressLine1' %}
                    {% elseif formViolations.getViolations("/#{prefix}/additionalAddressLine1") is not empty %}
                        {% set violationPath = "/#{prefix}/additionalAddressLine1" %}
                    {% endif %}

                    <div class="form-group col-md-6">
                        {% block component_address_form_additional_field1_label %}
                            <label class="form-label"
                                   for="{{ idPrefix ~ prefix }}AdditionalField1">
                                {{ 'address.additionalField1Label'|trans|sw_sanitize }}{{ config('core.loginRegistration.additionalAddressField1Required') ? 'general.required'|trans|sw_sanitize }}
                            </label>
                        {% endblock %}

                        {% block component_address_form_additional_field1_input %}
                            <input type="text"
                                   class="form-control {% if violationPath %} is-invalid{% endif %}"
                                   autocomplete="{% if prefix == 'shippingAddress' %}shipping {% elseif prefix == 'billingAddress' %}billing {% endif %}address-line2"
                                   id="{{ idPrefix ~ prefix }}AdditionalField1"
                                   placeholder="{{ 'address.additionalField1Placeholder'|trans|striptags }}"
                                   name="{{ prefix }}[additionalAddressLine1]"
                                   value="{{ data.get('additionalAddressLine1') }}"
                                    {{ config('core.loginRegistration.additionalAddressField1Required') ? 'required="true"' }}>
                        {% endblock %}

                        {% block component_address_form_additional_field1_error %}
                            {% if violationPath %}
                                {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                            {% endif %}
                        {% endblock %}
                    </div>
                {% endif %}
            {% endblock %}

            {% block component_address_form_additional_field2 %}
                {% if config('core.loginRegistration.showAdditionalAddressField2') %}
                    {% if formViolations.getViolations('/additionalAddressLine2') is not empty %}
                        {% set violationPath = '/additionalAddressLine2' %}
                    {% elseif formViolations.getViolations("/#{prefix}/additionalAddressLine2") is not empty %}
                        {% set violationPath = "/#{prefix}/additionalAddressLine2" %}
                    {% endif %}
                    <div class="form-group col-md-6">
                        {% block component_address_form_additional_field2_label %}
                            <label class="form-label"
                                   for="{{ idPrefix ~ prefix }}AdditionalField2">
                                {{ 'address.additionalField2Label'|trans|sw_sanitize }}{{ config('core.loginRegistration.additionalAddressField2Required') ? 'general.required'|trans|sw_sanitize }}
                            </label>
                        {% endblock %}

                        {% block component_address_form_additional_field2_input %}
                            <input type="text"
                                   class="form-control {% if violationPath %} is-invalid{% endif %}"
                                   autocomplete="{% if prefix == 'shippingAddress' %}shipping {% elseif prefix == 'billingAddress' %}billing {% endif %}address-line3"
                                   id="{{ idPrefix ~ prefix }}AdditionalField2"
                                   placeholder="{{ 'address.additionalField2Placeholder'|trans|striptags }}"
                                   name="{{ prefix }}[additionalAddressLine2]"
                                   value="{{ data.get('additionalAddressLine2') }}"
                                    {{ config('core.loginRegistration.additionalAddressField2Required') ? 'required="true"' }}>
                        {% endblock %}

                        {% block component_address_form_additional_field2_error %}
                            {% if violationPath %}
                                {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                            {% endif %}
                        {% endblock %}
                    </div>
                {% endif %}
            {% endblock %}
        </div>

        <div class="row g-2 country-and-state-form-elements" data-country-state-select="true" data-country-state-select-options="{{ options|json_encode }}">
            {% block component_address_form_country %}
                <div class="form-group col-md-6">
                    {% set initialCountryId = null %}

                    {% if data.get('countryId') %}
                        {% set initialCountryId = data.get('countryId') %}
                    {% elseif page.countries|length == 1 and disableNonShippableCountries is not defined %}
                        {% set initialCountryId = (page.countries|first).id %}
                    {% endif %}

                    {% if formViolations.getViolations('/countryId') is not empty %}
                        {% set violationPath = '/countryId' %}
                    {% elseif formViolations.getViolations("/#{prefix}/countryId") is not empty %}
                        {% set violationPath = "/#{prefix}/countryId" %}
                    {% endif %}

                    {% block component_address_form_country_label %}
                        <label class="form-label"
                               for="{{ idPrefix ~ prefix }}AddressCountry">
                            {{ 'address.countryLabel'|trans|sw_sanitize }}{{ 'general.required'|trans|sw_sanitize }}
                        </label>
                    {% endblock %}

                    {% block component_address_form_country_select %}
                        <select class="country-select form-select{% if violationPath %} is-invalid{% endif %}"
                                id="{{ idPrefix ~ prefix }}AddressCountry"
                                name="{{ prefix }}[countryId]"
                                required="required"
                                data-initial-country-id="{{ initialCountryId }}">
                            {% if not initialCountryId %}
                                <option disabled="disabled"
                                        value=""
                                        selected="selected">
                                    {{ 'address.countryPlaceholder'|trans|sw_sanitize }}
                                </option>
                            {% endif %}
                            {% for country in page.countries %}
                                <option {% if country.id == initialCountryId %}
                                        selected="selected"
                                        {% endif %}
                                        value="{{ country.id }}"
                                        data-zipcode-required="{{ country.postalCodeRequired }}"
                                        data-vat-id-required="{{ country.vatIdRequired }}"
                                        data-state-required="{{ country.forceStateInRegistration }}"
                                        {% if not country.shippingAvailable and disableNonShippableCountries %}
                                            disabled="disabled"
                                        {% endif %}>
                                    {{ country.translated.name }}{% if showNoShippingPostfix and not country.shippingAvailable %} {{ 'address.countryPostfixNoShipping'|trans|sw_sanitize }}{% endif %}
                                </option>
                            {% endfor %}
                        </select>
                    {% endblock %}

                    {# @deprecated tag:v6.7.0 - will be renamed to component_address_form_country_error #}
                    {% block component_address_form_country_violation_error %}
                        {% if violationPath %}
                            {% set violationLabel = 'address.countryLabel'|trans|sw_sanitize %}
                            {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                        {% endif %}
                    {% endblock %}
                </div>

                <div class="form-group col-md-6 d-none">
                    {% if formViolations.getViolations('/countryStateId') is not empty %}
                        {% set violationPath = '/countryStateId' %}
                    {% elseif formViolations.getViolations("/#{prefix}/countryStateId") is not empty %}
                        {% set violationPath = "/#{prefix}/countryStateId" %}
                    {% endif %}

                    {% block component_address_form_country_state_label %}
                        <label class="form-label"
                               for="{{ idPrefix ~ prefix }}AddressCountryState">
                            {{ 'address.countryStateLabel'|trans|sw_sanitize }}
                        </label>
                    {% endblock %}

                    {% block component_address_form_country_state_select %}
                        <select class="country-state-select form-select{% if violationPath %} is-invalid{% endif %}"
                                id="{{ idPrefix ~ prefix }}AddressCountryState"
                                name="{{ prefix }}[countryStateId]"
                                data-initial-country-state-id="{{ data.get('countryStateId') }}">
                            <option value=""
                                    selected="selected"
                                    data-placeholder-option="true">
                                {{ 'address.countryStatePlaceholder'|trans|sw_sanitize }}
                            </option>
                        </select>
                    {% endblock %}

                    {# @depecated tag:v6.7.0 - use component_address_form_country_state_error instead #}
                    {% block component_address_form_country_error %}
                        {% block component_address_form_country_state_error %}
                            {% if violationPath %}
                                {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                            {% endif %}
                        {% endblock %}
                    {% endblock %}
                </div>
            {% endblock %}
        </div>

        <div class="row g-2">
            {% block component_address_form_phone_number %}
                {% if config('core.loginRegistration.showPhoneNumberField') %}
                    <div class="form-group col-md-6">
                        {% if formViolations.getViolations('/phoneNumber') is not empty %}
                            {% set violationPath = '/phoneNumber' %}
                        {% elseif formViolations.getViolations("/#{prefix}/phoneNumber") is not empty %}
                            {% set violationPath = "/#{prefix}/phoneNumber" %}
                        {% endif %}

                        {% block component_address_form_phone_number_label %}
                            <label class="form-label"
                                   for="{{ idPrefix ~ prefix }}AddressPhoneNumber">
                                {{ 'address.phoneNumberLabel'|trans|sw_sanitize }}{{ config('core.loginRegistration.phoneNumberFieldRequired') ? 'general.required'|trans|sw_sanitize }}
                            </label>
                        {% endblock %}

                        {% block component_address_form_phone_number_input %}
                            <input type="tel"
                                   class="form-control {% if violationPath %}is-invalid{% endif %}"
                                   autocomplete="{% if prefix == 'shippingAddress' %}shipping {% elseif prefix == 'billingAddress' %}billing {% endif %}tel"
                                   id="{{ idPrefix ~ prefix }}AddressPhoneNumber"
                                   placeholder="{{ 'address.phoneNumberPlaceholder'|trans|striptags }}"
                                   name="{{ prefix }}[phoneNumber]"
                                   value="{{ data.get('phoneNumber') }}"
                                {{ config('core.loginRegistration.phoneNumberFieldRequired') ? 'required="true"' }}>
                        {% endblock %}

                        {% block component_address_form_phone_error %}
                            {% if violationPath %}
                                {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                            {% endif %}
                        {% endblock %}
                    </div>
                {% endif %}
            {% endblock %}
        </div>
    {% endblock %}
{% endblock %}
