{% extends "base-site-fullscreen.html" %}

{% block title %} Register {% endblock %} 

{% block content %}

  <div class="page-wrapper full-page-wrapper d-flex align-items-center justify-content-center">
    <main class="auth-page">
      <div class="mdc-layout-grid">
        <div class="mdc-layout-grid__inner">
          <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-1-tablet"></div>
          <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-6-tablet">
            <div class="mdc-card">

              <div class="text-center">
                <h1>
                  <a href="https://appseed.us/admin-dashboards/flask-dashboard-admin-material" >Flask Dashboard Material Admin</a>
                </h1>
                <br />
                <h5>
                  {% if msg %}
                      {{ msg | safe }}
                  {% else %}
                    Add your credentials 
                    <br />
                    OR <a href={{ url_for('base_blueprint.login') }}>authenticate</a> using an existing account.
                  {% endif %}               
                </h5>
              </div>
                  
              <form role="form" method="post" action="">

                {{ form.hidden_tag() }} 

                <div class="mdc-layout-grid">
                  <div class="mdc-layout-grid__inner">

                    <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-12">
                      <div class="mdc-text-field w-100">
                        {{ form.username(placeholder="Username", class="mdc-text-field__input") }}
                        <div class="mdc-line-ripple"></div>
                        <label for="text-field-hero-input" class="mdc-floating-label">Username</label>
                      </div>
                    </div>

                    <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-12">
                      <div class="mdc-text-field w-100">
                        {{ form.email(placeholder="Email", class="mdc-text-field__input") }}
                        <div class="mdc-line-ripple"></div>
                        <label for="text-field-hero-input" class="mdc-floating-label">Email</label>
                      </div>
                    </div>

                    <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-12">
                      <div class="mdc-text-field w-100">
                        {{ form.password(placeholder="Password", class="mdc-text-field__input", type="password") }}
                        <div class="mdc-line-ripple"></div>
                        <label for="text-field-hero-input" class="mdc-floating-label">Password</label>
                      </div>
                    </div>
                    <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-6-desktop">
                      <div class="mdc-form-field">
                        <div class="mdc-checkbox">
                          <input type="checkbox"
                                  class="mdc-checkbox__native-control"
                                  id="checkbox-1"/>
                          <div class="mdc-checkbox__background">
                            <svg class="mdc-checkbox__checkmark"
                                  viewBox="0 0 24 24">
                              <path class="mdc-checkbox__checkmark-path"
                                    fill="none"
                                    d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                            </svg>
                            <div class="mdc-checkbox__mixedmark"></div>
                          </div>
                        </div>
                        <label for="checkbox-1">Terms & Conditions</label>
                      </div>
                    </div>
                    <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-6-desktop d-flex align-items-center justify-content-end">
                      <a href={{ url_for('base_blueprint.login') }} >Login</a>
                    </div>
                    <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-12">
                      <button type="submit" name="register" class="mdc-button mdc-button--raised w-100">
                        Register
                      </button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-1-tablet"></div>
        </div>
      </div>
    </main>
  </div>

{% endblock content %}