#REM
  Parameters:
    #SNIPPET.AddressObjectID ... ID of the Object that contains the addresses
    #SNIPPET.UseViewObjectID ... use the AddressObjectID also as ViewObjectID
    #SNIPPET.ErrorAction ... Error Action
    #SNIPPET.ShowShipToThatAddressCheckbox ... if set the checkbox 'ship to that address' is shown
    #SNIPPET.FormID ... ID of the containing form

  Example:
    #SNIPPET("SNIPPET-EditAddresses", "AddressObjectID, UseViewObjectID, ErrorAction, ShowShipToThatAddressCheckbox, FormID", #BasketID, 0, #BasketOrderProcess.CurrentStep.ViewAction.Alias, 1, "BasketForm")
#ENDREM
  <input type="hidden" name="BillingAddress" value="#BillingAddress.ID" />
  #MENU("AddressSelectHead")
    #INCLUDE(#Template)
  #ENDMENU
  <ul class="NoBullets NoPadding">
  #LOCAL("InputChangeAction", "")
  #LOCAL("AddressObjectID",#SNIPPET.AddressObjectID)
  #LOCAL("BasketShippingAddress",#ShippingAddress)
    #IF(NOT #DEFINED(#BasketShippingAddress))#SET("BasketShippingAddress",#ShippingAddress)#ENDIF
    #IF(NOT #DEFINED(#BasketShippingAddress))#SET("BasketShippingAddress",#BillingAddress)#ENDIF

  #LOCAL("AddressNo",0)
  #LOCAL("BillingAddressFormErrorVisible", 0)
  #LOCAL("ShippingAddressFormErrorVisible", 0)
  #LOCAL("FirstLineProcessed",0)
  #LOCAL("IsBillingAddress",0)
  #LOCAL("NoErrorFound", 1)
  #LOOP(#Addresses)
    #IF(#Shop.AllowShippingAddress OR NOT #FirstLineProcessed)
      #SET("FirstLineProcessed", 1)
      #LOCAL("AddressItemFormError",0)
      #IF(#FormError AND #ID == #GET("FormErrors.Value.ChangeAddress.0") AND NOT #INPUT.EnableShippingAddress)
        #SET("AddressItemFormError",1)
      #ENDIF
      #IF(#BillingAddress.ID == #ID)
        #SET("IsBillingAddress",1)
      #ELSE
        #SET("IsBillingAddress",0)
      #ENDIF
      #LOCAL("EditAddress", #AddressItemFormError OR (#INPUT.ToggleChangeAddress AND #ID == #INPUT.ToggleChangeAddress))
      #IF((#FormErrors.Reason.BILLINGADDRESS_REGISTRATION_SET AND #IsBillingAddress) OR (#FormErrors.Reason.SHIPPINGADDRESS_REGISTRATION_SET AND NOT #IsBillingAddress))
        #IF(#NoErrorFound)
          #SET("NoErrorFound", 0)
          #SET("EditAddress", 1)
        #ELSE
          #SET("EditAddress", 0)
        #ENDIF
      #ELSIF(#NoErrorFound AND (#IsBillingAddress AND NOT #DEFINED(#FormErrors.Reason.BILLINGADDRESS_REGISTRATION_SET)) AND #DEFINED(#FormErrors.Reason.SHIPPINGADDRESS_REGISTRATION_SET))
        #SET("EditAddress", 0)
      #ENDIF
      <li class="AddressData" id="AddressData#ID">
        <div class="ep-contentBox-check#IF(#EditAddress) ep-contentBox-edit#ENDIF">
          <div class="ep-contentbox-item ep-contentBox">
            <div class="ep-flex ep-flex-justify-between">
              <h2>#IF(#IsBillingAddress)#IF(#ShippingAddress){BillingAddress}#ELSE#SPACE[0]{BillingAndShippingAddress}#ENDIF#ELSE#SET("AddressNo", #AddressNo+1){ShippingAddress} #SET("NamePrefix", "Shipping")#ENDIF</h2>
              <div class="ep-flex ep-flex-justify-end ChangeAddress">
                <input data-esf="ep-checkout-toggleEditAddress#AddressNo"  class="AlignMiddle ep-js HideElement" data-js=".uiValidate(#IF(#FormErrors.Form.BillingAddress AND #IsBillingAddress OR #FormErrors.Form.ShippingAddress AND NOT #IsBillingAddress AND NOT #INPUT.EnableShippingAddress OR #EditAddress){valid: false}#ENDIF)" type="checkbox" name="ChangeAddress" id="ChangeAddress#ID" value="#ID" #IF(#EditAddress)checked="checked"#ENDIF/>
                <a tabindex="0">
                  <label for="ChangeAddress#ID" class="ep-editaddress CursorPointer NoWrap#IF(#EditAddress) HideElement#ENDIF">
                    <span>{Edit}</span>
                  </label>
                  <label for="ChangeAddress#ID" class="ep-canceledit CursorPointer NoWrap#IF(NOT #EditAddress) HideElement#ENDIF">
                    <span>{Cancel}</span>
                  </label>
                </a>
              </div>
            </div>
            <div class="Dialog AddressDialog Reset">
              <div class="SizeContainer">
                <div class="InputBlock AddressBlock #IF(#EditAddress) HideElement#ENDIF">
                  <div class="InputLabelling"></div>
                  <div class="InputField">
                    #LocaleInclude("Address", #Country.Code2)
                    #IF(#EMail)
                      #EMail
                    #ENDIF
                  </div>
                </div>
                #MENU("AdditionalFormElements")#INCLUDE(#Template)#ENDMENU
                <div class="ep-contentBox-showOnCheck #IF(NOT #EditAddress) HideElement#ENDIF">
                  #IF(#AddressItemFormError OR NOT #NoErrorFound)
                    #IF(#FormErrors.Reason.NO_USER_NAME OR #FormErrors.Reason.LOGIN_EXISTS OR #FormErrors.Reason.NO_USER_PWD
                      OR #FormErrors.Reason.PWD_NOT_SAME OR #FormErrors.Reason.PASSWORD_WRONG OR #FormErrors.Reason.FORMAT_NOT_INTEGER
                      OR #FormErrors.Reason.FORMAT_NOT_FLOAT OR #FormError_AcceptPrivacyPolicy
                      OR #FormErrors.Reason.FORMAT_NOT_EMAILADDRESS OR #FormErrors.Reason.VATIDIsNotFromSameCountry OR #FormErrors.Reason.VATIDIsNotValid
                      OR #FormErrors.Reason.ZIPCODE_NOT_VALID OR #FormErrors.Reason.COUNTRYID_NOT_VALID OR #FormErrors.Reason.PasswordWithSpaces
                      OR #FormErrors.Reason.STRING_TOO_LONG OR #FormErrors.Reason.INVALID_US_ADDRESS OR NOT #NoErrorFound)
                      <div class="DialogMessage MessageWarning BottomMarginWide">
                        <h3>{InputError}</h3>
                        #IF(#FormErrors.Reason.NO_USER_NAME)<p>{NO_USER_NAME}</p>#ENDIF
                        #IF(#FormErrors.Reason.INVALID_US_ADDRESS)<p>{UnityInvalidUsAddress}</p>#ENDIF
                        #IF(#FormErrors.Reason.NO_USER_PWD)<p>{NoPassword}</p>#ENDIF
                        #IF(#FormErrors.Reason.PWD_NOT_SAME)<p>{PWD_NOT_SAME}</p>#ENDIF
                        #IF(#FormErrors.Reason.PASSWORD_WRONG)<p>{WrongPassword}</p>#ENDIF
                        #IF(#FormErrors.Reason.VATIDIsNotFromSameCountry)<p>{VATIDIsNotFromSameCountry}</p>#ENDIF
                        #IF(#FormErrors.Reason.VATIDIsNotValid)<p>{VATIDIsNotValid}</p>#ENDIF
                        #IF(#FormErrors.Reason.FORMAT_NOT_INTEGER OR #FormErrors.Reason.FORMAT_NOT_FLOAT)<p>{WRONG_NUMBER_FORMAT}</p>#ENDIF
                        #IF(#FormError_AcceptPrivacyPolicy)<p>{ErrorAcceptPrivacyPolicy}</p>#ENDIF
                        #IF(#FormErrors.Reason.FORMAT_NOT_EMAILADDRESS)<p>{FormatNotEMail}</p>#ENDIF
                        #IF(#FormErrors.Reason.ZIPCODE_NOT_VALID)<p>{ZipcodeNotValid}</p>#ENDIF
                        #IF(#FormErrors.Reason.COUNTRYID_NOT_VALID)<p>{CountryNotSupported}</p>#ENDIF
                        #IF(#FormErrors.Reason.PasswordWithSpaces)<p>{PasswordWithSpaces}</p>#ENDIF
                        #IF(#FormErrors.Reason.STRING_TOO_LONG)<p>{StringTooLong}</p>#ENDIF
                        <p>{PleaseCorrectErrors}</p>
                      </div>
                    #ENDIF
                  #ENDIF
                  <div id="ChangeAddress#ID[0]Block" class="ChangeAddressBlock">
                    #LOCAL("AddressType", "ShippingAddress")
                      #IF(#BillingAddress.ID == #ID)
                        #SET("AddressType", "ShippingAndBillingAddress")
                      #ENDIF
                    <input type="hidden" name="ChangeAction" value="Save#AddressType" />
                    #IF(#SNIPPET.UseViewObjectID)
                      <input type="hidden" name="ViewObjectID" value="#AddressObjectID" />
                    #ENDIF
                    <input type="hidden" name="ChangeObjectID" value="#ID" />
                    <input type="hidden" name="ErrorAction"  value="#SNIPPET.ErrorAction" />
                    <input type="hidden" name="ErrorObjectID" value="#AddressObjectID" />
                    <input type="hidden" name="AddressID" value="#ID" />
                    #SNIPPET("SNIPPET-Address","AddressType,NamePrefix,Fields,HasError",#AddressType,"","Additional AddressExtension BankAccountHolder BankAccountNo BankCode BankName BankSeparator Birthday City CodePorte Company CountryID Department DisplayName EMail EMailBusiness EMailPrivate Fax FirstName Gender JobTitle LastName Mandatory MiddleName Phone PhoneBusiness PhoneCell PhonePrivate Salutation State Street Street2 Title URL VATID FiscalCode Zipcode", #EditAddress)
                    #ENDLOCAL
                  </div>
                </div>

                #IF(#SNIPPET.ShowShipToThatAddressCheckbox AND #Shop.AllowShippingAddress)
                  <div class="#IF(#COUNT(#Addresses) < 2)HideElement#ENDIF ep-flex ep-flex-align-center InputBlock ep-changeaddress #IF(#FormErrors.Form.BillingAddress AND #IsBillingAddress OR #FormErrors.Form.ShippingAddress AND NOT #IsBillingAddress) ChangeAddress#ENDIF">
                    <input data-esf="ep-checkout-shipHere#AddressNo" type="checkbox" class="ep-js RightMargin" data-js=".uiInput()" name="ShippingAddress" value="#ID" #IF(#FormError)#IF(#INPUT.ShippingAddress==#ID)checked="checked"#ENDIF#ELSE#IF((NOT #BasketShippingAddress) OR (#BasketShippingAddress.ID == #ID) OR NOT(#Shop.AllowShippingAddress))checked="checked"#ENDIF#ENDIF id="id_#ID" />
                    <p class="NoMargin">{ShipToThatAddress}</p>
                  </div>
                #ENDIF

                <div class="ep-contentBox-showOnCheck ep-flex ep-flex-justify-end WideTopMargin #IF(NOT #EditAddress) HideElement#ENDIF">
                  <button data-esf="ep-checkout-saveAddressChanges#AddressNo" type="submit" data-js=".uiInput({big:true})" class="ep-js DoOrder MarginLeft AutoWidth CheckoutSaveButton #GetButtonClasses(#Shop.IsUnityRegistered)">{Save}</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      #ENDLOCAL
      #ENDLOCAL
    #ENDIF
  #ENDLOOP
  #ENDLOCAL #REM <!-- NoErrorFound --> #ENDREM
  #ENDLOCAL
  #ENDLOCAL
  #IF(#Shop.AllowShippingAddress AND #COUNT(#Addresses) < 2)
    #LOCAL("AddressItemFormError",0)
    #IF(#FormError AND #INPUT.EnableShippingAddress)
      #SET("AddressItemFormError",1)
    #ENDIF
      <li>
        <button type="button" class="ep-js MarginLeft AutoWidth#IF(#InputChangeAction NE "") HideElement#ENDIF #GetButtonClasses(#Shop.IsUnityRegistered)" data-js=".uiInput()" id="EnableShippingAddress" data-esf="ep-checkout-addNewShippingButton">{SeparateShippingAddress}</button>
      </li>
      <li>
        <div class="ep-contentBox-check ep-contentBox#IF(NOT #AddressItemFormError) HideElement#ELSE ep-contentBox-edit#ENDIF" id="AddShippingAddress">
          <div class="ep-flex ep-flex-justify-between ChangeAddress">
            <h2>{ShippingAddress}</h2>
            <a id="DisableShippingAddress" data-esf="ep-checkout-cancelNewShippingButton" tabindex="0"><label for class="ep-checkout-canceledit CursorPointer NoWrap"><span>{Cancel}</span></label></a>
          </div>
          #IF(#AddressItemFormError)
            #IF(#FormErrors.Reason.NO_USER_NAME OR #FormErrors.Reason.LOGIN_EXISTS OR #FormErrors.Reason.NO_USER_PWD
              OR #FormErrors.Reason.PWD_NOT_SAME OR #FormErrors.Reason.PASSWORD_WRONG OR #FormErrors.Reason.FORMAT_NOT_INTEGER
              OR #FormErrors.Reason.FORMAT_NOT_FLOAT OR #FormError_AcceptPrivacyPolicy
              OR #FormErrors.Reason.FORMAT_NOT_EMAILADDRESS OR #FormErrors.Reason.VATIDIsNotFromSameCountry OR #FormErrors.Reason.VATIDIsNotValid
              OR #FormErrors.Reason.ZIPCODE_NOT_VALID OR #FormErrors.Reason.COUNTRYID_NOT_VALID OR #FormErrors.Reason.PasswordWithSpaces
              OR #FormErrors.Reason.STRING_TOO_LONG)
              <div class="DialogMessage MessageWarning">
                <h3>{InputError}</h3>
                #IF(#FormErrors.Reason.NO_USER_NAME)<p>{NO_USER_NAME}</p>#ENDIF
                #IF(#FormErrors.Reason.NO_USER_PWD)<p>{NoPassword}</p>#ENDIF
                #IF(#FormErrors.Reason.PWD_NOT_SAME)<p>{PWD_NOT_SAME}</p>#ENDIF
                #IF(#FormErrors.Reason.PASSWORD_WRONG)<p>{WrongPassword}</p>#ENDIF
                #IF(#FormErrors.Reason.VATIDIsNotFromSameCountry)<p>{VATIDIsNotFromSameCountry}</p>#ENDIF
                #IF(#FormErrors.Reason.VATIDIsNotValid)<p>{VATIDIsNotValid}</p>#ENDIF
                #IF(#FormErrors.Reason.FORMAT_NOT_INTEGER OR #FormErrors.Reason.FORMAT_NOT_FLOAT)<p>{WRONG_NUMBER_FORMAT}</p>#ENDIF
                #IF(#FormError_AcceptPrivacyPolicy)<p>{ErrorAcceptPrivacyPolicy}</p>#ENDIF
                #IF(#FormErrors.Reason.FORMAT_NOT_EMAILADDRESS)<p>{FormatNotEMail}</p>#ENDIF
                #IF(#FormErrors.Reason.ZIPCODE_NOT_VALID)<p>{ZipcodeNotValid}</p>#ENDIF
                #IF(#FormErrors.Reason.COUNTRYID_NOT_VALID)<p>{CountryNotSupported}</p>#ENDIF
                #IF(#FormErrors.Reason.PasswordWithSpaces)<p>{PasswordWithSpaces}</p>#ENDIF
                #IF(#FormErrors.Reason.STRING_TOO_LONG)<p>{StringTooLong}</p>#ENDIF
                <p>{PleaseCorrectErrors}</p>
              </div>
            #ENDIF
          #ENDIF
          <div class="ep-contentbox-item ">
            <div class="ep-contentBox-showOnCheck Dialog AddressDialog Reset PaddingTop">
              <div class="SizeContainer">
                <input type="hidden" name="ChangeAction"  value="NewShippingAddress" />
                #IF(#SNIPPET.UseViewObjectID)
                  <input type="hidden" name="ViewObjectID" value="#AddressObjectID" />
                #ENDIF
                <input type="hidden" name="ChangeObjectID" value="#AddressObjectID" />
                <input type="hidden" name="ErrorAction"  value="#SNIPPET.ErrorAction" />
                <input type="hidden" name="ErrorObjectID" value="#AddressObjectID" />
                <input type="hidden" name="EnableShippingAddress" value="on" />
                #SNIPPET("SNIPPET-Address","AddressType,NamePrefix,Fields","ShippingAddress","","Additional AddressExtension BankAccountHolder BankAccountNo BankCode BankName BankSeparator Birthday City CodePorte Company CountryID Department DisplayName EMail EMailBusiness EMailPrivate Fax FirstName Gender JobTitle LastName Mandatory MiddleName Phone PhoneBusiness PhoneCell PhonePrivate Salutation State Street Street2 Title URL VATID FiscalCode Zipcode")
              </div>
            </div>
          </div>
          #IF(#SNIPPET.ShowShipToThatAddressCheckbox)
            <div class="ep-flex ep-flex-align-center InputBlock ep-changeaddress ChangeAddress">
              <input type="checkbox" data-esf="ep-checkout-sendHereCheckboxNewShipping" class="ep-js RightMargin" data-js=".uiInput()" name="ShippingAddress" value="#BillingAddress.ID" #IF(#FormError)#IF(#INPUT.ShippingAddress==#ID)checked="checked"#ENDIF#ELSE#IF((NOT #BasketShippingAddress) OR (#BasketShippingAddress.ID == #ID) OR NOT(#Shop.AllowShippingAddress))checked="checked"#ENDIF#ENDIF id="id_#ID" />
              <p class="NoMargin">{ShipToThatAddress}</p>
            </div>
          #ELSE
            <input name="SetAsDefault" type="hidden" value="1" />
          #ENDIF

          <div class="ep-contentBox-showOnCheck ep-flex ep-flex-justify-end WideTopMargin">
            <button data-esf="ep-checkout-saveAddressChangesNewShipping" type="submit" data-js=".uiInput({big:true})" class="ep-js DoOrder MarginLeft AutoWidth CheckoutSaveButton #GetButtonClasses(#Shop.IsUnityRegistered)">{Save}</button>
          </div>
        </div>
      </li>
    #ENDLOCAL
  #MENU("AddressSelectExternal")
    #LOCAL("MenuContent",#INCLUDE(#Template))
    #IF(NOT #IsEmpty(#MenuContent))
      <li>
        <div class="ep-contentBox-check">
          <input type="radio" class="ep-js" data-js=".uiInput()" name="ShippingAddress" id="id_#ID" />
          <div class="ep-contentbox-item">
            <p>{ShipToThatAddress}</p>
            #MenuContent[0]
          </div>
        </div>
      </li>
    #ENDIF
    #ENDLOCAL
  #ENDMENU
  #ENDIF
  </ul>
  #ENDLOCAL
  #ENDLOCAL
  #ENDLOCAL
  #ENDLOCAL
  #ENDLOCAL
  #ENDLOCAL

  <script type="text/javascript">
  require([
    "jquery",

    "$ready!"
  ], function ($) {
    var form = $('#'+'#SNIPPET.FormID'),
        addShippingAddressButton = $('#'+'EnableShippingAddress'),
        cancelShippingAddressButton = $('#'+'DisableShippingAddress'),
        addShippingAddressArea = $('#'+'AddShippingAddress'),
        addressBoxes = form.find('.ep-contentBox-check'),
        changeAddressCheckboxes = form.find("input[name=ChangeAddress]"),
        selectAddress = form.find('input[name="ShippingAddress"]'),
        viewActionInput = $('.ViewAction'),
        saveButtons = form.find('.CheckoutSaveButton'),
        enableShippingAddressInput = form.find('input[name=EnableShippingAddress]');

    changeAddressCheckboxes.on("change changeAttr", function() {
        var elem = $(this),
            closestDiv = elem.closest('div'),
            contentBoxItem = elem.closest('.ep-contentbox-item'),
            checked = elem.is(":checked");

        if (checked) {
            changeAddressCheckboxes.not(this)
                .prop('checked', false)
                .trigger('change')
                .closest('div').addClass('HideElement');
            addShippingAddressButton.addClass('HideElement');
        } else {
            changeAddressCheckboxes.not(this).closest('div').removeClass('HideElement');
            addShippingAddressButton.removeClass('HideElement');
        }

        closestDiv.find('.ep-canceledit')[!checked ? 'addClass' : 'removeClass']('HideElement');
        closestDiv.find('.ep-editaddress ')[checked ? 'addClass' : 'removeClass']('HideElement');

        contentBoxItem.find('.AddressBlock')[checked ? 'addClass' : 'removeClass']('HideElement');
        contentBoxItem.find('.ep-changeaddress')[checked ? 'addClass' : 'removeClass']('ChangeAddress');

        contentBoxItem
            .find('.ep-contentBox-showOnCheck')[!checked ? 'addClass' : 'removeClass']('HideElement')
            .find(":input").attr("disabled", !checked);

        $('.NewsletterForm:eq(1)').hide();
    });

    addShippingAddressButton.on('click', function() {
        changeAddressCheckboxes
            .prop('checked', false)
            .trigger('change')
            .closest('div').addClass('HideElement');

        selectAddress.prop('checked', false);

        addShippingAddressArea.removeClass('HideElement');
        addShippingAddressButton.addClass('HideElement');

        addShippingAddressArea.find('input[name="ShippingAddress"]').prop('checked', true);
        addShippingAddressArea.find('input').prop('disabled', false);

        form.find('.ep-changeaddress').removeClass('HideElement');
    });

    saveButtons.on('click', function() {
      viewActionInput.val('ViewMultiCheckoutAddress');
    });

    cancelShippingAddressButton.on('click', function() {
      form.find('.ep-changeaddress').addClass('HideElement');
      changeAddressCheckboxes.closest('div').removeClass('HideElement');
      addShippingAddressArea.addClass('HideElement');
      addShippingAddressButton.removeClass('HideElement');
      selectAddress.prop('checked', false);
      selectAddress.not(addShippingAddressArea.find('input[name="ShippingAddress"]')).prop('checked', true);
      addShippingAddressArea.find('input').prop('disabled', true);
    });

    addressBoxes.filter(':not(.ep-contentBox-edit)').find('input:not([type=checkbox])').prop('disabled', true);

    selectAddress.on('change', function(evt) {
      if (!this.checked) {
        this.checked = true;
        return false;
      }
      selectAddress.not(this).prop('checked', false);
      if (enableShippingAddressInput.length !== 0) {
        enableShippingAddressInput.prop('disabled', !enableShippingAddressInput.attr('disabled'));
      }
    });

    // monitor keypress event on document
    $(document).on('keypress', function(evt) {
      var button = $('.CheckoutSaveButton:visible');

      // if a button is visible and ENTER was pressed
      if (button.length > 0 && evt.which === 13) {
        evt.preventDefault();
        button.eq(0).trigger('click');
      }
    });

    #IF(#INPUT.ToggleChangeAddress)
      window.scrollTo(0, parseInt(document.getElementById('AddressData#INPUT.ToggleChangeAddress').getBoundingClientRect().top));
    #ENDIF
  });
</script>