{% extends "base.html" %}

{% block title %}Вход - Капитал & Рынок{% endblock %}

{% block content %}
<div class="header">
    <div class="logo-container">
        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Капитал & Рынок" class="logo">
    </div>
</div>

<div class="container">
    <div class="card">
        <h2>Вход в игру</h2>
        
        <form method="POST" action="{{ url_for('login') }}" class="auth-form">
            <div class="input-group">
                <label for="username">Имя пользователя</label>
                <input type="text" id="username" name="username" 
                       placeholder="Введите ваш никнейм" 
                       value="{{ request.form.username if request.form }}" 
                       required autofocus>
            </div>
            
            <div class="input-group">
                <label for="password">Пароль</label>
                <input type="password" id="password" name="password" 
                       placeholder="Введите пароль" required>
            </div>
            
            <div class="input-group" style="flex-direction: row; align-items: center; gap: 10px;">
                <input type="checkbox" id="remember" name="remember" checked>
                <label for="remember" style="margin: 0;">Запомнить меня</label>
            </div>
            
            <button type="submit" class="button">Войти</button>
            
            <div class="auth-links">
                <a href="{{ url_for('register') }}">Создать аккаунт</a>
                <a href="#" onclick="showQuickLogin()">Быстрый вход (тест)</a>
            </div>
        </form>
    </div>
    
    <div class="card">
        <h3>Тестовые аккаунты</h3>
        <p style="margin-bottom: 15px; color: var(--light-text); font-size: 0.9rem;">
            Для быстрого тестирования игры:
        </p>
        
        <div class="flex flex-col gap-2">
            <a href="{{ url_for('quick_login', username='Игрок1') }}" class="button secondary">
                Войти как Игрок1
            </a>
            <a href="{{ url_for('quick_login', username='Игрок2') }}" class="button secondary">
                Войти как Игрок2
            </a>
            <a href="{{ url_for('quick_login', username='Инвестор') }}" class="button secondary">
                Войти как Инвестор
            </a>
        </div>
    </div>
</div>

<!-- Модальное окно быстрого входа -->
<div id="quick-login-modal" class="modal-backdrop">
    <div class="modal">
        <h3>Быстрый вход</h3>
        <p>Введите имя для быстрого входа (будет создан аккаунт если его нет):</p>
        
        <div class="input-group mt-3">
            <input type="text" id="quick-username" placeholder="Имя пользователя" style="width: 100%;">
        </div>
        
        <div class="flex gap-2 mt-4">
            <button onclick="doQuickLogin()" class="button success">Войти</button>
            <button onclick="hideQuickLogin()" class="button secondary">Отмена</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function showQuickLogin() {
    event.preventDefault();
    document.getElementById('quick-login-modal').classList.add('active');
    document.getElementById('quick-username').focus();
}

function hideQuickLogin() {
    document.getElementById('quick-login-modal').classList.remove('active');
}

function doQuickLogin() {
    const username = document.getElementById('quick-username').value.trim();
    if (username) {
        window.location.href = `/quick_login/${encodeURIComponent(username)}`;
    } else {
        alert('Введите имя пользователя');
    }
}

// Автозаполнение формы для теста
document.addEventListener('DOMContentLoaded', function() {
    // Если это демо-версия, можно автозаполнить форму
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('demo') === '1') {
        document.getElementById('username').value = 'test_user';
        document.getElementById('password').value = 'test123';
    }
});
</script>
{% endblock %}