{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load django_bootstrap5 %}

{% block title %}{% trans "WebVirtCloud" %} - {% trans "Sign In with OTP" %}{% endblock title %}

{% block style %}
<link href="{% static "css/signin.css" %}" rel="stylesheet">
{% endblock style %}

{% block content %}
<div class="login-box">
    <div class="page-header">
        <a href="/"><h1>WebVirtCloud</h1></a>
    </div>
    <hr>
    <div class="col-12" role="main">
        {% if form.errors %}
            <div class="alert alert-danger" role="alert">
                {% bootstrap_form_errors form %}
            </div>
        {% endif %}

        <form id="form-signin" class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
            <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
            {% bootstrap_field form.username layout='inline' %}
            {% bootstrap_field form.password layout='inline' %}
            {% bootstrap_field form.otp_token layout='inline'%}
            <a href="{% url 'accounts:email_otp' %}" class="float-end">{% trans "I do not have/lost my OTP!" %}</a>
            <br>
            <div class="d-grid">
                <button id="btn-signin" class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
            </div>
        </form>
    </div>
</div>
{% endblock content %}

{% block script %}
<script>
    $(document).ready(function() {
        $("#btn-signin").click(function() {
            // disable button
            $(this).prop("disabled", true);
            // add spinner to button
            $(this).html(
            `
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            {% trans "Loading" %}...
            `
            );
            $("#form-signin").submit();
        });
});
</script>
{% endblock script%}
