{% extends "authentication/_base.html" %}

{% load i18n %}
{% load widget_tweaks %}

{% block heading %}
    {% trans 'Reset password' %}
{% endblock %}

{% block content %}
    <form method="post" class="flex flex-col">
        {% csrf_token %}
        {% if form.errors %}
        <div class="bg-red-100 border-l-4 border-red-500 text-red-500 px-4 py-3 -mt-2 mb-5 password_reset_errors" role="alert">
            <p>
                {{ form.new_password1.errors }}
                {{ form.new_password2.errors }}
            </p>
        </div>
        {% endif %}
        <div class="mb-4">
            <label class="block text-gray-600 font-bold mb-2" for="{{ form.new_password1.id_for_label }}">
                {{ form.new_password1.label }}
            </label>
            {% trans 'Password' as new_password1_placeholder %}
            {% render_field form.new_password1|add_error_class:"border-red-500" placeholder=new_password1_placeholder class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-600 leading-tight focus:shadow-outline" %}
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 font-bold mb-2" for="{{ form.new_password2.id_for_label }}">
                {{ form.new_password2.label }}
            </label>
            {% trans 'Repeat password' as new_password2_placeholder %}
            {% render_field form.new_password2|add_error_class:"border-red-500" placeholder=new_password2_placeholder class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-600 leading-tight focus:shadow-outline" %}
        </div>
        <button class="btn">
            {% trans 'Set new password' %}
        </button>
        <div class="text-right mt-4">
            <a href="{% url 'public:login' %}" class="text-gray-600 hover:text-gray-200 hover:bg-gray-600 rounded py-2 px-3 font-bold">
                <i data-feather="arrow-left-circle" class="align-top"></i> {% trans 'Back to log in' %}
            </a>
        </div>
    </form>
{% endblock %}
