{% extends 'layouts/base-fullscreen.html' %}
{% load i18n static dashboard %}

{% block content %}

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

  <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">
                    Sign IN  
                  </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" method="post" action="#">
                    {% if form.non_field_errors %}
                      {% for error in form.non_field_errors %}
                        <span class="text-danger">{{ error }}</span>
                      {% endfor %}
                    {% endif %}
                    {% csrf_token %}
                    {% for field in form %}
                      <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                      <div class="mb-3">
                        {{field}}
                      </div>
                    {% endfor %}
                    <p class=""> 
                      <a href="{% url 'password_reset' %}" class="text-primary">Forgot password</a>
                    </p>

                    <div class="text-center">
                      <button type="submit" class="btn bg-gradient-info w-100 mt-1 mb-0">Sign in</button>
                      <p class="mt-4">
                        Don't have an account? 
                        <a href="{% url 'register' %}" class="text-primary">Register</a>
                      </p>
                    </div>

                  </form>
                </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('{% static 'img/curved-images/curved6.jpg' %}')"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

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

{% endblock content %}

{% block extrascript %}
    <script type="application/javascript">
        {% if form.username.errors %}
            notification.danger("{{ form.username.errors }}", 'top', 'right');
        {% endif %}
        {% if form.password.errors %}
            notification.danger("{{ form.password.errors }}", 'top', 'right');
        {% endif %}

        {% if user.is_authenticated %}
            var msg = "You are authenticated as {{ username }}, but are not authorized to " +
                "access this page.Would you like to login to a different account ?"
            notification.warning(msg, 'top', 'right');
        {% endif %}

        {% if form.errors and not form.non_field_errors %}
            {% if form.errors.items|length == 1 %}
                notification.warning("{% trans "Please correct the error below." %}", 'top', 'right');
            {% else %}
                notification.warning("{% trans "Please correct the errors below." %}", 'top', 'right');
            {% endif %}
        {% endif %}

        {% if form.non_field_errors %}
            {% for error in form.non_field_errors %}
                notification.warning("{{ error|clean_text }}", 'top', 'right');
            {% endfor %}
        {% endif %}
    </script>
{% endblock %}