{% extends 'wrapper.html' %}
{% load static %}

{% block content %}
<div class="auth-container">
    <div class="auth-card" data-aos="fade-up">
        <div class="auth-header">
            <a href="{% url 'index' %}" class="logo">
                <img src="{% static 'img/logo.png' %}" alt="deev.space" style="max-width: 130px; height: auto;">
            </a>
            <h1 class="auth-title">Вход в аккаунт</h1>
            <p class="auth-subtitle">Войдите, чтобы оставлять комментарии и оценивать статьи</p>
        </div>
        
        <form method="post" class="auth-form">
            {% csrf_token %}
            
            {% if form.non_field_errors %}
            <div class="auth-error">
                <i class="fas fa-exclamation-circle"></i>
                {{ form.non_field_errors.0 }}
            </div>
            {% endif %}
            
            <div class="form-group">
                <label for="id_username" class="form-label">
                    <i class="fas fa-user"></i>
                    Имя пользователя
                </label>
                {{ form.username }}
                {% if form.username.errors %}
                <span class="form-error">{{ form.username.errors.0 }}</span>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="id_password" class="form-label">
                    <i class="fas fa-lock"></i>
                    Пароль
                </label>
                <div class="password-input-wrapper">
                    {{ form.password }}
                    <button type="button" class="password-toggle" onclick="togglePasswordVisibility('id_password', this)" aria-label="Показать пароль">
                        <i class="far fa-eye"></i>
                    </button>
                </div>
                {% if form.password.errors %}
                <span class="form-error">{{ form.password.errors.0 }}</span>
                {% endif %}
            </div>
            
            <div class="form-group form-checkbox">
                {{ form.remember_me }}
                <label for="id_remember_me">Запомнить меня</label>
            </div>
            
            <button type="submit" class="btn btn-primary btn-lg btn-full">
                <i class="fas fa-sign-in-alt"></i>
                Войти
            </button>
        </form>
        
        <div class="auth-footer">
            <p>Нет аккаунта? <a href="{% url 'register' %}{% if request.GET.next %}?next={{ request.GET.next }}{% endif %}">Зарегистрируйтесь</a></p>
        </div>
    </div>
</div>
{% endblock %}