#REM
  Parameters:
    #SNIPPET.LoginTo ... String on which page to login: CustomerArea or Checkout.
    #SNIPPET.ReplaceState ... String to return to if back button is clicked after login. (optional)

  Example:
    #SNIPPET("SNIPPET-UnityLoginForm", "LoginTo, ReplaceState", "Checkout", "/cart")
#ENDREM

<div class="ep-login">
  <h2 class="">{Login}</h2>
  <p>{RegistrationInfo}</p>
  #IF(#FormError AND #FormErrors.Form.Login.ErrorCount)
    <div class="DialogMessage MessageWarning BottomMarginWide">
      #IF(#FormErrors.Reason.LOGIN_INACTIVE)
        <p>{LoginInActive}</p>
        <p>{ContactShopOwner}</p>
        #ELSIF(#FormErrors.Reason.LOGIN_FAILED)
        <p>{LoginFailed}</p>
        <p>{PleaseCorrectErrors}</p>
        #ELSIF(#FormErrors.Reason.LOGIN_LOCKED)
        <p>{LoginLocked}</p>
        #ELSIF(#FormErrors.Reason.LOGIN_NOT_VERIFIED)
        <p>{LoginNotVerified}</p>
        #ELSIF(#FormErrors.Reason.PASSWD_OUTDATED)
        <p>{PasswdOutdated}</p>
        #ELSE
        <p>{EnterLoginAndPassword}</p>
      #ENDIF
    </div>
  #ENDIF
  <div class="Dialog AddressDialog Reset NoMargin">
    <div class="SizeContainer BottomMarginWide">
      <div class="InputBlock">
        <div>{EmailAddress}</div>
        <div>#WITH_ERROR(#FormError)
          <input class="Text ep-js" data-js=".uiValidate({required:true,orientation:'bottom' #IF(#FormError_Login AND #FormErrors.Form.Login.ErrorCount AND #INPUT.Origin EQ "LoginRegistered"), valid:false#ENDIF})" name="Login" id="ep-checkout-loginname" type="text" value="#IF(#Login)#Login#ENDIF"#IF(#DEFINED(#CustomerType) AND NOT (#CustomerType EQ "Member")) disabled="disabled"#ENDIF />#ENDWITH_ERROR
        </div>
      </div>
      <div class="InputBlock">
        <div>{Password}</div>
        <div>
          <input class="Text ep-js" data-js=".uiValidate({required:true,orientation:'bottom' #IF(#FormError_Password AND #FormErrors.Form.Login.ErrorCount AND #INPUT.Origin EQ "LoginRegistered"), valid:false#ENDIF})" name="Password" type="password" value=""#IF(#DEFINED(#CustomerType) AND NOT (#CustomerType EQ "Member")) disabled="disabled"#ENDIF /><br />
        </div>
      </div>
    </div>
    <button type="submit" class="ep-js ep-loginButton #GetButtonClasses(#Shop.IsUnityRegistered)" data-js=".uiInput({big:true})" name="Save" value="{Login}" #IF(#SNIPPET.LoginTo EQ "Checkout") id="ep-checkout-loginButton" data-esf="ep-checkout-loginButton" #IF(NOT #IsMinOrderAmountReached OR NOT #COUNT(#LineItemContainer.LineItems)) disabled="disabled"#ENDIF#ENDIF>{Login}</button>
    <div class="ep-lostPasswdLink AlignCenter TopMarginWide">
      <a class="Action" href="?ObjectPath=#Shop.Path[url]&amp;ViewAction=UnityViewLostPassword&amp;LastViewAction=#INPUT.ViewAction&amp;LastViewObjectID=#ObjectID" rel="nofollow" >{LostPassWD}</a>
    </div>
  </div>
</div>

#IF(#DEFINED(#SNIPPET.ReplaceState) AND #Shop.IsUnityRegistered AND NOT (#FormError AND #FormErrors.Form.Login.ErrorCount))
<script>
require([
  "jquery",

  "jquery/i18n",
  "$ready!"
], function($) {
  var submitBtn = $('#ep-checkout-loginButton'),
    replaceState = "#SNIPPET.ReplaceState";

  if (replaceState === "cart") {
    replaceState = "/" + jQuery.i18n.regions[jQuery.i18n.settings.region].language + "/" + replaceState;
  }

  #REM
    /*
        ePages will not include a base tag (Presentation::Servlet::Permission::addBaseLineUr) when the 'path' of the url in the browser
        is the same as the base url that it generates
        In such a case, a browser will use location.href as the base url for relative links/forms
        history.replaceState will change the value in the browser location bar, effectively changing 'location.href'
        So you may get URLs like 'https://xxx/epages/abc.sf/' turning into 'https://xxx/de/cart'
        Any relative links/forms will then use https://xxx/de/cart as the base url, but this is wrong, since it needs to use the ep6 url
        As this is a unity sf template, we can assume ep6 context
        https://epages.atlassian.net/browse/UNITY-7539
    */
  #ENDREM
  if ( document.getElementsByTagName('base').length === 0 ) {
    document.head.insertAdjacentHTML('beforeend', '<base href="#FUNCTION("BASEURL", #Site, 1)" />');
  }

  submitBtn.on('click.replaceState', function(evt) {
    history.replaceState({state: replaceState}, "basket", replaceState);
  });
});
</script>
#ENDIF