{% extends "base.html" %}
{% block content %}
<style>
    .max-500 {
        max-width: 500px;
    }
    .hint-box {
        background-color: rgb(223, 223, 223);
        border: 1px solid black;
        border-radius: 15px;
        padding: 1em;
        margin: 0em 5em;
    }
    @media (max-width: 873px) {
        .hint-box {
            display: none;
        }
    }
</style>
<div class="srf-container" style="max-height: 280px;">
    <div class="srf-flex flex-row align-items-center justify-content-between srf-padding">
      <span class="srf-display-1 text-uppercase">Change Password</span><br><br>
    </div>
        <div id="app">
            <v-app id="change_password" v-cloak>
                <div style="width: 100%; display: flex; align-items: center; ">
                <v-form class="max-500" ref="form" method="POST">
                    {% csrf_token %}
                    {% for field in form %}
                        {{field.label_tag}}
                        {{ field }}
                        {% if field.errors %}
                        {{ field.errors }}
                        {% endif %}
                    {% endfor %}
                    {{form.non_field_errors}}

                    <v-btn type="submit">Submit</v-btn>
                </v-form>
                <div class="hint-box">
                    <strong>Help</strong>
                    <small>
                        {% for field in form %}
                            {{ field.help_text | safe }}
                        {% endfor %}
                    </small>
                </div>
            </div>
            </v-app>
        </div>
    </div>
</div>
{% endblock %}
{% block localjavascript %}
<script>
'use strict';

var vm = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
        old_password: '',
        new_password1: '',
        new_password2: '',
    },
    methods: {
        clear: function() {
        console.log('clear');
        this.old_password = '';
        this.new_password1 = '';
        this.new_password2 = '';
        },
    },
    mounted: function() {
        console.log('mounted');
    }
})
</script>
{% endblock %}