{{define "login"}}
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bejelentkezés — Felhom</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body class="login-body">
    <div class="login-card">
        <img src="/static/felhom-logo.svg" alt="Felhom.eu" class="login-logo">
        <h1 class="login-title">Otthoni <span class="title-accent">vezérlőpult</span></h1>
        <p class="login-subtitle">{{.CustomerName}}</p>
        {{if .Flash}}<div class="alert alert-info">{{.Flash}}</div>{{end}}
        {{if .Error}}<div class="alert alert-error">{{.Error}}</div>{{end}}
        <form method="POST" action="/login">
            <input type="hidden" name="next" id="next-field" value="">
            <div class="form-group">
                <label for="password">Jelszó</label>
                <input type="password" id="password" name="password" required autofocus
                       placeholder="Adja meg a jelszavát" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary btn-full">Bejelentkezés</button>
        </form>
        <p class="login-footer">Felhom — Otthoni szerver kezelés<br>
        <a href="https://felhom.eu" target="_blank">felhom.eu</a></p>
    </div>
    <script>
    (function() {
        var params = new URLSearchParams(window.location.search);
        var next = params.get('next');
        if (next) {
            document.getElementById('next-field').value = next;
        }
    })();
    </script>
</body>
</html>
{{end}}
