{% extends "base.html" %}

{% block content %}
<div class="section is-medium">
    <div class="container">
        <div class="column is-4 is-offset-4">
            <div class="box has-text-centered">
                <h3 class="title">{{ gettext("Set new password") }}</h3>
                {% for field_name, field_errors in form.errors|dictsort if field_errors %}
                {% for error in field_errors %}
                <div class="notification is-danger">{{ error }}</div>
                {% endfor %}
                {% endfor %}
                <form method="POST">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="field">
                        <div class="control has-icons-left has-icons-right">
                            {{ form.password(class_="input is-large", placeholder=gettext("Password")) }}
                            <span class="icon is-small is-left">
                                {{ "key"|icon }}
                            </span>
                            <span id="eye" class="icon is-small is-right is-clickable" onclick="togglePasswordVisibility(this)">
                                {{ "eye"|icon }}
                            </span>
                            <span id="eye-slashed" class="icon is-small is-right is-clickable is-hidden" onclick="togglePasswordVisibility(this)">
                                {{ "eye-slashed"|icon }}
                            </span>
                        </div>
                    </div>
                    <div class="field">
                        <div class="control has-icons-left">
                            {{ form.repeat_password(class_="input is-large", placeholder=gettext("Repeat Password")) }}
                            <span class="icon is-small is-left">
                                {{ "key"|icon }}
                            </span>
                        </div>
                    </div>
                    <button class="button is-block is-primary is-large is-fullwidth">{{ gettext("Reset password") }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}