{% block stylesheets %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
        height: 100vh;
        margin: 0;
        background: radial-gradient(circle at 20% 20%, #e8f0ff, transparent 60%),
                    radial-gradient(circle at 80% 10%, #ffe9f9, transparent 60%),
                    radial-gradient(circle at 30% 80%, #e3fff4, transparent 50%),
                    radial-gradient(circle at 90% 70%, #fff3d9, transparent 60%),
                    #f4f7fb;
        background-attachment: fixed;
    }

    .login-card {
        background: rgba(255, 255, 255, 0.9); /* fond blanc transparent */
        border-radius: 10px;
        backdrop-filter: blur(3px);
    }
</style>
{% endblock %}

{% block body %}

<div class="container d-flex justify-content-center align-items-center" style="height: 90vh;">
    <div class="card shadow-sm p-5 login-card" style="width: 800px;">

        <div class="text-center mb-4">
            <img src="/images/img.jpg" alt="Logo" style="height: 90px;">
        </div>

        {% if error %}
            <div class="alert alert-danger text-center">
                {{ error.messageKey|trans(error.messageData, 'security') }}
            </div>
        {% endif %}

        <form method="post">
            <div class="mb-3">
                <label class="form-label">Email</label>
                <input type="email" class="form-control" value="{{ last_username }}" name="email" required autofocus>
            </div>

            <div class="mb-3">
                <label class="form-label">Password</label>
                <div class="input-group">
                    <input type="password" class="form-control" name="password" id="passwordField" required >

                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                        <span id="eyeIcon">👁</span>
                    </button>
                </div>
                
            </div>

            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="_remember_me" id="remember">
                    <label class="form-check-label" for="remember">Remember me</label>
                </div>
                <!--<a href="#" class="text-decoration-none">Forgot your password?</a>-->
            </div>

            <div class="d-flex justify-content-end">
                <button class="btn btn-dark px-4" type="submit">LOG IN</button>
            </div>
        </form>

    </div>
</div>

{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            const passwordField = document.getElementById("passwordField");
            const togglePassword = document.getElementById("togglePassword");
            const eyeIcon = document.getElementById("eyeIcon");

            togglePassword.addEventListener("click", function () {
                if (passwordField.type === "password") {
                    passwordField.type = "text";
                    eyeIcon.textContent = "👁‍🗨"; // œil ouvert
                } else {
                    passwordField.type = "password";
                    eyeIcon.textContent = "👁"; // œil fermé
                }
            });

        });
</script>

{% endblock %}