{% extends '_layouts/base.html' %}
{% load static %}

{% block title %}Новый пароль{% endblock %}

{% block add_css %}
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
{% endblock %}

{% block content %}
    <div class="auth-page">
        {% include "_fragments/header.html" %}
        <main class="auth-section">
            <div class="container auth-layout">
                <section class="auth-intro auth-intro--reset">
                    <p class="auth-kicker">Обновление пароля</p>
                    <h1 class="auth-title">Придумайте новый пароль</h1>
                    <p class="auth-description">
                        Используйте надёжный пароль, который вы ещё не применяли для этого аккаунта.
                    </p>
                </section>
                <section class="auth-panel">
                    {% if validlink %}
                        <form class="auth-form" method="post">
                            {% csrf_token %}
                            {% if form.non_field_errors %}
                                <div class="auth-alert auth-alert--error">
                                    {% for error in form.non_field_errors %}
                                        <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}

                            <div class="auth-field">
                                <label for="{{ form.new_password1.id_for_label }}">Новый пароль</label>
                                <input
                                    id="{{ form.new_password1.id_for_label }}"
                                    name="{{ form.new_password1.html_name }}"
                                    type="password"
                                    placeholder="Введите новый пароль"
                                    autocomplete="new-password"
                                >
                                {% for error in form.new_password1.errors %}
                                    <p class="auth-field-error">{{ error }}</p>
                                {% endfor %}
                            </div>

                            <div class="auth-field">
                                <label for="{{ form.new_password2.id_for_label }}">Подтверждение пароля</label>
                                <input
                                    id="{{ form.new_password2.id_for_label }}"
                                    name="{{ form.new_password2.html_name }}"
                                    type="password"
                                    placeholder="Повторите пароль"
                                    autocomplete="new-password"
                                >
                                {% for error in form.new_password2.errors %}
                                    <p class="auth-field-error">{{ error }}</p>
                                {% endfor %}
                            </div>

                            <div class="auth-actions">
                                <button class="auth-submit" type="submit">Сохранить пароль</button>
                            </div>
                        </form>
                    {% else %}
                        <div class="auth-copy-block">
                            <h2 class="auth-panel-title">Ссылка недействительна</h2>
                            <p class="auth-panel-text">Возможно, ссылка уже использована или срок её действия истёк. Запросите сброс пароля повторно.</p>
                            <a class="auth-secondary-link" href="{% url 'users:password_reset' %}">Запросить новое письмо</a>
                        </div>
                    {% endif %}
                </section>
            </div>
        </main>
        {% include "_fragments/footer.html" %}
    </div>
{% endblock %}