{% extends "layout.html" %}

{% block title %}Вход - ZontikGram Lite{% endblock %}

{% block content %}
<div style="max-width: 400px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px;">
    <h2 style="text-align: center; margin-bottom: 30px; color: #667eea;">🔑 Вход в аккаунт</h2>
    
    <form method="post" action="{{ url_for('login') }}" id="loginForm">
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Имя пользователя:</label>
            <input type="text" name="username" required 
                   style="width: 100%; padding: 10px; border: 1px solid #cbd5e0; border-radius: 5px;">
        </div>
        
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Пароль:</label>
            <input type="password" name="password" required 
                   style="width: 100%; padding: 10px; border: 1px solid #cbd5e0; border-radius: 5px;">
            
            <div style="margin-top: 5px;">
                <label>
                    <input type="checkbox" id="showPassword"> Показать пароль
                </label>
            </div>
        </div>
        
        <button type="submit" class="btn btn-primary" style="width: 100%;">
            🔑 Войти
        </button>
    </form>
    
    <div style="margin-top: 20px; text-align: center;">
        <p>Нет аккаунта? <a href="{{ url_for('register') }}">Зарегистрируйтесь</a></p>
        <p><a href="{{ url_for('index') }}">← На главную</a></p>
    </div>
    
    <!-- Для тестирования -->
    <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
        <p style="text-align: center; color: #718096; margin-bottom: 10px;">Для тестирования:</p>
        <div style="display: flex; gap: 10px;">
            <button type="button" class="btn btn-secondary" style="flex: 1;" onclick="fillDemo('user1', 'pass1')">
                Войти как User1
            </button>
            <button type="button" class="btn btn-secondary" style="flex: 1;" onclick="fillDemo('user2', 'pass2')">
                Войти как User2
            </button>
        </div>
    </div>
</div>

<script>
// Показать/скрыть пароль
document.getElementById('showPassword').addEventListener('change', function() {
    const passwordField = document.querySelector('input[name="password"]');
    passwordField.type = this.checked ? 'text' : 'password';
});

// Заполнение демо-данных
function fillDemo(username, password) {
    document.querySelector('input[name="username"]').value = username;
    document.querySelector('input[name="password"]').value = password;
    document.getElementById('loginForm').submit();
}

// Проверка формы
document.getElementById('loginForm').addEventListener('submit', function(e) {
    const username = this.querySelector('input[name="username"]').value;
    const password = this.querySelector('input[name="password"]').value;
    
    if (!username || !password) {
        alert('Заполните все поля');
        e.preventDefault();
        return false;
    }
    
    return true;
});
</script>
{% endblock %}