<div>
  <div class="columns is-centered is-narrow m-3">
      <div class="field has-addons">
        <div class="control">
          <input #searchString class="input same-size" type="text" placeholder="Search by Name or Email">
        </div>
        <div class="control">
          <a class="button is-info same-size" (click)="searchBarActivate(searchString.value)">
            Submit
          </a>
        </div>
      </div>
  </div>
  <div class="columns is-centered is-narrow m-3">
    <table class="table is-bordered is-striped is-narrow is-hoverable has-text-centered	">
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Website</th>
        <th>Institution</th>
        <th>Role</th>
      </tr>
      <tr *ngFor="let user of usersToDisplay" class="{{(user.role === 'Admin') ? 'is-selected' : ''}}">
        <td>{{ user.displayName }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.website }}</td>
        <td>{{ user.institution }}</td>
        <td>{{user.role}}</td>
        <pluma-online-assign-role [(usersToDisplayFromParent)]="usersToDisplay" [user]="user"></pluma-online-assign-role>
        <pluma-online-delete-account [(skipFromParent)]="skip" [(usersToDisplayFromParent)]="usersToDisplay" [user]="user"></pluma-online-delete-account>
        <pluma-online-deactivate-activate  [(usersToDisplayFromParent)]="usersToDisplay" [user]="user"></pluma-online-deactivate-activate>
        <pluma-online-force-password-reset [(usersToDisplayFromParent)]="usersToDisplay" [user]="user"></pluma-online-force-password-reset>
      </tr>
    </table>
  </div>
  <div class="columns is-centered m-3">
    <button *ngIf="canItPrevious" class="button is-small {{loading ? 'is-loading': ''}}" (click)="fetchUsers(false)"> Previous {{numberOfDisplayedUsers}}</button>
    <button class="button is-small {{loading ? 'is-loading': ''}}" (click)="fetchUsers(true)">Next {{numberOfDisplayedUsers}}</button>
  </div>
</div>
