<div class='xo-recover-password-form'>
  {% form 'recover_customer_password' %}
    <div>
      {% liquid
        render 'form-success', form: form, message: 'Success message'
        render 'form-error', form: form
      %}
      <div class='xo-recover-password-form__description'>
        {% assign description = 'customer.recover_password.subtext' | t %}
        {{ description }}
      </div>
      <div class='xo-recover-password-form__input'>
        {% assign emailLabel = 'customer.login_page.email' | t %}
        {% render 'field-input', type: 'email', name: 'customer[email]', value: '', placeholder: emailLabel %}
      </div>
      {% render 'space', value: '2rem' %}
      <div>
        {% assign btn_sign_in_text = 'customer.login_page.sign_in' | t %}
        {% render 'button', text: btn_sign_in_text, size: 'md', block: true %}
      </div>
      {% render 'space', value: '2rem' %}
      <div>
        <xo-modal-trigger xo-name='forgot-your-password' class='xo-recover-password-form__cancel'>
          {% assign btn_sign_in_text = 'customer.login_page.cancel' | t %}
          {% render 'button', text: btn_sign_in_text, size: 'sm', block: true, style: 'link', type: 'button' %}
        </xo-modal-trigger>
      </div>
    </div>
  {% endform %}
</div>
