<div *ngIf="epersonService.getActiveEPerson() | async; then editheader; else createHeader"></div>

<ng-template #createHeader>
  <h4>{{messagePrefix + '.create' | translate}}</h4>
</ng-template>

<ng-template #editheader>
  <h4>{{messagePrefix + '.edit' | translate}}</h4>
</ng-template>

<ds-form [formId]="formId"
         [formModel]="formModel"
         [formGroup]="formGroup"
         [formLayout]="formLayout"
         (cancel)="onCancel()"
         (submitForm)="onSubmit()">
  <button class="btn btn-light" [disabled]="!(canReset$ | async)">
    <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
  </button>
  <button class="btn btn-light" [disabled]="!(canDelete$ | async)">
    <i class="fa fa-trash"></i> {{'admin.access-control.epeople.actions.delete' | translate}}
  </button>
  <button *ngIf="!isImpersonated" class="btn btn-light" [ngClass]="{'d-none' : !(canImpersonate$ | async)}" (click)="impersonate()">
    <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
  </button>
  <button *ngIf="isImpersonated" class="btn btn-light" (click)="stopImpersonating()">
    <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.stop-impersonating' | translate}}
  </button>
</ds-form>

<div *ngIf="epersonService.getActiveEPerson() | async">
  <h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5>

  <ds-pagination
    *ngIf="(groups | async)?.payload?.totalElements > 0"
    [paginationOptions]="config"
    [pageInfoState]="(groups | async)?.payload"
    [collectionSize]="(groups | async)?.payload?.totalElements"
    [hideGear]="true"
    [hidePagerWhenSinglePage]="true"
    (pageChange)="onPageChange($event)">

    <div class="table-responsive">
      <table id="groups" class="table table-striped table-hover table-bordered">
        <thead>
        <tr>
          <th scope="col">{{messagePrefix + '.table.id' | translate}}</th>
          <th scope="col">{{messagePrefix + '.table.name' | translate}}</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let group of (groups | async)?.payload?.page">
          <td>{{group.id}}</td>
          <td><a (click)="groupsDataService.startEditingNewGroup(group)"
                 [routerLink]="[groupsDataService.getGroupEditPageRouterLink(group)]">{{group.name}}</a></td>
        </tr>
        </tbody>
      </table>
    </div>

  </ds-pagination>

  <div *ngIf="(groups | async)?.payload?.totalElements == 0" class="alert alert-info w-100 mb-2" role="alert">
    <div>{{messagePrefix + '.memberOfNoGroups' | translate}}</div>
    <div>
      <button [routerLink]="[groupsDataService.getGroupRegistryRouterLink()]"
              class="btn btn-primary">{{messagePrefix + '.goToGroups' | translate}}</button>
    </div>
  </div>
</div>
