<div class="row">
    <div class="col-md-12">
        <h1><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Security</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-12">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            {{> securitymenu}}
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="overview">

                <p>&nbsp;</p>

                <form method="post" action="/account/security/password">
                    <input type="hidden" name="_csrf" value="{{csrfToken}}">

                    <fieldset>

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Change Password</h3>
                            </div>
                            <div class="panel-body">

                                <p>
                                    Change your account password here
                                </p>

                                <div class="form-group{{#if errors.existingPassword}} has-error{{/if}}">
                                    <label for="existingPassword">Current password</label>
                                    <input type="password" class="form-control" name="existingPassword" id="existingPassword" placeholder="eg. &quot;supersecret&quot;" autocomplete="off">
                                    {{#if errors.existingPassword}}
                                        <span class="help-block">{{errors.existingPassword}}</span>
                                    {{/if}}
                                </div>

                                <div class="form-group{{#if errors.password}} has-error{{/if}}">
                                    <label for="password">New password</label>
                                    <input type="password" class="form-control" name="password" id="password" placeholder="eg. &quot;supersecret&quot;" autocomplete="off">
                                    {{#if errors.password}}
                                        <span class="help-block">{{errors.password}}</span>
                                    {{/if}}
                                </div>

                                <div class="form-group{{#if errors.password}} has-error{{/if}}">
                                    <label for="password2">Repeat password</label>
                                    <input type="password" class="form-control" name="password2" id="password2" placeholder="repeat password" autocomplete="off">
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Change Password</button>
                                </div>

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