{% 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('register') }}" enctype="multipart/form-data" id="registerForm">
        <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>
        
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Аватар (необязательно):</label>
            <input type="file" name="avatar" accept="image/*" id="avatarInput"
                   style="width: 100%; padding: 10px; border: 1px solid #cbd5e0; border-radius: 5px;">
            
            <div id="avatarPreview" style="margin-top: 10px; text-align: center;">
                <img src="/static/default-avatar.png" alt="Предпросмотр" 
                     style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;">
            </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('login') }}">Войдите</a></p>
        <p><a href="{{ url_for('index') }}">← На главную</a></p>
    </div>
</div>

<script>
document.getElementById('avatarInput').addEventListener('change', function(e) {
    if (e.target.files && e.target.files[0]) {
        const reader = new FileReader();
        reader.onload = function(event) {
            document.getElementById('avatarPreview').innerHTML = 
                `<img src="${event.target.result}" alt="Предпросмотр" 
                      style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;">`;
        };
        reader.readAsDataURL(e.target.files[0]);
    }
});

document.getElementById('registerForm').addEventListener('submit', function(e) {
    const username = this.querySelector('input[name="username"]').value;
    const password = this.querySelector('input[name="password"]').value;
    
    if (username.length < 3) {
        alert('Имя пользователя должно быть не менее 3 символов');
        e.preventDefault();
        return false;
    }
    
    if (password.length < 4) {
        alert('Пароль должен быть не менее 4 символов');
        e.preventDefault();
        return false;
    }
    
    return true;
});
</script>
{% endblock %}