{% extends 'base.html' %}

{% block title %}Вход{% endblock %}

{% block content %}
<!-- Контейнер для сообщений об ошибках - фиксированное место -->
<!-- ВАЖНО: На главной странице (регистрация/вход) показываем только ошибки -->
<div id="messages-container" style="min-height: 60px;">
    {% if messages %}
        {% for message in messages %}
            {% if 'danger' in message.tags or 'error' in message.tags %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endif %}
        {% endfor %}
    {% endif %}
</div>

<h2 class="text-center mb-4">Добро пожаловать</h2>

<!-- Содержимое вкладок -->
<div class="tab-content">
    <!-- Вкладка входа -->
    <div class="tab-pane fade show active" id="login">
        <form method="post">
            {% csrf_token %}
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" name="email" required>
            </div>
            {% include 'accounts/password_input.html' with field_name='password' field_label='Пароль' required=True %}
            <button type="submit" class="btn btn-primary w-100">Войти</button>
            
            <!-- Ссылка "Забыли пароль?" -->
            <div class="text-center mt-3">
                <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#passwordResetModal">Забыли пароль?</a>
            </div>
        </form>
    </div>
</div>

<!-- Модальное окно для восстановления пароля -->
<div class="modal fade" id="passwordResetModal" tabindex="-1" aria-labelledby="passwordResetModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="passwordResetModalLabel">Восстановление пароля</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                <form id="passwordResetForm" method="post" action="{% url 'accounts:password_reset' %}">
                    {% csrf_token %}
                    <p>Пожалуйста, введите ваш email, и мы отправим вам инструкции по восстановлению пароля.</p>
                    <div class="mb-3">
                        <label for="resetEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="resetEmail" name="email" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="submit" class="btn btn-primary" form="passwordResetForm">Отправить</button>
            </div>
        </div>
    </div>
</div>

<script>
// Управление вкладками
document.addEventListener('DOMContentLoaded', function() {
    // Добавляем обработчик для показа/скрытия пароля
    document.querySelectorAll('.show-password-btn').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const targetInput = document.getElementById(targetId);
            const icon = this.querySelector('i');
            
            if (targetInput.type === 'password') {
                targetInput.type = 'text';
                icon.classList.remove('bi-eye');
                icon.classList.add('bi-eye-slash');
            } else {
                targetInput.type = 'password';
                icon.classList.remove('bi-eye-slash');
                icon.classList.add('bi-eye');
            }
        });
    });
});
</script>
{% endblock %}