{% extends "layouts/base.html" %}

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

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

{% block content %}

        <div class="row">
          <div class="col-md-8">
            <div class="card">

              <form role="form" method="post" action="">
              
                <div class="card-header">
                  <h5 class="title">Register</h5>

                  <h6 class="card-category">
                    {% if msg %}
                        {{ msg | safe }}
                    {% else %}
                        Add your credentials
                    {% endif %} 
                  </h6>
                </div>

                <div class="card-body">

                    <div class="row">
                      <div class="col-md-3 px-md-1">
                        <div class="form-group">
                          <label>Username</label>
                          {{ form.username(placeholder="Username", class="form-control") }}
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-3 px-md-1">
                        <div class="form-group">
                          <label>Email</label>
                          {{ form.email(placeholder="Email", class="input form-control", type="email") }}
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-3 px-md-1">
                        <div class="form-group">
                          <label>Password</label>
                          {{ form.password(placeholder="Password", class="form-control", type="password") }}
                        </div>
                      </div>
                    </div>
                    
                </div>
                <div class="card-footer">
                  <button type="submit" name="register" class="btn btn-fill btn-primary">Register</button>
                  &nbsp; &nbsp;
                  Have an account? <a href="{{ url_for('base_blueprint.login') }}" class="text-primary">Login</a>
                </div>

              </form>

            </div>
          </div>
      </div>


{% endblock content %}

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