{% extends "base.html" %}

{% block title %}Регистрация - Капитал & Рынок{% endblock %}

{% block screen_content %}
<div class="header">
    <a href="{{ url_for('login') }}" class="back-button">←</a>
    <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('register') }}" class="auth-form">
            <div class="input-group">
                <label for="username">Имя пользователя *</label>
                <input type="text" id="username" name="username" 
                       placeholder="Придумайте никнейм (мин. 3 символа)" 
                       value="{{ request.form.username if request.form }}" 
                       required autofocus>
                <small style="color: var(--light-text); font-size: 0.85rem;">
                    Будет отображаться другим игрокам
                </small>
            </div>
            
            <div class="input-group">
                <label for="email">Email *</label>
                <input type="email" id="email" name="email" 
                       placeholder="Ваш email" 
                       value="{{ request.form.email if request.form }}" 
                       required>
                <small style="color: var(--light-text); font-size: 0.85rem;">
                    Только для восстановления пароля
                </small>
            </div>
            
            <div class="input-group">
                <label for="password">Пароль *</label>
                <input type="password" id="password" name="password" 
                       placeholder="Придумайте пароль (мин. 4 символа)" required>
            </div>
            
            <div class="input-group">
                <label for="password2">Повторите пароль *</label>
                <input type="password" id="password2" name="password2" 
                       placeholder="Повторите пароль" required>
            </div>
            
            <div class="input-group mt-2">
                <div style="background-color: #f5f5f5; padding: 10px; border-radius: var(--border-radius);">
                    <label style="display: flex; align-items: flex-start; gap: 10px; cursor: pointer;">
                        <input type="checkbox" name="terms" required style="margin-top: 3px;">
                        <span style="font-size: 0.9rem;">
                            Я согласен с <a href="#" onclick="showTerms()">правилами игры</a> и 
                            <a href="#" onclick="showPrivacy()">политикой конфиденциальности</a>
                        </span>
                    </label>
                </div>
            </div>
            
            <button type="submit" class="button success mt-3">Зарегистрироваться</button>
            
            <div class="auth-links">
                <a href="{{ url_for('login') }}">Уже есть аккаунт? Войти</a>
            </div>
        </form>
    </div>
    
    <div class="card">
        <h3>Почему стоит зарегистрироваться?</h3>
        <ul style="padding-left: 20px; margin-top: 10px;">
            <li style="margin-bottom: 8px;">🎮 Сохраняйте прогресс в играх</li>
            <li style="margin-bottom: 8px;">📊 Отслеживайте статистику и рейтинг</li>
            <li style="margin-bottom: 8px;">👥 Создавайте приватные комнаты</li>
            <li style="margin-bottom: 8px;">🏆 Участвуйте в турнирах и соревнованиях</li>
            <li>💬 Общайтесь с другими игроками</li>
        </ul>
    </div>
</div>

<!-- Модальные окна с правилами -->
<div id="terms-modal" class="modal-backdrop">
    <div class="modal" style="max-width: 600px;">
        <h3>Правила игры "Капитал & Рынок"</h3>
        <div style="max-height: 400px; overflow-y: auto; padding-right: 10px;">
            <h4>1. Основные правила</h4>
            <p>Игра проходит в реальном времени, каждый месяц длится 2-5 минут.</p>
            
            <h4>2. Поведение игроков</h4>
            <p>Запрещены оскорбления, нецензурная лексика, мошенничество.</p>
            
            <h4>3. Использование способностей</h4>
            <p>Способности можно использовать согласно их описанию и ограничениям.</p>
            
            <h4>4. Определение победителя</h4>
            <p>Победителем становится игрок с наибольшим капиталом после 12 месяцев.</p>
            
            <h4>5. Дисквалификация</h4>
            <p>Администратор может дисквалифицировать игрока за нарушение правил.</p>
        </div>
        <button onclick="hideTerms()" class="button mt-3">Понятно</button>
    </div>
</div>

<div id="privacy-modal" class="modal-backdrop">
    <div class="modal" style="max-width: 600px;">
        <h3>Политика конфиденциальности</h3>
        <div style="max-height: 400px; overflow-y: auto; padding-right: 10px;">
            <h4>1. Собираемые данные</h4>
            <p>Мы собираем только необходимые данные: имя пользователя, email (опционально), статистику игр.</p>
            
            <h4>2. Использование данных</h4>
            <p>Данные используются только для работы игры: идентификации, статистики, рейтингов.</p>
            
            <h4>3. Безопасность</h4>
            <p>Пароли хранятся в зашифрованном виде. Мы не передаем ваши данные третьим лицам.</p>
            
            <h4>4. Cookies</h4>
            <p>Используем только технические cookies для работы сессий.</p>
        </div>
        <button onclick="hidePrivacy()" class="button mt-3">Понятно</button>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function showTerms() {
    event.preventDefault();
    document.getElementById('terms-modal').classList.add('active');
}

function hideTerms() {
    document.getElementById('terms-modal').classList.remove('active');
}

function showPrivacy() {
    event.preventDefault();
    document.getElementById('privacy-modal').classList.add('active');
}

function hidePrivacy() {
    document.getElementById('privacy-modal').classList.remove('active');
}

// Валидация формы
document.querySelector('form').addEventListener('submit', function(e) {
    const password = document.getElementById('password').value;
    const password2 = document.getElementById('password2').value;
    const terms = document.querySelector('input[name="terms"]');
    
    if (password !== password2) {
        e.preventDefault();
        alert('Пароли не совпадают!');
        document.getElementById('password2').focus();
        return false;
    }
    
    if (password.length < 4) {
        e.preventDefault();
        alert('Пароль должен быть не менее 4 символов!');
        document.getElementById('password').focus();
        return false;
    }
    
    if (!terms.checked) {
        e.preventDefault();
        alert('Необходимо согласиться с правилами игры!');
        return false;
    }
    
    return true;
});
</script>
{% endblock %}