{% extends 'bookmarks/layout.html' %}
{% load widget_tweaks %}

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

{% block content %}

    <div class="auth-page">
        <div class="columns">
            <section class="content-area column col-5 col-md-12">
                <div class="content-area-header">
                    <h2>Change Password</h2>
                </div>
                <form method="post" action="{% url 'change_password' %}">
                    {% csrf_token %}
                    <div class="form-group {% if form.old_password.errors %}has-error{% endif %}">
                        <label class="form-label" for="{{ form.old_password.id_for_label }}">Old password</label>
                        {{ form.old_password|add_class:'form-input'|attr:"placeholder: " }}
                        {% if form.old_password.errors %}
                            <div class="form-input-hint">
                                {{ form.old_password.errors }}
                            </div>
                        {% endif %}
                    </div>
                    <div class="form-group {% if form.new_password1.errors %}has-error{% endif %}">
                        <label class="form-label" for="{{ form.new_password1.id_for_label }}">New password</label>
                        {{ form.new_password1|add_class:'form-input'|attr:"placeholder: " }}
                        {% if form.new_password1.errors %}
                            <div class="form-input-hint">
                                {{ form.new_password1.errors }}
                            </div>
                        {% endif %}
                    </div>
                    <div class="form-group {% if form.new_password2.errors %}has-error{% endif %}">
                        <label class="form-label" for="{{ form.new_password2.id_for_label }}">Confirm new password</label>
                        {{ form.new_password2|add_class:'form-input'|attr:"placeholder: " }}
                        {% if form.new_password2.errors %}
                            <div class="form-input-hint">
                                {{ form.new_password2.errors }}
                            </div>
                        {% endif %}
                    </div>

                    <br/>
                    <div class="columns">
                        <div class="column col-3">
                            <input type="submit" value="Change Password" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>

{% endblock %}