<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">
      <div class="section-header">
        <div class="form-vertical">
          {% form 'reset_customer_password' %}

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

            <p class="text-center">{{ 'customer.reset_password.subtext' | t: email: email }}</p>

            {%- if form.errors -%}
              <div class="form-message form-message--error">
                {{ form.errors | default_errors }}
              </div>
            {%- endif -%}

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

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

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

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