{% extends "base.html" %}
<!--              -->
{% load bootstrap3 %}
<!--              -->
{% block title %} Login {% endblock %}
<!--              -->
{% block content %}

<div class="kpx_login">
  <h3 class="kpx_authTitle">Login</h3>
  <div class="row kpx_row-sm-offset-3">
    <div class="col-xs-12 col-sm-6">
      <form class="kpx_loginForm" autocomplete="off" method="POST">
        {% csrf_token %}
        <!--              -->
        {% bootstrap_form form %}
        <input type="hidden" name="next" value="{{ next }}" />
        <hr />
        {% buttons %}
        <!-- JWT Login Button -->
        <button type="submit" name="action" value="jwt" class="btn btn-lg btn-outline-primary btn-block">
          <i class="glyphicon glyphicon-log-in"></i> JWT Login
        </button>
        <!-- Session Login Button -->
        <button type="submit" name="action" value="session" class="btn btn-lg btn-outline-secondary btn-block">
          <i class="glyphicon glyphicon-log-in"></i> Session Login
        </button>
        {% endbuttons %}
      </form>
    </div>
  </div>
</div>

<script>
  $("form").on("submit", function (event) {
    event.preventDefault();
  
    let action = $(this).find("button[type=submit]:focus").val();
  
    if (action === 'jwt') {
      // JWT Login logic
      $.ajax({
        type: "POST",
        url: "/{{ jwt_token_url }}",
        data: $(this).serialize(),
        success: function (data) {
          console.log(data);
          localStorage.setItem('refresh_token', data.refresh);
          localStorage.setItem('access_token', data.access);
          window.location.href = "/{{ dashboard_url }}";
        }
      });
    } else if (action === 'session') {
      // Session Login logic
      $.ajax({
        type: "POST",
        url: "/{{ dashboard_url }}/login",
        data: $(this).serialize(),
        success: function (data) {
          console.log(data);
          window.location.href = "/{{ dashboard_url }}";
        }
      });
    }
  });
  
</script>

{% endblock %}
