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


{% block title %}{% trans "WebVirtCloud" %} - {% trans "Sign In" %}{% 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">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                {% trans "Incorrect username or password." %}
            </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>
            <input type="text" class="form-control" name="username" placeholder="{% trans 'User' %}" autocapitalize="none" autocorrect="off" autofocus required>
            <input type="password" class="form-control" name="password" placeholder="{% trans 'Password' %}" required>
            <input type="hidden" name="next" value="{{ next }}">
            <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 %}

{% 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%}