<div class="content">
  <div class="default-header">
    <div class="row align-items-center">
      <a
        mat-icon-button
        matTooltip="Back to group management"
        matTooltipClass="custom-tooltip"
        [routerLink]="['/controller', controller.id, 'management', 'groups']">
        <mat-icon aria-label="Back to group management">keyboard_arrow_left</mat-icon>
      </a>
      <h1 class="col">Group {{group.name}}</h1>
    </div>
    <mat-tab-group>
      <mat-tab label="Details" class="details">
        <div>
          <div>
            <form [formGroup]="editGroupForm" class="input-field">
              <mat-form-field>
                <mat-label>Group name:</mat-label>
                <input matInput type="text" formControlName="groupname">
              </mat-form-field>
            </form>
          </div>

          <div>
            <mat-checkbox [checked]="group.is_builtin" disabled>Is built-in</mat-checkbox>
          </div>
          <div mat-dialog-actions class="button-div">
            <button mat-button (click)="onUpdate()" tabindex="2" mat-raised-button color="primary"
                    [disabled]="!editGroupForm.valid || group.is_builtin">
              Update Group
            </button>
          </div>
        </div>
        <div>
          <div>Creation date:   {{group.created_at}}</div>
          <div>Last update Date:   {{group.updated_at}}</div>
          <div>UUID:   {{group.user_group_id}}</div>
        </div>
      </mat-tab>
      <mat-tab label="Members">
        <div class="members">
          <div>
            <mat-icon (click)="openAddUserDialog()" class="clickable">person_add</mat-icon>
          </div>
          <div class="search">
            <mat-form-field>
              <input matInput placeholder="filter members" [(ngModel)]="searchMembers"/>
            </mat-form-field>
          </div>
          <div *ngFor="let user of members | membersFilter: searchMembers | paginator: pageEvent">
            <a [routerLink]="['/controller', controller.id, 'management','users', user.user_id]">
              <div>{{user.username}}</div>
            </a>
            <mat-icon class="clickable" (click)="openRemoveUserDialog(user)">delete</mat-icon>
          </div>
          <mat-paginator [length]="members.length" (page)="pageEvent = $event"
                         [pageSizeOptions]="[5, 20, 50, 100]"></mat-paginator>
        </div>
      </mat-tab>
      <mat-tab label="ACEs">
        <div class="default-content">
          <table mat-table [dataSource]="aceDatasource" class="mat-elevation-z8">

            <ng-container matColumnDef="endpoint">
              <th mat-header-cell *matHeaderCellDef> Endpoint </th>
              <td mat-cell *matCellDef="let element">{{element.endpoint_name}}</td>
            </ng-container>

            <ng-container matColumnDef="role">
              <th mat-header-cell *matHeaderCellDef > Role </th>
              <td mat-cell *matCellDef="let element"> {{element.role_name}} </td>
            </ng-container>
            <ng-container matColumnDef="propagate">
              <th mat-header-cell *matHeaderCellDef > Propagate </th>
              <td mat-cell *matCellDef="let element"> {{element.propagate}} </td>
            </ng-container>
            <ng-container matColumnDef="allowed">
              <th mat-header-cell *matHeaderCellDef> Allowed </th>
              <td mat-cell *matCellDef="let element"> {{element.allowed}} </td>
            </ng-container>


            <tr mat-header-row *matHeaderRowDef="aceDisplayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: aceDisplayedColumns;"></tr>


          </table>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>
