{% extends '_layouts/auth' %}

{% set pageTitle = 'Login' %}

{% block content %}
<a href="{{ href('/') }}">
    <img src="{{ href(themeCardealerLogo) }}" alt="{{ springApplicationName }}" class="auth-logo">
</a>

{% if param.error %}
<div class="alert alert-danger py-2 text-center" role="alert">Credenziali non valide</div>
{% endif %}
{% if param.logout %}
<div class="alert alert-success py-2 text-center" role="alert">Logout eseguito</div>
{% endif %}

<form action="{{ href('/login') }}" method="post">
    <input type="hidden" name="{{ request.getAttribute('_csrf').parameterName }}"
        value="{{ request.getAttribute('_csrf').token }}">

    <div class="mb-3">
        <label for="username" class="form-label">Username</label>
        <input type="text" id="username" name="username" class="form-control"
            placeholder="Username" autofocus required>
    </div>

    <div class="mb-4">
        <label for="password" class="form-label">Password</label>
        <div class="input-group">
            <input type="password" id="password" name="password" class="form-control"
                placeholder="Password" required>
            <span class="input-group-text" id="toggle-password">
                <i class="fa fa-eye-slash"></i>
            </span>
        </div>
    </div>

    <button type="submit" class="button">Login</button>
</form>
{% endblock %}

{% block scripts %}
<script>
    (function () {
        var toggle = document.getElementById('toggle-password');
        var pwd = document.getElementById('password');
        if (toggle && pwd) {
            toggle.addEventListener('click', function () {
                var icon = toggle.querySelector('i');
                if (pwd.type === 'password') {
                    pwd.type = 'text';
                    icon.className = 'fa fa-eye';
                } else {
                    pwd.type = 'password';
                    icon.className = 'fa fa-eye-slash';
                }
            });
        }
    })();
</script>
{% endblock %}