<div class="mt-3" @fadeInOut>
  @if (isListOfEPerson) {
    <ds-eperson-search-box (search)="onSearch($event)"></ds-eperson-search-box>
  } @else {
    <ds-group-search-box (search)="onSearch($event)"></ds-group-search-box>
  }

  @let list = (list$ | async);
  @if (list && list.totalElements > 0) {
    <ds-pagination
      [paginationOptions]="paginationOptions"
      [collectionSize]="list.totalElements"
      [retainScrollPosition]="true"
      [hideGear]="true">
      <div class="table-responsive">
        <table id="groups" class="table table-sm table-striped table-hover table-bordered">
          <thead>
            <tr class="text-center">
              <th>{{'resource-policies.form.eperson-group-list.table.headers.id' | translate}}</th>
              <th>{{'resource-policies.form.eperson-group-list.table.headers.name' | translate}}</th>
              <th>{{'resource-policies.form.eperson-group-list.table.headers.action' | translate}}</th>
            </tr>
          </thead>
          <tbody>
            @for (entry of list.page; track entry) {
              <tr [class.table-primary]="(entrySelectedId$ | async) === entry.id">
                <td>{{ entry.id }}</td>
                <td>{{ dsoNameService.getName(entry) }}</td>
                <td class="text-center">
                  <button class="btn btn-sm btn-outline-primary" (click)="emitSelect(entry)">
                    {{'resource-policies.form.eperson-group-list.select.btn' | translate}}
                  </button>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </ds-pagination>
  }
</div>
