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

{% block title %} Login {% 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="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 %}
                        <span>
                          Use default credentials: test / pass
                          <br />
                          OR <a href={{ url_for('base_blueprint.create_user') }} >create your own user</a>
                        </span>
                        {% 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="form-control 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.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">Remember me</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.create_user') }} >Register</a>
                      </div>
                      <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-12">
                        <button type="submit" name="login" class="mdc-button mdc-button--raised w-100">
                          Login
                        </button>

                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <div class="stretch-card mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-1-tablet"></div>
          </div>
        </div>
      </main>
    </div>

{% endblock content %}