<!DOCTYPE html>
<html lang="ru" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Вход — TG Agent</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/style.css">
    <script>
    (function(){var t=localStorage.getItem('theme')||(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');document.documentElement.setAttribute('data-bs-theme',t)})();
    </script>
</head>
<body>
    <div class="d-flex justify-content-center align-items-center min-vh-100">
        <div class="card shadow" style="max-width: 28rem; width: 100%;">
            <div class="card-body p-3 p-sm-4">
                <h5 class="card-title mb-3">Вход в веб-панель</h5>
                <p class="text-muted">Введите пароль из <code>WEB_PASS</code>, чтобы открыть TG Agent.</p>

                {% if error %}
                <div class="alert alert-danger" role="alert">{{ error }}</div>
                {% endif %}

                <form method="post" action="/login" data-busy>
                    <input type="hidden" name="next" value="{{ next }}">
                    <div class="mb-3">
                        <label for="password" class="form-label">Пароль</label>
                        <input
                            type="password"
                            class="form-control"
                            id="password"
                            name="password"
                            autocomplete="current-password"
                            required
                            autofocus
                        >
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Войти</button>
                </form>
            </div>
        </div>
    </div>
<script>
document.addEventListener('submit', function(e) {
    if (e.defaultPrevented) return;
    var form = e.target;
    if (!form.hasAttribute('data-busy')) return;
    var btn = e.submitter || form.querySelector('button[type="submit"]');
    if (!btn || btn.disabled) return;
    btn.disabled = true;
    var label = btn.getAttribute('data-busy-label') || btn.textContent.trim();
    btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ' + label;
});
</script>
</body>
</html>
