{% extends 'layouts/base-fullscreen.html' %}

{% block title %} Sign UP {% endblock title %}

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

{% block content %}

  <div class="container position-sticky z-index-sticky top-1">
    <div class="row">
      <div class="col-12">

        {% include "includes/navigation-fullscreen.html" %}

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

  <main class="main-content  mt-0">

    <section class="min-vh-100 mb-8">
      <div class="page-header align-items-start min-vh-50 pt-5 pb-11 m-3 border-radius-lg" style="background-image: url('{{ ASSETS_ROOT }}/img/curved-images/curved14.jpg');">
        <span class="mask bg-gradient-dark opacity-6"></span>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-5 text-center mx-auto">
              <h1 class="text-white mb-2 mt-5">Welcome!</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row mt-lg-n10 mt-md-n11 mt-n10">
          <div class="col-xl-4 col-lg-5 col-md-7 mx-auto">
            <div class="card z-index-0">

              <div class="card-header text-center pt-4">
                <h5>Sign UP</h5>
              </div>

              <div class="row px-xl-5 px-sm-4 px-3">
                
                <div class="mt-2 position-relative text-center">
                  <p class="text-sm font-weight-bold mb-2 text-secondary text-border d-inline z-index-2 px-3">
                    {% if msg %}
                      <span class="text-danger">{{ msg | safe }}</span>
                    {% else %}
                      Add your credentials
                    {% endif %}  
                  </p>
                </div>

              </div>

              <div class="card-body">

                {% if success %} 
                
                  <p class="text-sm mt-3 mb-0 text-center"> 
                    <div class="text-center">
                      <a href="{% url 'login' %}" class="btn bg-gradient-dark w-100 my-4 mb-2">Sign IN</a>
                    </div> 
                  </p>

                {% else %}

                  <form role="form text-left" method="post" action="">

                      {% csrf_token %}

                      <label>Username</label>
                      <div class="mb-3">
                        {{ form.username }}
                      </div>
                      <span class="text-danger">{{ form.username.errors }}</span>

                      <label>Email</label>
                      <div class="mb-3">
                        {{ form.email }}
                      </div>
                      <span class="text-danger">{{ form.email.errors }}</span>

                      <label>Password</label>
                      <div class="mb-3">
                        {{ form.password1 }}
                      </div>
                      <span class="text-danger">{{ form.password1.errors }}</span>

                      <label>Password</label>
                      <div class="mb-3">
                        {{ form.password2 }}
                      </div>
                      <span class="text-danger">{{ form.password2.errors }}</span>                      

                      <div class="text-center">
                        <button type="submit" name="register" class="btn bg-gradient-dark w-100 my-4 mb-2">Sign UP</button>
                      </div>

                      <div class="text-center">
                        <a href="{% url 'login' %}" class="btn bg-gradient-secondary w-100 mt-4 mb-0">Sign IN</a>
                      </div>                

                  </form>

                {% endif %}

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

    {% include "includes/footer-fullscreen.html" %}

  </main>

  {% endblock content %}

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