<div class="page-width">
  <div class="grid">

    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">
      <div class="note form-success hide" id="ResetSuccess">
        {{ 'customer.recover_password.success' | t }}
      </div>

      <div id="CustomerLoginForm" class="form-vertical">
        {% form 'customer_login' %}

          <h1 class="text-center">{{ 'customer.login.title' | t }}</h1>

          {{ form.errors | default_errors }}

          <label for="CustomerEmail">{{ 'customer.login.email' | t }}</label>
          <input type="email" name="customer[email]" id="CustomerEmail" class="{% if form.errors contains 'email' %} input--error{% endif %}" autocorrect="off" autocapitalize="off" autofocus>

          {% if form.password_needed %}
            <label for="CustomerPassword">{{ 'customer.login.password' | t }}</label>
            <input type="password" value="" name="customer[password]" id="CustomerPassword" class="{% if form.errors contains 'password' %} input--error{% endif %}">
          {% endif %}

          <div class="text-center">
            {% if form.password_needed %}
              <p><a href="#recover" id="RecoverPassword">{{ 'customer.login.forgot_password' | t }}</a></p>
            {% endif %}

            <input type="submit" class="btn" value="{{ 'customer.login.sign_in' | t }}">

            <p>
              {{ 'layout.customer.create_account' | t | customer_register_link }}
            </p>
          </div>

        {% endform %}
      </div>

      <div id="RecoverPasswordForm" class="hide">

        <div class="text-center">
          <h2>{{ 'customer.recover_password.title' | t }}</h2>
          <p>{{ 'customer.recover_password.subtext' | t }}</p>
        </div>

        <div class="form-vertical">
          {% form 'recover_customer_password' %}

            {{ form.errors | default_errors }}

            {% comment %}
              Add a hidden span to indicate the form was submitted succesfully.
            {% endcomment %}
            {% if form.posted_successfully? %}
              <span class="hide reset-password-success"></span>
            {% endif %}

            <label for="RecoverEmail">{{ 'customer.recover_password.email' | t }}</label>
            <input type="email" value="" name="email" id="RecoverEmail" class="input-full"autocorrect="off" autocapitalize="off">

            <div class="text-center">
              <p>
                <input type="submit" class="btn" value="{{ 'customer.recover_password.submit' | t }}">
              </p>

              <button type="button" id="HideRecoverPasswordLink" class="text-link">{{ 'customer.recover_password.cancel' | t }}</button>
            </div>
          {% endform %}
        </div>

      </div>

      {% comment %}
        If accounts are set as optional, the following will be shown as an option
        during checkout, not on the default /login page.
      {% endcomment %}
      {% if shop.checkout.guest_login %}
        <div class="text-center">
          <hr class="hr--invisible">
          <h2>{{ 'customer.login.guest_title' | t }}</h2>

          {% form 'guest_login' %}
            <input type="submit" class="btn" value="{{ 'customer.login.guest_continue' | t }}">
          {% endform %}
        </div>
      {% endif %}
    </div>

  </div>
</div>
