{% extends 'base.html' %}

{% block content %}
<div class="row my-4">
    <div class="col-lg-7 col-xl-5 mx-auto">
        <div class="page-back-header">
            <a href="{{ url_for('index') }}" class="btn-back">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1>Смена пароля</h1>
        </div>

        <div class="data-card">
            <div class="auth-header" style="margin-bottom: 1.75rem;">
                <div class="auth-icon">
                    <i class="fas fa-key"></i>
                </div>
                <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0;">
                    Введите текущий пароль и придумайте новый
                </p>
            </div>

            <form method="POST" action="{{ url_for('change_password') }}">
                <div class="mb-3">
                    <label for="old_password" class="form-label">
                        Текущий пароль <span style="color: var(--error);">*</span>
                    </label>
                    <div class="input-icon-wrapper">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password"
                               class="form-control form-control-icon {% if errors.get('old_password') %}is-invalid{% endif %}"
                               id="old_password" name="old_password"
                               placeholder="Введите текущий пароль">
                    </div>
                    {% if errors.get('old_password') %}
                    <div class="invalid-feedback d-block">
                        {% for e in errors['old_password'] %}<div>{{ e }}</div>{% endfor %}
                    </div>
                    {% endif %}
                </div>

                <div class="mb-3">
                    <label for="new_password" class="form-label">
                        Новый пароль <span style="color: var(--error);">*</span>
                    </label>
                    <div class="input-icon-wrapper">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password"
                               class="form-control form-control-icon {% if errors.get('new_password') %}is-invalid{% endif %}"
                               id="new_password" name="new_password"
                               placeholder="Не менее 8 символов">
                    </div>
                    {% if errors.get('new_password') %}
                    <div class="invalid-feedback d-block">
                        {% for e in errors['new_password'] %}<div>{{ e }}</div>{% endfor %}
                    </div>
                    {% endif %}
                </div>

                <div class="mb-4">
                    <label for="confirm_password" class="form-label">
                        Повторите новый пароль <span style="color: var(--error);">*</span>
                    </label>
                    <div class="input-icon-wrapper">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password"
                               class="form-control form-control-icon {% if errors.get('confirm_password') %}is-invalid{% endif %}"
                               id="confirm_password" name="confirm_password"
                               placeholder="Повторите новый пароль">
                    </div>
                    {% if errors.get('confirm_password') %}
                    <div class="invalid-feedback d-block">
                        {% for e in errors['confirm_password'] %}<div>{{ e }}</div>{% endfor %}
                    </div>
                    {% endif %}
                </div>

                <div class="d-flex" style="gap: 0.75rem;">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Сменить пароль
                    </button>
                    <a href="{{ url_for('index') }}" class="btn btn-outline">
                        <i class="fas fa-times"></i> Отмена
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}