{% extends 'account/_layout.html'|pjax:request %}
{% load i18n %}

{% block main_content %}
<div class="container">
    <div class="row">
        <div class="col-sm-3 profile-sidebar">
            <div class="panel panel-primary">
                <div class="panel-heading text-center">
                    <h1 class="panel-title">{{ item.username }}</h1>
                </div>
                <div class="avatar">
                    <img src="{{ item.avatar }}" class="max-width-100" />
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            {% comment %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title">{% trans "Details" %}</h1>
                </div>
                <div class="panel-body">
                    Details form
                </div>
            </div>
            {% endcomment %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title">{% trans "Change password" %}</h1>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="post">
                        {% csrf_token %}
                        {% for field in form_password %}
                        <div class="has-error text-right">
                            {% for error in field.errors %}
                                <span class="badge badge-danger">{{ error }}</span>
                            {% endfor %}
                        </div>
                        <div class="form-group {% if field.errors %}has-error has-feedback{% endif %}">
                            <label for="input_{{ field.name }}" class="col-sm-4 control-label">
                                {{ field.label }}
                            </label>
                            <div class="col-sm-8">
                                <input type="{{ field.field.widget.input_type }}"
                                       class="form-control"
                                       id="input_{{ field.name }}"
                                       name="{{ field.html_name }}">
                                   {% if field.errors %}
                                   <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                                   {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                        <div class="form-group">
                            <div class="col-sm-12 text-right">
                                <button type="submit"
                                        class="btn btn-primary">
                                        {% trans "Change" %}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}