{% extends "base.html" %}

{% block content %}
<style>
    .auth-container {
        max-width: 500px;
        margin: 2rem auto;
        padding: 2rem;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .auth-container h2 {
        color: #f5cba0;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    .form-group {
        margin-bottom: 1rem;
    }
    .form-group label {
        display: block;
        margin-bottom: 0.3rem;
        font-weight: 600;
        color: #f5cba0;
    }
    .form-group input {
        width: 100%;
        padding: 0.6rem;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.9);
        color: #2c2c2c;
    }
    .form-group input:focus {
        outline: none;
        border-color: #f5cba0;
    }
    .btn-primary {
        width: 100%;
        background: #f5cba0;
        color: #2c1810;
        padding: 0.75rem;
        border: none;
        border-radius: 50px;
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
        transition: 0.2s;
    }
    .btn-primary:hover {
        background: #ffdd99;
        transform: translateY(-2px);
    }
    .auth-link {
        text-align: center;
        margin-top: 1rem;
        color: white;
    }
    .auth-link a {
        color: #f5cba0;
        text-decoration: none;
    }
    .auth-link a:hover {
        text-decoration: underline;
    }
    small {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.7rem;
        color: #ffffff !important;
    }
</style>

<div class="auth-container">
    <h2>Регистрация</h2>
    
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    
    <form method="POST" class="auth-form">
        <div class="form-group">
            <label for="username">Имя пользователя:</label>
            <input type="text" id="username" name="username" required maxlength="50">
        </div>
        
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="example@mail.ru" maxlength="50">
            <small>Максимум 50 символов, локальная часть (до @) - до 20 символов</small>
        </div>
        
        <div class="form-group">
            <label for="password">Пароль:</label>
            <input type="password" id="password" name="password" required minlength="4" maxlength="100">
        </div>
        
        <button type="submit" class="btn-primary">Зарегистрироваться</button>
    </form>
    
    <p class="auth-link">Уже есть аккаунт? <a href="{{ url_for('login') }}">Войти</a></p>
</div>
{% endblock %}