{% extends "layout.html" %}
{% block title %}Edit Profile :: {{ config.SITE_NAME }}{% endblock %}
{% block body %}
{% from "_formhelpers.html" import render_field %}

<h1>Edit Profile</h1>

<ul class="nav nav-tabs" id="profileTabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#password-change" id="password-change-tab" role="tab" data-toggle="tab" aria-controls="profile" aria-expanded="true">Password</a>
    </li>
    <li role="presentation">
        <a href="#email-change" id="email-change-tab" role="tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">Email</a>
    </li>
    <li role="presentation">
        <a href="#general-info" id="general-info-tab" role="tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">My Info</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade active in" role="tabpanel" id="password-change" aria-labelledby="password-change-tab">
        <form method="POST">
            {{ form.csrf_token }}
            <div class="row">
                <div class="form-group col-md-4">
                    {{ render_field(form.current_password, class_='form-control', placeholder='Current password') }}
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    {{ render_field(form.new_password, class_='form-control', placeholder='New password') }}
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    {{ render_field(form.password_confirm, class_='form-control', placeholder='New password (confirm)') }}
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-4">
                    <input type="submit" value="Update" class="btn btn-primary">
                </div>
            </div>
        </form>
    </div>
    <div class="tab-pane fade" role="tabpanel" id="email-change" aria-labelledby="email-change-tab">
        <form method="POST">
            {{ form.csrf_token }}
            <div class="row">
                <div class="form-group col-md-4">
                    <label class="control-label" for="current_email">Current Email</label>
                    <div>{{email}}</div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    {{ render_field(form.email, class_='form-control', placeholder='New email address') }}
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    {{ render_field(form.current_password, class_='form-control', placeholder='Current password') }}
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-4">
                    <input type="submit" value="Update" class="btn btn-primary">
                </div>
            </div>
        </form>
    </div>
    <div class="tab-pane fade" role="tabpanel" id="general-info" aria-labelledby="general-info-tab">
        <dl class="dl-horizontal">
        <dt>User ID:</dt>
        <dd>{{g.user.id}}</dd>
        <dt>Account created on:</dt>
        <dd>{{g.user.created_time}}</dd>
        <dt>User class:</dt>
        <dd>{{level}}</dd><br>
    </dl>
    </div>
</div>

{% endblock %}