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

{% block title %} Sign IN {% endblock title %}

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

{% block content %}

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

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

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

  <main class="main-content  mt-0">
    <section>
      <div class="page-header min-vh-75">
        <div class="container">
          <div class="row">
            <div class="col-xl-4 col-lg-5 col-md-6 d-flex flex-column mx-auto">
              <div class="card card-plain mt-8">
                <div class="card-header pb-0 text-left bg-transparent">
                  <h3 class="font-weight-bolder text-info text-gradient">
                    Soft UI Dashboard
                  </h3>
                  <p class="mb-0">
                    {% if msg %}
                      <span class="text-danger">{{ msg | safe }}</span>
                    {% else %}
                      Add your credentials
                    {% endif %}                     
                  </p>
                </div>
                <div class="card-body">

                  <form role="form text-left" method="post" action="">
                    
                    {% csrf_token %}

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

                    <label>Password</label>
                    <div class="mb-3">
                      {{ form.password }}
                    </div>

                    <div class="text-center">
                      <button type="submit" name="login" class="btn bg-gradient-info w-100 mt-4 mb-0">Sign IN</button>
                    </div>

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

                  </form>

                </div>
                <div class="card-footer text-center pt-0 px-lg-2 px-1">
                  <p class="mb-4 text-sm mx-auto">

                    <!-- GitHub button starts here -->
                    {% if SOCIAL_AUTH_GITHUB %}
                      
                      <p class="mb-2">or SignIn with</p>
                      
                      <a class="btn btn-outline" href="#">
                        <span class="text-lg fs-1 fab fa-github"></span>
                      </a>
                          
                    {% endif %}
                    <!-- GitHub ends here -->
                                                           
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="oblique position-absolute top-0 h-100 d-md-block d-none me-n8">
                <div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6" style="background-image:url('{{ ASSETS_ROOT }}/img/curved-images/curved6.jpg')"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

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

{% endblock content %}

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