<ng-container>
  <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>

  <h4 id="search" class="border-bottom pb-2">{{messagePrefix + '.search.head' | translate}}
    <button (click)="clearFormAndResetResult();"
            class="btn btn-primary float-right">{{messagePrefix + '.button.see-all' | translate}}</button>
  </h4>
  <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="row">
    <div class="col-12 col-sm-3">
      <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
        <option value="metadata">{{messagePrefix + '.search.scope.metadata' | translate}}</option>
        <option value="email">{{messagePrefix + '.search.scope.email' | translate}}</option>
      </select>
    </div>
    <div class="col-sm-9 col-12">
      <div class="form-group input-group">
        <input type="text" name="query" id="query" formControlName="query"
               class="form-control" aria-label="Search input">
        <span class="input-group-append">
            <button type="submit"
                    class="search-button btn btn-secondary">{{ messagePrefix + '.search.button' | translate }}</button>
        </span>
      </div>
    </div>
  </form>

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

    <div class="table-responsive">
      <table id="epersonsSearch" 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>
          <th>{{messagePrefix + '.table.edit' | translate}}</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let ePerson of (ePeopleSearch | async)?.payload?.page">
          <td>{{ePerson.id}}</td>
          <td><a (click)="ePersonDataService.startEditingNewEPerson(ePerson)"
                 [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">{{ePerson.name}}</a></td>
          <td>
            <div class="btn-group edit-field">
              <button *ngIf="(isMemberOfGroup(ePerson) | async)"
                      (click)="deleteMemberFromGroup(ePerson)"
                      class="btn btn-outline-danger btn-sm"
                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: {name: ePerson.name} }}">
                <i class="fas fa-trash-alt fa-fw"></i>
              </button>

              <button *ngIf="!(isMemberOfGroup(ePerson) | async)"
                      (click)="addMemberToGroup(ePerson)"
                      class="btn btn-outline-primary btn-sm"
                      title="{{messagePrefix + '.table.edit.buttons.add' | translate: {name: ePerson.name} }}">
                <i class="fas fa-plus fa-fw"></i>
              </button>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

  </ds-pagination>

  <div *ngIf="(ePeopleSearch | async)?.payload.totalElements == 0 && searchDone"
       class="alert alert-info w-100 mb-2"
       role="alert">
    {{messagePrefix + '.no-items' | translate}}
  </div>

  <h4>{{messagePrefix + '.headMembers' | translate}}</h4>

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

    <div class="table-responsive">
      <table id="ePeopleMembersOfGroup" 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>
          <th>{{messagePrefix + '.table.edit' | translate}}</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let ePerson of (ePeopleMembersOfGroup | async)?.payload?.page">
          <td>{{ePerson.id}}</td>
          <td><a (click)="ePersonDataService.startEditingNewEPerson(ePerson)"
                 [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">{{ePerson.name}}</a></td>
          <td>
            <div class="btn-group edit-field">
              <button (click)="deleteMemberFromGroup(ePerson)"
                      class="btn btn-outline-danger btn-sm"
                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: {name: ePerson.name} }}">
                <i class="fas fa-trash-alt fa-fw"></i>
              </button>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

  </ds-pagination>

  <div *ngIf="(ePeopleMembersOfGroup | async)?.payload.totalElements == 0" class="alert alert-info w-100 mb-2"
       role="alert">
    {{messagePrefix + '.no-members-yet' | translate}}
  </div>

</ng-container>
