{{define "body"}}
<div class="jumbotron">
    <div class="container" style="text-align:center;">
        <h1 class="sans header">
            Settings
        </h1>
    </div>
</div>
<div class="container">
    <div class="col-md-3 sidebar">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="/">Dashboard</a>
            </li>
            <li><a href="/users">Users &amp; Groups</a>
            </li>
            <li><a href="/templates">Templates</a>
            </li>
            <li class="active"><a href="/settings">Settings</a>
            </li>
            <li><a href="/api/">API Documentation</a>
            </li>
        </ul>
    </div>
    <div class="col-md-9 sans">
        {{template "flashes" .Flashes}}
        <h1 style="margin:0px 0px 15px 0px;">User Settings</h1>
        <div class="row">
            <label for="api_key" class="col-sm-2 control-label form-label">API Key:</label>
            <div class="col-md-6">
                <input type="text" id="api_key" onclick="this.select();" value="{{%.User.ApiKey%}}" class="form-control" readonly/>
            </div>
            <form action="/api/reset" method="POST">
                <button class="btn btn-primary"><i class="fa fa-refresh" type="submit"></i> Reset</button>
                <input type="hidden" name="csrf_token" value={{%.Token%}}/>
            </form>
        </div>
        <br />
        <form action="/settings" method="POST">
            <div class="row">
                <label for="username" class="col-sm-2 control-label form-label">Username:</label>
                <div class="col-md-6">
                    <input type="text" id="username" value="{{%.User.Username%}}" class="form-control" />
                </div>
            </div>
            <br />
            <div class="row">
                <label for="current_password" class="col-sm-2 control-label form-label">Old Password:</label>
                <div class="col-md-6">
                    <input type="password" id="current_password" name="current_password" class="form-control" />
                </div>
            </div>
            <br />
            <div class="row">
                <label for="new_password" class="col-sm-2 control-label form-label">New Password:</label>
                <div class="col-md-6">
                    <input type="password" id="new_password" name="new_password" class="form-control" />
                </div>
            </div>
            <input type="hidden" name="csrf_token" value={{%.Token%}}/>
            <br />
            <button class="btn btn-primary" type="submit">Save</button>
        </form>
        <br/>
    </div>
</div>
{{end}}