{% extends "base.html" %}

{% block content %}
    <div class="container">
        <div class="row h-100 mx-auto align-items-center">
            <div class="col-sm mx-auto" style="flex-wrap: nowrap">
                <form id="form1" name="form1" method="post" action="update_password">
                    {{ form.hidden_tag() }}
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="usr">Username:</span>
                        </div>
                        <input type="text" class="form-control" aria-label="username" name="username"
                               placeholder="username" value="{{ user }}" aria-describedby="usr" readonly>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">Old Password:</span>
                        </div>
                        <input type="password" class="form-control" name="old_password" aria-label="password"
                               aria-describedby="basic-addon1">
                        {% for error in form.old_password.errors %}
                            <div class="text-danger">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon2">New Password:</span>
                        </div>
                        <input type="password" class="form-control" name="new_password" aria-label="new_password"
                               aria-describedby="basic-addon2">
                        {% for error in form.new_password.errors %}
                            <div class="text-danger">{{ error }}</div>
                        {% endfor %}
                    </div>
                    <button class="btn btn-secondary btn-lg btn-block" form="form1" type="submit">
                        Update User
                    </button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}