{% extends "base.html" %}

{% block title %}Вход в систему{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">🔐 Авторизация</h4>
            </div>
            <div class="card-body p-4">
                <form method="POST" id="loginForm" novalidate>
                    <div class="mb-3">
                        <label for="{{LOGIN_FIELD_ID}}" class="form-label fw-semibold">{{LOGIN_FIELD_LABEL}}</label>
                        <input type="{{LOGIN_FIELD_TYPE}}" class="form-control" id="{{LOGIN_FIELD_ID}}" name="{{LOGIN_FIELD_ID}}"
                               placeholder="{{LOGIN_FIELD_PLACEHOLDER}}" required autocomplete="{{LOGIN_FIELD_AUTOCOMPLETE}}">
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label fw-semibold">Пароль</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="password" name="password"
                                   placeholder="Введите пароль" required autocomplete="current-password">
                            <button class="btn btn-outline-secondary" type="button" id="togglePassword"
                                    aria-label="Показать/скрыть пароль">
                                <span id="eyeIcon">👁</span>
                            </button>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100 py-2">Войти</button>
                </form>
                <hr>
                <div class="text-center">
                    <a href="{{ url_for('register') }}" class="text-decoration-none">
                        Ещё нет аккаунта? <strong>Зарегистрироваться</strong>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Показать/скрыть пароль
document.getElementById('togglePassword').addEventListener('click', function() {
    const pw = document.getElementById('password');
    const icon = document.getElementById('eyeIcon');
    if (pw.type === 'password') {
        pw.type = 'text';
        icon.textContent = '🙈';
    } else {
        pw.type = 'password';
        icon.textContent = '👁';
    }
});
</script>
{% endblock %}