{% extends "layout.html" %}
{% block body %}
        {% include "notifications.html" %}
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          {% include "small_topbar.html" %}
          <ul class="breadcrumb" style="margin-bottom: 5px;">
            <li class="active">{{ _('User settings') }}</li>
          </ul>
          <br />
          <div id="user-panel-sessions" class="form-container">
            <legend id="sessions">{{ _('Sessions') }}</legend>
            <div class="table-responsive">
              <table class="table table-striped table-hover nowrap" id="table-sessions" width="100%">
                <thead>
                  <tr>
                    <th>{{ _('IP') }}</th>
                    <th>{{ _('Last seen') }}</th>
                    <th>{{ _('User-Agent') }}</th>
                    <th>{{ _('API Login') }}</th>
                    <th>{{ _('Current session') }}</th>
                    <th>{{ _('Expire') }}</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
          <div id="user-panel-prefs" class="form-container">
            <legend id="prefs">{{ _('Preferences') }}</legend>
            <form class="form-horizontal well" name="changePassword" ng-submit="submitChangePass($event)" method="POST" action="{{ url_for('api.auth_users', name=current_user.name) }}">
              <fieldset>
                <legend>{{ _('Password') }}</legend>
                <div class="form-group" ng-class="{'has-error': changePassword.oldPass.$invalid  && changePassword.oldPass.$dirty}">
                  <label for="oldPassword" class="col-lg-2 control-label">{{ _('Current password') }}</label>
                  <div class="col-lg-3">
                    <input class="form-control input-sm" name="oldPass" id="oldPassword" placeholder="{{ _('Current password') }}" type="password" ng-required="true" ng-model="user.oldPassword">
                  </div>
                  <span ng-show="changePassword.oldPass.$invalid  && changePassword.oldPass.$dirty" class="help-inline text-danger" ng-cloak>{{ _('Required') }}</span>
                </div>
                <div class="form-group" ng-class="{'has-error': changePassword.newPass.$invalid && changePassword.newPass.$dirty}">
                  <label for="inputPassword" class="col-lg-2 control-label">{{ _('New password') }}</label>
                  <div class="col-lg-3">
                    <input class="form-control input-sm" name="newPass" id="inputPassword" placeholder="{{ _('New password') }}" type="password" ng-required="true" ng-model="user.newPassword">
                  </div>
                  <span ng-show="changePassword.newPass.$invalid  && changePassword.newPass.$dirty" class="help-inline text-danger" ng-cloak>{{ _('Required') }}</span>
                </div>
                <div class="form-group" ng-class="{'has-warning': changePassword.confPass.$invalid  && changePassword.confPass.$dirty}">
                  <label for="confirmPassword" class="col-lg-2 control-label">{{ _('Confirm password') }}</label>
                  <div class="col-lg-3">
                    <input class="form-control input-sm" name="confPass" id="confirmPassword" placeholder="{{ _('New password (confirm)') }}" type="password" ng-required="true" ng-model="user.confPassword" compare-to="user.newPassword">
                  </div>
                  <span ng-show="changePassword.confPass.$invalid  && changePassword.confPass.$dirty" class="help-inline text-warning" ng-cloak>{{ _('Passwords mismatch') }}</span>
                </div>
                <div class="form-group">
                  <div class="col-lg-10 col-lg-offset-2">
                    <button type="submit" class="btn btn-primary" ng-disabled="changePassword.$invalid && changePassword.$dirty"><i class="fa fa-fw fa-floppy-o" aria-hidden="true"></i>{{ _('Save') }}</button>
                    <button type="reset" class="btn btn-default"><i class="fa fa-fw fa-undo" aria-hidden="true"></i>{{ _('Cancel') }}</button>
                  </div>
                </div>
              </fieldset>
            </form>
            <form class="form-horizontal well" name="changePrefs" ng-submit="submitChangePrefs($event)" method="POST" action="{{ url_for('api.prefs_ui') }}">
              <fieldset>
                <legend>{{ _('UI Settings') }}</legend>
                <div class="form-group">
                  <label for="pageItems" class="col-lg-2 control-label">{{ _('Items per page') }}</label>
                  <div class="col-lg-3">
                    <select class="form-control" name="pageLength" id="pageItems" ng-options="opt for (i, opt) in lengthMenu" ng-model="prefs.pageLength"></select>
                  </div>
                </div>
                <div class="form-group">
                  <label for="language" class="col-lg-2 control-label">{{ _('Language') }}</label>
                  <div class="col-lg-3">
                    <select class="form-control" name="language" id="language" ng-model="prefs.language">
                      {% raw %}
                      <option ng-cloak ng-repeat="lang in languages" value="{{lang.id}}">{{ lang.name }}</option>
                      {% endraw %}
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label for="dateFormat" class="col-lg-2 control-label">{{ _('Date format') }}</label>
                  <div class="col-lg-3">
                    <input class="form-control" name="dateFormat" id="dateFormat" type="text" ng-model="prefs.dateFormat" placeholder="{{ _('Defaults to \'llll\'') }}">
                  </div>
                  <span class="help-inline text-default">{{ _('See <a href="%(url)s">here</a> for available formats', url='http://momentjs.com/docs/#/displaying/') }}</span>
                </div>
                <div class="form-group">
                  <div class="col-lg-10 col-lg-offset-2">
                    <button type="submit" class="btn btn-primary"><i class="fa fa-fw fa-floppy-o" aria-hidden="true"></i>{{ _('Save') }}</button>
                    <button type="reset" class="btn btn-default"><i class="fa fa-fw fa-undo" aria-hidden="true"></i>{{ _('Cancel') }}</button>
                  </div>
                </div>
              </fieldset>
            </form>
            <div></div>
          </div>
          <div id="user-panel-acl" class="form-container">
            <legend id="acl">{{ _('Authorizations') }}</legend>
            <div id="acl-tree"></div>
          </div>
        </div>
        <div id="confirmation-modal" class="modal fade">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{ _('Confirmation') }}</h4>
              </div>
              <div class="modal-body">
                <div class="alert alert-warning">
                  <i class="fa fa-2x fa-fw fa-question-circle"></i>{{ _('You are about to revoke a session, are you sure?') }}
                  <pre><code class="JSON" id="session-details"></code></pre>
                </div>
                <div class="alert alert-danger" id="error-confirm" style="display:none;">
                  <strong><i class="fa fa-2x fa-fw fa-exclamation-circle"></i>&nbsp;{{ _('Warning!') }}</strong> {{ _('You are about to revoke your <strong>current</strong> session.') }}
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ _('Cancel') }}</button>
                <button type="button" class="btn btn-info" data-dismiss="modal" id="perform-revoke">{{ _('Confirm') }}</button>
              </div>
            </div>
          </div>
        </div>
{% endblock %}
