<div *ngIf="object" layoutDirection="column" layoutDirection-xs="column" class="fl-content fl-content-min-height">
  <p class="fl-detail" i18n>Permissions: {{ object.permissions ? customTxt : defaultTxt }}</p>
  <p class="fl-detail" i18n>Description: {{ object.description | nullValue }}</p>
  <p class="fl-detail" i18n>Number of users in this group: {{ object.users_count }}</p>
  <table *ngIf="users" class="full-width" mat-table [dataSource]="users">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef i18n>ID</th>
      <td class="position-relative" mat-cell *matCellDef="let user">
        <a [routerLink]="[config.getPanelUrl('clients-users/users'), user.id]">
          {{user.id}}
        </a>
      </td>
    </ng-container>
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef i18n>Email</th>
      <td mat-cell *matCellDef="let user">
        <a [routerLink]="[config.getPanelUrl('clients-users/users'), user.id]">
          {{user.email}}
        </a>
      </td>
    </ng-container>
    <ng-container matColumnDef="full_name">
      <th mat-header-cell *matHeaderCellDef i18n>Full name</th>
      <td mat-cell *matCellDef="let user">
        <a [routerLink]="[config.getPanelUrl('clients-users/users'), user.id]">
          {{user.full_name }}
        </a>
      </td>
    </ng-container>
    <ng-container matColumnDef="(actions)">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let user">
        <div class="fl-margin-right">
          <app-object-actions [objectActions]="userActions[user.id]" [maxVisibleActions]="2">
          </app-object-actions>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <div *ngIf="previousPage || nextPage" class="fl-margin-top">
    <button mat-button (click)="changePage('previous')"
            [disabled]="previousPage === false || loading === true" color="primary" i18n>
      Previous page
      <ng-container *ngIf="previousPage && loading !== true">({{currentPage - 1}})</ng-container>
    </button>
    <button mat-button (click)="changePage('next')"
            [disabled]="nextPage === false || loading === true" color="primary" i18n>
      Next page
      <ng-container *ngIf="nextPage && loading !== true">({{currentPage + 1}})</ng-container>
    </button>
  </div>
  <form [formGroup]="userForm" class="fl-margin-top" (ngSubmit)="addUserToGroup()">
    <app-user-autocomplete appFlex="50" ltMdFlex="100" [control]="userForm.controls.user"
                           [optionsRetrieveParams]="{userGroupId: object.id}"
                           forUserGroup></app-user-autocomplete>
  </form>
  <div layoutDirection="row">
    <button [disabled]="!userForm.controls.user.value['id']" (click)="addUserToGroup()"
            mat-button mat-raised-button color="primary" i18n>
      Add user to group
    </button>
  </div>
</div>
