{% extends "layouts/auth-default.html" %}

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

{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

      <div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("/static/assets/static/images/bg.jpg")'>
        <div class="pos-a centerXY">
          <div class="bgc-white bdrs-50p pos-r" style="width: 120px; height: 120px;">
            <img class="pos-a centerXY" src="/static/assets/static/images/logo.png" alt="">
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style="min-width: 320px;">
      
        {% if msg %}
            <h4 class="fw-300 c-grey-900 mB-40">{{ msg | safe }}</h4>
        {% else %}
            <h4 class="fw-300 c-grey-900 mB-40">Register</h4>
        {% endif %}

        <form method="post" action="">

          {{ form.hidden_tag() }}

          <div class="form-group">
            <label class="text-normal text-dark">Friendly Name</label>
            {{ form.name(placeholder="Friendly Name", class="form-control") }}
          </div>

          <div class="form-group">
            <label class="text-normal text-dark">Username</label>
            {{ form.username(placeholder="Username", class="form-control") }}
          </div>
          
          <div class="form-group">
            <label class="text-normal text-dark">eMail Address</label>
            {{ form.email(placeholder="eMail Address", class="form-control") }}
          </div>

          <div class="form-group">
            <label class="text-normal text-dark">Password</label>
            {{ form.password(placeholder="Password", class="form-control", type="password") }}
          </div>

          <div class="form-group">
            <button type="submit" class="btn btn-primary">Register</button> 

            &nbsp; &nbsp;
            <span class="text-small font-weight-semibold">Already have and account?</span>
            <a href="/login.html" class="text-black text-small">Login</a>    
          </div>

        </form>
      </div>

{% endblock content %}