{% extends 'registration/registration_base.html' %}
{% block title %}DjangoSMS - Login{% endblock title %}
{% load crispy_forms_tags %}
{% block content %}

<div id="login">
  <div class="login-title blue-gradient">
    <i class="fas fa-lock"></i>
    <span class="login-title-text">Sign in</span>
  </div>

  <form action="" method="POST" id="login-form">{% csrf_token %}
    <div class="form-group px-3">
        <label for="username_id"><i class="fas fa-address-card"></i>ID Number</label>
        <input type="text" name="username" id="username_id" class="form-control" required>
        <div id="message-wrapper"></div>
    </div>
    <div class="form-group px-3">
        <label for="password_id"><i class="fas fa-key"></i>Password</label>
        <input type="password" name="password" id="password_id" class="form-control" required>
    </div>
    {% if form.errors %}
          <span class="text-danger"><i class="fas fa-exclamation-circle"></i> Invalid ID & Password.</span><br>
    {% endif %}

    <button type="submit" class="btn btn-primary" id="login-btn"><i class="fas fa-sign-in-alt"></i><small> SIGN IN</small></button>
  </form>
  <br>
  <div class="login-bottom">
    <a href="{% url 'password_reset' %}" class="link">Forgot password ?</a>
    <a href="{% url 'register' %}" class="link">Don't have an account ?</a>
  </div>
</div>
{% endblock content %}

{% block js %}

<script>
  $('#login-form').submit(function (e) {
    // e.preventDefault();
    $('#login-btn').addClass('disabled')
    $('#login-btn').html(`<i class="fas fa-sign-in-alt"></i> Signining you in . . .`)
  })

  $("#username").on("input", function () {
    username = $(this).val();

    $.ajax({
      url: "/accounts/ajax/validate-username/",
      data: {
        username: username
      },
      dataType: 'json',
      success: function (data) {
        if (data.is_taken) {
          console.log(data.is_taken);
          $('#message-wrapper').html(`<p class="my-2 text-danger"><span class="bg-error p-2"><b>${username}</b> already taken :( try another one </span></p>`)
        }
        else {
          $('#message-wrapper').html(`<p class="my-2 text-success"><span class="bg-correct p-2"><b>${username}</b> is valid </span></p>`)
        }
      }

    })
  })
</script>
{% endblock %}