<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ url_for('static', filename='../static/css/login.css') }}">
</head>
<body>
<h1>Party Controller</h1>
    <form id="loginForm" action="/api/login">
        <div class="button-container">
            <input id="nameInput" type="text" name="name" placeholder="Name" maxlength="20" minlength="1" required>
            <button id="loginButton" class="button" type="submit">Login</button>
        </div>
    </form>
    
    <footer style="position: fixed; bottom: 0; width: 100%; background-color: #333; color: rgb(220, 220, 210); text-align: center; padding: 10px;">
        <div>Partycontroller Version 0.1</div>
        <div>&copy; Lostkids</div>
    </footer>
    
    <script>
        document.getElementById("loginForm").addEventListener("submit", function(event) {
            event.preventDefault(); // Verhindert das normale Absenden des Formulars
            
            var nameInput = document.getElementById("nameInput");
            var name = nameInput.value;
            
            sessionStorage.setItem("name", name);
            
            // Das Formular manuell absenden
            this.submit();
        });
    </script>
</body>
</html>
