{% extends "layouts/base-authentication.html" %}
{% load static %}

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

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

{% block content %}

    <div class="peers ai-s fxw-nw h-100vh">
      <div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{% 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 '/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;'>

        <h4 class="fw-300 c-grey-900 mB-40">Adminator - Login</h4>
        
        {% if msg %}
            <p class="fw-300 c-red-900 mB-40">{{ msg | safe }}</p>
        {% else %}
            <p class="fw-300 c-grey-900 mB-40">
              Add your credentials
            </p>
        {% endif %}

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

          {% csrf_token %}

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

          <div class="mb-3">
            <label class="text-normal text-dark form-label">Password</label>
            {{ form.password }}
          </div>
          <span class="text-error">{{ form.password.errors }}</span>

          <div class="mb-3">
            <button type="submit" name="login" class="btn btn-primary">Login</button>

            &nbsp; &nbsp;
            <span class="text-small font-weight-semibold">Not a member?</span>
            <a href="{% url 'register' %}" class="text-black text-small">Register</a>  
          </div>

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

{% endblock content %}

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