{% set active_page = 'Login' -%}

{% 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-2-desktop mdc-layout-grid__cell--span-1-tablet mdc-layout-grid__cell--span-4-phone"></div>
      <div class="mdc-layout-grid__cell--span-8-desktop mdc-layout-grid__cell--span-6-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="mdc-card portal-card portal-card--hero portal-card--horizontal  mdc-elevation--z24">
          <div class="mdc-layout-grid">
            <div class="mdc-layout-grid__inner">
              <div class="mdc-layout-grid__cell--span-6">
                <div class="mdc-theme--primary-bg mdc-theme--text-primary-on-secondary portal-card__content portal-card__content--column">
                  <section class="portal-text-center">
                    <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">Login</h1>
                    </div>
                    <p class="mdc-typography--body1">Welcome to our admin panel. Please login using the form or register for a new account using the button below.</p>
                    <p class="mdc-typography--body1">Portal is an amazing and easy to use HTML template. If you have any questions feel free to contact us in our support forum.</p>
                  </section>
                  <div class="portal-card__content--column-actions">
                    <button class="mdc-button mdc-button--raised mdc-theme--secondary-bg mdc-theme--text-primary-on-secondary" data-mdc-auto-init="MDCRipple">
                      Create an account
                    </button>
                  </div>
                </div>
              </div>
              <div class="mdc-layout-grid__cell--span-6">
                <div class="portal-card__content portal-card__content--column">
                  <form>
                    <div class="mdc-text-field portal-text-field--fullwidth mdc-text-field--fullwidth mdc-text-field--dense">
                      <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>
                    <div class="mdc-text-field portal-text-field--fullwidth mdc-text-field--fullwidth mdc-text-field--dense">
                      <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">
                    <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>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    (function() {
      const tfRoot = document.querySelectorAll('.mdc-text-field');
      for (let i = 0; i < tfRoot.length; i++) {
        new mdc.textField.MDCTextField(tfRoot[i]);
      }
    })();
  </script>
{% endblock %}