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

<div class="page-container page-body">
	<div class="page-action-bar">
    <label class="gf-form gf-form--grow gf-form--has-input-icon">
      <input type="text" class="gf-form-input max-width-30" placeholder="Find user by name/login/email" tabindex="1" give-focus="true" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getUsers()" />
      <i class="gf-form-input-icon fa fa-search"></i>
    </label>
    <div class="page-action-bar__spacer"></div>
    <a class="btn btn-primary" href="admin/users/create">
      New user
    </a>
  </div>

  <div class="admin-list-table">
    <table class="filter-table form-inline filter-table--hover">
      <thead>
        <tr>
          <th></th>
          <th>Login</th>
          <th>Email</th>
          <th>
            Seen
            <tip>Time since user was seen using Grafana</tip>
          </th>
          <th></th>
          <th style="width: 1%"></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="user in ctrl.users">
          <td class="width-4 text-center link-td">
            <a href="admin/users/edit/{{user.id}}">
              <img class="filter-table__avatar" ng-src="{{user.avatarUrl}}"></img>
            </a>
          </td>
          <td class="link-td">
            <a href="admin/users/edit/{{user.id}}">
              {{user.login}}
            </a>
          </td>
          <td class="link-td">
            <a href="admin/users/edit/{{user.id}}">
              {{user.email}}
            </a>
          </td>
          <td class="link-td">
            <a href="admin/users/edit/{{user.id}}">
              {{user.lastSeenAtAge}}
            </a>
          </td>
          <td class="link-td">
            <a href="admin/users/edit/{{user.id}}">
              <i class="fa fa-shield" ng-show="user.isAdmin" bs-tooltip="'Grafana Admin'"></i>
            </a>
          </td>
          <td class="text-right">
            <a ng-click="ctrl.deleteUser(user)" class="btn btn-danger btn-small">
              <i class="fa fa-remove"></i>
            </a>
          </td>
        </tr>
      </tbody>

    </table>
  </div>

  <div class="admin-list-paging" ng-if="ctrl.showPaging">
    <ol>
      <li ng-repeat="page in ctrl.pages">
        <button class="btn btn-small" ng-class="{'btn-secondary': page.current, 'btn-inverse': !page.current}" ng-click="ctrl.navigateToPage(page)">{{page.page}}</button>
      </li>
    </ol>
  </div>
</div>
