{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block base %}

<!--MESSAGES-->
{% for message in messages %}
{% if message.tags == 'error' %}
    <div class="alert alert-danger alert-dismissible fade show message__alerts text-center" role="alert" >
          <strong><span><i class="fa-solid fa-triangle-exclamation"></i></span>&nbsp;&nbsp;MESSAGE : </strong>{{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
{% else %}
    <div class="alert alert-{{message.tags}} alert-dismissible fade show message__alerts text-center" role="alert">
      <strong>MESSAGE : </strong>{{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
{% endif %}
{% endfor %}
<!--MESSAGES-->

<div  class="position-absolute top-50 start-50 translate-middle">
<div class="box__bg">
<h3 style="text-align: center;">LOGIN TO CONTINUE</h3>
    <div>
        <form method="post" action="{% url 'login' %}" id="formPage">

            {% csrf_token %}
                    {{form|crispy}}
                <button type="submit" class="btn mt-5 form-control shadowed" id="submitBtn" style="background-color: #0c031a;color:white;">LOGIN</button>
        </form>
    </div>
</div>
</div>


    <script>
        document.getElementById("formPage").onsubmit = function() {
                    document.getElementById("submitBtn").disabled = true;
                    document.getElementById("submitBtn").innerText = 'LOGGING YOU IN';
                }
    </script>
{% endblock %}