{% load static %}

<link rel="stylesheet" href="{% static 'css/index.css' %}" type="text/css">

<head>
    <meta charset="UTF-8">
    <title>Change Password</title>
</head>

<div class="page-wrap gradient-primary">
    <div class="container">
        <div class="panel">
            <h2 class="h3">Change your password</h2>
            {{ updated }}
            <form method="post">
                {% csrf_token %}
                <div class="form-group">

                    <label for="old_password">{{ form.old_password.label_tag }}</label>
                    <input autofocus="off" class="form-control" id="old_password" name="old_password"
                           :placeholder="Old Password" type="password" style="padding-left: 20px;">
                    <div class="error">{{ form.old_password.errors }}</div>

                </div>

                <div class="form-group">

                    <label for="new_password1">{{ form.new_password1.label_tag }}</label>
                    <input autofocus="off" class="form-control" id="new_password1" name="new_password1"
                           :placeholder="New Password" type="password" style="padding-left: 20px;">
                    <div class="error">{{ form.new_password1.errors }}</div>
                    {% if form.new_password1.help_text %}
                        <div class="help">{{ form.new_password1.help_text|safe }}</div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="new_password2">{{ form.new_password2.label_tag }}</label>
                    <input autofocus="off" class="form-control" id="new_password2" name="new_password2"
                           :placeholder="Confirm New Password" type="password" style="padding-left: 20px;">
                    <div class="error">{{ form.new_password2.errors }}</div>
                    {% if form.new_password2.help_text %}
                    <div class="help">{{ form.new_password2.help_text|safe }}</div>
                    {% endif %}
                </div>

                <button class="btn btn-primary btn-lg btn-block" name="commit" type="submit">Submit</button>

            </form>
        </div>
    </div>
</div>
