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

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

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="main-content-container container-fluid px-4">
      <!-- Page Header -->
      <div class="page-header row no-gutters py-4">
        <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
          <h3 class="page-title">Register</h3>
        </div>
      </div>
      <!-- End Page Header -->
      <!-- Default Light Table -->
      <div class="row">

        <div class="col-lg-8">
          <div class="card card-small mb-4">
            <div class="card-header border-bottom">
              <h6 class="m-0">
                
                {% if msg %}
                  {{ msg | safe }}
                {% else %}
                  Complete your credentials 
                  <br />
                  OR <a href={{ url_for('base_blueprint.login') }}>authenticate</a> using an existing account.
                {% endif %}  

              </h6>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item p-3">
                <div class="row">
                  <div class="col">

                    <form role="form" method="post" action="" class="pt-3">
              
                      {{ form.hidden_tag() }} 

                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="feFirstName">Username</label>
                          {{ form.username(placeholder="Username", class="form-control form-control-lg") }}
                        </div>
                      </div>

                      <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="feFirstName">Email</label>
                            {{ form.email(placeholder="Email", class="form-control form-control-lg") }}
                        </div>
                      </div>
    
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="feEmailAddress">Password</label>
                          {{ form.password(placeholder="Password", class="form-control form-control-lg", type="password") }}
                        </div>
                      </div>
                      
                      <button type="submit" name="register" class="btn btn-accent">Register</button>
                       &nbsp; &nbsp; 
                       Have an account? <a href={{ url_for('base_blueprint.login') }} class="text-primary">Login</a>
                    </form>

                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- End Default Light Table -->
    </div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}