{% extends "macros/base.html" %}

{% block title %}Login{% endblock %}

{% block head %}
<style>
    .login-box {
        position: relative;
        z-index: 10;
    }
</style>
{% endblock %}

{% block content %}
<div id="tsparticles"></div>

<div class="login-box text-center">
    <h2 class="fw-bold mb-1">SekiPOS</h2>
    <p class="mb-4 text-muted">¡Hola de nuevo!</p>

    {% with messages = get_flashed_messages() %}
    {% if messages %}
    <div class="error-alert p-2 mb-3">{{ messages[0] }}</div>
    {% endif %}
    {% endwith %}

    <form method="POST">
        <input class="form-control mb-3" type="text" name="username" placeholder="Usuario" required autofocus>
        <input class="form-control mb-3" type="password" name="password" placeholder="Contraseña" required>
        <button type="submit" class="btn btn-login w-100">
            Iniciar Sesión
        </button>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.3.0/tsparticles.bundle.min.js"></script>
<script>
    (async () => {
        await tsParticles.load({
            id: "tsparticles",
            options: {
                fullScreen: {
                    enable: true,
                    zIndex: -1 
                },
                background: {
                    color: {
                        value: "transparent",
                    },
                },
                fpsLimit: 60,
                interactivity: {
                    events: {
                        onHover: {
                            enable: true,
                            mode: "grab",
                        },
                    },
                    modes: {
                        grab: {
                            distance: 150,
                            links: {
                                opacity: 0.8 
                            }
                        }
                    }
                },
                particles: {
                    color: {
                        value: "#9b59b6",
                    },
                    links: {
                        color: "#9b59b6",
                        distance: 150,
                        enable: true,
                        opacity: 0.6, 
                        width: 1.5,   
                    },
                    move: {
                        enable: true,
                        speed: 1,
                    },
                    number: {
                        density: {
                            enable: true,
                            width: 1920,
                            height: 1080
                        },
                        value: 80,
                    },
                    opacity: {
                        value: 0.9, 
                    },
                    size: {
                        value: { min: 1, max: 3 },
                    },
                },
            },
        });
    })();
</script>
{% endblock %}