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

{% block content %}

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

  <main class="main-content  mt-0">
    <div class="page-header align-items-start min-vh-100" style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');">
      <span class="mask bg-gradient-dark opacity-6"></span>
      <div class="container my-auto">
        <div class="row">
          <div class="col-lg-4 col-md-8 col-12 mx-auto">
            <div class="card z-index-0 fadeIn3 fadeInBottom">
              <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                <div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
                  <h4 class="text-white font-weight-bolder text-center mt-2 mb-0">
                    Sign IN
                  </h4>
                  <div class="row mt-3">
                    <p class="mb-0 text-white text-center">
                      {% if msg %}
                        {{ msg | safe }}
                      {% else %}
                        Add your credentials
                      {% endif %}
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-body">

                <form method="post" role="form" class="text-start" action="{{ app_path }}">

                  {% csrf_token %}

                  <div class="input-group input-group-outline mb-3">
                    {{ form.username }}
                  </div>
                
                  <div class="input-group input-group-outline mb-3">
                    {{ form.password }}
                  </div>

                  <div class="text-center">
                    <button type="submit" class="btn bg-gradient-primary w-100 my-4 mb-2">Sign in</button>
                  </div>

                  <p class="mt-4 text-sm text-center">
                    Don't have an account?
                    <a href="{% url 'register' %}" class="text-primary text-gradient font-weight-bold">Sign UP</a>
                  </p>

                </form>

              </div>
            </div>
          </div>
        </div>
      </div>
        {% include 'includes/footer-fullscreen.html' %}
    </div>
  </main>


{% 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 %}