{% extends '_layouts/empty' %}

{% block head %}
<script>
function togglePassword() {
    let $x = $("#password");
    let $eye = $("#eye");
    if ($x.attr('type') === "password") {
        $x.attr('type', 'text');
        $eye.removeClass('ti-eye').addClass('ti-eye-off');
    } else {
        $x.attr('type', 'password');
        $eye.removeClass('ti-eye-off').addClass('ti-eye');
    }
    return false;
}
</script>
{% endblock %}

{% block content %}
<div class="container-tight py-4">
    <div class="text-center mb-4">
        <a href="." class="navbar-brand navbar-brand-autodark">
            <img src="{{ href(themeLogo) }}" width="110" height="32" alt="{{ springApplicationName }}" class="navbar-brand-image">
        </a>
    </div>
    <div class="card card-md">
        <div class="card-body">
            <form action="{{ href('/login') }}" method="post" autocomplete="off" novalidate>
                <input type="hidden" name="{{request.getAttribute('_csrf').parameterName}}" value="{{request.getAttribute('_csrf').token}}">

                <div class="mb-3">
                    {% if request.getParameter('error') != null %}
                    <div class="alert alert-danger alert-dismissible" role="alert">
                        <div class="alert-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="icon alert-icon icon-2">
                                <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                                <path d="M12 8v4"></path>
                                <path d="M12 16h.01"></path>
                            </svg>
                        </div>
                        Username o password errati!
                        <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                    </div>
                    {% endif %}
                </div>

                <div class="mb-3">
                    <input type="text" class="form-control" name="username" placeholder="{{ message("login.username") }}" autocomplete="off" autofocus="autofocus">
                </div>

                <div class="mb-2">
                    <div class="input-group input-group-flat">
                        <input type="password" id="password" class="form-control" name="password" placeholder="{{ message("login.password") }}" autocomplete="off">
                        <span class="input-group-text">
                            <a href="#" style="text-decoration: none;" class="link-secondary" title="{{ message("login.showpassword") }}" data-bs-toggle="tooltip" onclick="return togglePassword();">
                                <i id="eye" class="ti ti-eye"></i>
                            </a>
                        </span>
                    </div>
                </div>
                <div class="form-footer">
                    <button type="submit" class="btn btn-primary w-100">{{ message("login.button") }}</button>
                </div>
            </form>
        </div>
</div>
{% endblock %}