{% set active_page = 'Forgot Password' -%}

{% extends "layouts/no-layout.html" %}

{% block content %}
<div class="mdc-layout-grid mdc-layout-grid--fullheight">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-1-tablet mdc-layout-grid__cell--span-4-phone"></div>
      <div class="mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-6-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="mdc-card portal-card portal-card--hero mdc-elevation--z24 portal-text-center">
          <div class="mdc-theme--primary-bg mdc-theme--text-primary-on-secondary portal-card__content">
            <div class="portal-card__title portal-card__title--vertical">
              <img class="portal-card__logo" src="{{ base }}assets/images/portal-logo.png" alt="logo">
              <h1 class="portal-card--headline">Password Recovery</h1>
            </div>
            <p class="mdc-typography--body1">Please enter your username or email address. You will receive a link to create a new password via email.</p>
          </div>
          <div class="portal-card__content portal-card__form-pwd portal-card--flex-column">
            <form class="portal-card--password__item">
              <div class="mdc-text-field mdc-text-field--fullwidth mdc-text-field--dense portal-text-field--fullwidth">
                <input type="text" class="mdc-text-field__input" id="full-func-text-field">
                <label for="full-func-text-field" class="mdc-floating-label">Email Address</label>
                <div class="mdc-line-ripple"></div>
              </div>
            </form>
            <div class="portal-card__content--column-actions portal-card__content--column-actions-vertical">
              <button disabled class="mdc-button mdc-button--raised mdc-button--portal-reset">Send Reset Link</button>
              <a href="login.html" class="mdc-button mdc-button--back-login">Back to login</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
<script>
  (function() {
    const tfRoot = document.querySelector('.mdc-text-field');
    const tf = new mdc.textField.MDCTextField(tfRoot);
  })();
</script>
{% endblock %}