<page-header model="navModel"></page-header>

<div class="page-container page-body">
  <h3 class="page-sub-heading">Edit User</h3>

  <form name="userForm" class="gf-form-group">
    <div class="gf-form">
      <span class="gf-form-label width-10">Name</span>
      <input type="text" required ng-model="user.name" class="gf-form-input max-width-25" />
    </div>
    <div class="gf-form">
      <span class="gf-form-label width-10">Email</span>
      <input type="email" ng-model="user.email" class="gf-form-input max-width-25" />
    </div>
    <div class="gf-form">
      <span class="gf-form-label width-10">Username</span>
      <input type="text" ng-model="user.login" class="gf-form-input max-width-25" />
    </div>

    <div class="gf-form-button-row">
      <button type="submit" class="btn btn-primary" ng-click="update()" ng-show="!createMode">Update</button>
    </div>
  </form>

  <h3 class="page-heading">Change password</h3>

  <form name="passwordForm" class="gf-form-group">
    <div class="gf-form">
      <span class="gf-form-label width-10">New password</span>
      <input type="password" required ng-minlength="4" ng-model="password" class="gf-form-input max-width-25" />
    </div>

    <div class="gf-form-button-row">
      <button type="submit" class="btn btn-primary" ng-click="setPassword()">Update</button>
    </div>
  </form>

  <h3 class="page-heading">Permissions</h3>

  <form name="passwordForm" class="gf-form-group">
    <div class="gf-form">
      <gf-form-switch
        class="gf-form"
        label="Grafana Admin"
        checked="permissions.isGrafanaAdmin"
        switch-class="max-width-6"
        on-change="updatePermissions()"
      ></gf-form-switch>
    </div>
  </form>

  <h3 class="page-heading">Organizations</h3>

  <form name="addOrgForm" class="gf-form-group">
    <div class="gf-form-inline">
      <div class="gf-form">
        <span class="gf-form-label">Add</span>
        <input
          type="text"
          ng-model="newOrg.name"
          bs-typeahead="searchOrgs"
          required
          class="gf-form-input max-width-20"
          placeholder="organization name"
        />
      </div>
      <div class="gf-form">
        <span class="gf-form-label">Role</span>
        <span class="gf-form-select-wrapper">
          <select
            type="text"
            ng-model="newOrg.role"
            class="gf-form-input width-10"
            ng-options="f for f in ['Viewer', 'Editor', 'Admin']"
          ></select>
        </span>
      </div>
      <div class="gf-form">
        <button class="btn btn-primary gf-form-btn" ng-click="addOrgUser()">Add</button>
      </div>
    </div>
  </form>

  <div class="gf-form-group">
    <table class="filter-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Role</th>
          <th></th>
        </tr>
      </thead>
      <tr ng-repeat="org in orgs">
        <td>{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span></td>
        <td>
          <div class="gf-form">
            <span class="gf-form-select-wrapper">
              <select
                type="text"
                ng-model="org.role"
                class="gf-form-input max-width-12"
                ng-options="f for f in ['Viewer', 'Editor', 'Admin']"
                ng-change="updateOrgUser(org)"
              >
              </select>
            </span>
          </div>
        </td>
        <td style="width: 1%">
          <a ng-click="removeOrgUser(org)" class="btn btn-danger btn-small">
            <i class="fa fa-remove"></i>
          </a>
        </td>
      </tr>
    </table>
  </div>

  <h3 class="page-heading">Sessions</h3>

  <div class="gf-form-group">
    <div class="gf-form">
      <table class="filter-table form-inline">
        <thead>
          <tr>
            <th>Last seen</th>
            <th>Logged on</th>
            <th>IP address</th>
            <th>Browser &amp; OS</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="session in sessions">
            <td ng-if="session.isActive">Now</td>
            <td ng-if="!session.isActive">{{session.seenAt}}</td>
            <td>{{session.createdAt}}</td>
            <td>{{session.clientIp}}</td>
            <td>{{session.browser}} on {{session.os}} {{session.osVersion}}</td>
            <td>
              <button class="btn btn-danger btn-small" ng-click="revokeUserSession(session.id)">
                <i class="fa fa-power-off"></i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="gf-form-button-row">
      <button ng-if="sessions.length" class="btn btn-danger" ng-click="revokeAllUserSessions()">
        Logout user from all devices
      </button>
    </div>
  </div>


  <h3 class="page-heading">User status</h3>

  <div class="gf-form-group">
    <div class="gf-form-button-row">
      <button
        type="submit"
        class="btn btn-danger"
        ng-if="!user.isDisabled"
        ng-click="disableUser($event)"
        bs-tooltip="user.isExternal ? 'External user cannot be enabled or disabled' : ''"
        ng-class="{'disabled': user.isExternal}"
      >
        Disable
      </button>
      <button
        type="submit"
        class="btn btn-primary"
        ng-if="user.isDisabled"
        ng-click="disableUser($event)"
        bs-tooltip="user.isExternal ? 'External user cannot be enabled or disabled' : ''"
        ng-class="{'disabled': user.isExternal}"
      >
        Enable
      </button>
      <button type="submit" class="btn btn-danger" ng-click="deleteUser(user)" ng-show="!createMode">Delete User</button>
    </div>
  </div>
</div>
