{% set active_page = 'Lock' -%}

{% 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">Welcome back John</h1>
          </div>
          <p class="mdc-typography--body1">You have been logged out due to idleness. Enter your password to log back in.</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 pattern=".{8,}" type="password" class="mdc-text-field__input" id="pw" autocomplete="current-password">
              <label for="pw" class="mdc-floating-label">Password</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-login">Login</button>
            <a href="forgot-password.html" class="mdc-button mdc-button--portal-forgot-pwd">Forgot Password?</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 %}