{% set active_page = 'Register' -%}

{% 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">Register</h1>
                    </div>
                    <p class="mdc-typography--body1">It takes a couple of minutes to sign up for a free account. Just fill in your details to gain access the admin panel and view the dashboard. By creating an account, you agree to our Terms & Conditions and Privacy Policy.</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">
                      I already have 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-layout-grid">
                      <div class="mdc-layout-grid__inner">
                        <div class="mdc-layout-grid__cell--span-6">
                          <div class="mdc-text-field mdc-text-field--dense mdc-text-field--fullwidth portal-text-field--fullwidth">
                            <input type="text" class="mdc-text-field__input" id="portal-first-name">
                            <label for="portal-first-name" class="mdc-floating-label">First Name</label>
                            <div class="mdc-line-ripple"></div>
                          </div>
                        </div>
                        <div class="mdc-layout-grid__cell--span-6">
                          <div class="mdc-text-field mdc-text-field--dense mdc-text-field--fullwidth portal-text-field--fullwidth">
                            <input type="text" class="mdc-text-field__input" id="portal-last-name">
                            <label for="portal-last-name" class="mdc-floating-label">Last Name</label>
                            <div class="mdc-line-ripple"></div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="mdc-layout-grid">
                      <div class="mdc-layout-grid__inner">
                        <div class="mdc-layout-grid__cell--span-12">
                          <div class="mdc-text-field mdc-text-field--dense mdc-text-field--fullwidth portal-text-field--fullwidth">
                            <input type="email" class="mdc-text-field__input" id="email">
                            <label for="email" class="mdc-floating-label">Email Address</label>
                            <div class="mdc-line-ripple"></div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="mdc-layout-grid">
                      <div class="mdc-layout-grid__inner">
                        <div class="mdc-layout-grid__cell--span-6">
                          <div class="mdc-text-field mdc-text-field--dense mdc-text-field--fullwidth 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>
                        </div>
                        <div class="mdc-layout-grid__cell--span-6">
                          <div class="mdc-text-field mdc-text-field--dense mdc-text-field--fullwidth portal-text-field--fullwidth">
                            <input pattern=".{8,}" type="password" class="mdc-text-field__input" id="repeat-pw" autocomplete="current-password">
                            <label for="repeat-pw" class="mdc-floating-label">Repeat Password</label>
                            <div class="mdc-line-ripple"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                  <div class="portal-card__content--column-actions">
                    <button disabled class="mdc-button mdc-button--raised mdc-button--portal-login">Register</button>
                  </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 %}