{{#extend "base" hybrisClass="hybris-class" pageClass="login-register-page" title="Checkout Login Register page" banner="true"}}
{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/pages/page_new-checkout_login-register.css">
{{/content}}
{{#content "body"}}
<main>


  <div class="container">
    <div class="page-header">
      <h1>Welcome To Wickes Secure Login</h1>
    </div>
  </div>


  <div class="login-blocks">
    <div class="container">
      <div class="row">


        <div class="returning-customer-wrapper">

          <form class="returning-customer" id="form-login">
            <div>
                <h3 class="login-header">Returning customer? Login below.</h3>
                <div class="returning-customer__info">
                  <div>Already have an account?</div>
                  <div>Sign in to retrieve your account settings.</div>
                </div>
    
                {{> form-row type="email" id="login-email" label="Email address" required="true"}}
                {{> form-row type="password" id="password" label="Password" required="true"}}
            </div>
            <div class="footer-block">
                <div class="submit-form-block">
                    <button class="btn btn-primary">
                      <span class="btn__text">Login</span>
                    </button>
                    <a href="page_new-checkout-forgot-password.html" class="link-secondary returning-customer__forgot-link">Forgotten password</a>
                </div>

                <div class="warning-required">
                    Required Field
                </div>
            </div>


          </form>

        </div>

        <div class="separator-wrapper">
            <span>or</span>
        </div>

        <div class="new-customer-wrapper">

          <form class="new-customer" id="form-register">
            <div>
                <h3 class="register-header">I’m a new customer</h3>
    
                <div class="new-customer__info">
                  <div>Retrieve past orders.</div>
                  <div>Store and maintain addresses and settings.</div>
                </div>
    
                {{> form-row type="email" id="registration-email" label="Email address" required="true"}}
            </div>

            <div class="footer-block">
                <div class="submit-form-block">
                    <button class="btn btn-primary">
                      <span class="btn__text">Continue</span>
                    </button>
                </div>

                <div class="warning-required">
                    Required Field
                </div>
            </div>
          </form>

        </div>

      </div>
    </div>
  </div>


</main>
{{/content}}
{{/extend}}