{{ 'pages.css' | asset_url | stylesheet_tag }}

{%- capture recover_form -%}
  {%- form 'recover_customer_password', class: 'account-form recover-form' -%}
    {%- if form.posted_successfully? -%}
      {%- assign reset_success = true -%}
    {%- endif -%}

    {%- if reset_success -%}
      {%- capture recover_success_message -%}
        <p class="note">{{ 'customer.recover_password.success' | t }}</p>
      {%- endcapture -%}
    {%- endif -%}

    {%- if form.errors -%}
      {%- assign recover_error = true -%}
      <div class="alert alert-danger">
        {{ form.errors | default_errors }}
      </div>
    {%- endif -%}

    <div class="form-group">
      <label for="email">{{ 'customer.recover_password.email' | t }}<span class="req">*</span></label>
      <input type="email" value="" name="email" id="recover-email" {%- if reset_success or recover_error -%}autofocus{%- endif -%}/>
    </div>

    <div class="form-group-button">
      <button class="btn btn-1" type="submit">{{ 'customer.recover_password.submit' | t }}</button>
      <a class="cancel btn btn-2" href="javascript:;" onclick="hideRecoverPasswordForm();">{{ 'customer.recover_password.cancel' | t }}</a>
    </div>

  {%- endform -%}
{%- endcapture -%}

<style type="text/css">
  .recover-password-active .no-active,
  .recover-password-active .recover-subtext,
  .recover-password-active.success-true .recover-form{
    display: none;
  }
</style>

<div class="page-template page-account account-login">
  <div class="page-body">
    <div class="d-grid grid-1 grid-md-2">

      <div class="form-wrapper">
        <div id="customer-login">
          <h2 class="form-title">{{ 'customer.login.sign_in' | t }}</h2>
          <p>{{ 'customer.login.subtext' | t }}</p>
          {%- form 'customer_login', class: 'account-form login-form' -%}
            {%- if form.errors -%}
              <div class="alert alert-error">
                {{ form.errors | default_errors }}
              </div>
            {%- endif -%}

            <div class="form-group">
              <label for="login-email">{{ 'customer.login.your_email' | t }}<span class="req">*</span></label>
              <input type="email" required id="login-email" name="customer[email]">
            </div>

            {%- if form.password_needed -%}
              <div class="form-group">
                <label for="login-password">{{ 'customer.login.password' | t }}<span class="req">*</span></label>
                <input type="password" required id="login-password" name="customer[password]">
              </div>
            {%- endif -%}

            <div class="form-group d-flex justify-content-between align-items-center">
              <div class="input-group">
                <a href="{{ routes.root_url }}"">{{ 'customer.login.return_store' | t }}</a>
              </div>
              <a href="javascript:;" onclick="showRecoverPasswordForm();" class="forgot-pass">{{ 'customer.login.forgot_password' | t }}</a>
            </div>
            <button type="submit" class="btn btn-1 btn-submit">{{ 'customer.login.sign_in' | t }}</button>
          {%- endform -%}
        </div>

        <div id="recover-password"{% unless reset_success or recover_error %} style="display: none;"{% else %} class="recover-password-active success-{{ reset_success }} error-{{ recover_error }}"{% endunless %}>
          <h2 class="form-title">{{ 'customer.recover_password.title' | t }}</h2>
          <p class="note no-active">{{ 'customer.recover_password.subtext' | t }}</p>
          {{ recover_success_message }}
          {{ recover_form }}
        </div>
      </div>

      <div class="form-wrapper">
        <h2 class="form-title">{{ 'customer.register.create_an_account' | t }}</h2>
        <p>{{ 'customer.register.subtext' | t }}</p>
        <div class="account-form register-form"> 
          <div class="register-benefit">
            <h5 class="semi-bold">{{ 'customer.login.benefit_heading' | t }}</h5>

            <ul class="benefit-list">
              <li>
                {%- render 'svg', type: 'customer-check' -%}
                <span>{{ 'customer.login.benefit_1' | t }}</span>
              </li>
              <li>
                {%- render 'svg', type: 'customer-check' -%}
                <span>{{ 'customer.login.benefit_2' | t }}</span>
              </li>
              <li>
                {%- render 'svg', type: 'customer-check' -%}
                <span>{{ 'customer.login.benefit_3' | t }}</span>
              </li>
            </ul>
          </div>

          <a href="{{ routes.account_register_url }}" class="btn btn-1 btn-register">{{ 'customer.register.submit' | t }}</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  let formRecoverContainer = document.getElementById("recover-password");
  let formLoginContainer = document.getElementById("customer-login");

  function showRecoverPasswordForm(){
    formRecoverContainer.style.display = "";
    formLoginContainer.style.display = "none";
  }
  function hideRecoverPasswordForm(){
    formRecoverContainer.style.display = "none";
    formLoginContainer.style.display = "";
  }
  if(formRecoverContainer.classList.contains('recover-password-active')){
    formLoginContainer.style.display = "none";
  }
</script>