{% extends "base.html" %}
{% load tailwind_forms %}
{% load i18n %}

{% block title %}Change Password · {{ site_title }}{% endblock %}

{% block content %}


<div class="flex items-center justify-center">

    <div class="m-4 max-w-4xl flex-auto">
        <form action="." method="post">
        {% csrf_token %}

        {% if messages %}
        <ul>
            {% for message in messages %}
                {# if we introduce different levels we can use{% message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %} #}
                <li class="bg-cyan-50 dark:bg-cyan-900 border-2 border-cyan-800 dark:border-cyan-400 p-4 rounded-lg">{{ message }}</li>
            {% endfor %}
        </ul>
        {% endif %}

        <div>
            <h1 class="text-4xl my-4 font-bold">{% translate "Change password" %}</h1>
        </div>

        {% tailwind_formfield form.old_password %}
        {% tailwind_formfield form.new_password1 %}
        {% tailwind_formfield form.new_password2 %}

        <button class="font-bold text-slate-800 dark:text-slate-100 border-slate-500 dark:border-slate-400 pl-4 pr-4 pb-2 pt-2 border-2 bg-cyan-200 dark:bg-cyan-700 hover:bg-cyan-400 dark:hover:bg-cyan-600 active:ring-3 rounded-md">{% translate "Change password" %}</button>
        <a href="{% url 'preferences' %}" class="text-cyan-500 dark:text-cyan-300 font-bold ml-2">{% translate "Cancel" %}</a>
        </form>

    </div>
</div>

{% endblock %}