<title>Permission Groups</title>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <app-breadcrumb [title]="'Permission Groups'" [active_item]="'Permission Groups'">
      </app-breadcrumb>
    </div>
    <div class="col-sm-6 text-right">
      <div ngbDropdown class="btn-group">
        <div class="ml-2">
          <a title="{{ 'permission_group_tooltip_add_group_permission'|translate }}" href="javascript:;"
            class="btn btn-sm btn-info filterbtn" *ngIf="isWritePermission" (click)="modalOpen()">
            <i class="icon-plus"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="col-sm-12">
      <mat-drawer-container autosize>
        <div class="card">
          <ng-container *ngIf="permissionGroup && permissionGroup.length > 0 else NoPermissionGroup">
            <div class="contentcard table-responsive userlist-table">
              <table class=" mat-elevation-z8 table-striped table-vcenter box-shadow-none" mat-table
                [dataSource]="permissionGroup" multiTemplateDataRows aria-label="">
                <ng-container matColumnDef="id">
                  <th mat-header-cell *matHeaderCellDef style="width:75px">#</th>
                  <td mat-cell *matCellDef="let element; let i = dataIndex;" style="width:75px">
                    {{i+1}}

                  </td>
                </ng-container>
                <ng-container matColumnDef="name">
                  <th mat-header-cell *matHeaderCellDef translate>{{ 'lbl_name' | translate}} </th>
                  <td mat-cell *matCellDef="let element">
                    {{element.name}}
                  </td>
                </ng-container>
                <ng-container matColumnDef="createdDate">
                  <th mat-header-cell *matHeaderCellDef translate>{{ 'lbl_created_date' | translate}}
                  </th>
                  <td mat-cell *matCellDef="let element">
                    {{element.createdDate | date:'medium'}}
                  </td>
                </ng-container>
                <!-- <ng-container matColumnDef="status">
                  <th mat-header-cell *matHeaderCellDef translate>{{ 'lbl_status' | translate}}</th>
                  <td mat-cell *matCellDef="let element">
                    <ng-container *ngIf="element.isActive else InActive">
                      <span class="label text-success d-flex">
                        <span>{{ 'lbl_active' | translate}}</span>
                      </span>
                    </ng-container>
                    <ng-template #InActive>
                      <span class="label text-warning d-flex">
                        <span>{{ 'lbl_in_active' | translate}}</span>
                      </span>
                    </ng-template>
                  </td>
                </ng-container> -->
                <ng-container matColumnDef="action">
                  <th mat-header-cell *matHeaderCellDef translate class="text-right">{{ 'lbl_action' | translate}}</th>
                  <td mat-cell *matCellDef="let element" class="text-right">
                    <a title="{{ 'permission_group_tooltip_edit_group_permission' |translate}}" *ngIf="isEditPermission"
                      href="javascript:;" class="btn btn-sm btn-info filterbtn" (click)="editDialog(element)">
                      <i class="icon-pencil"></i>
                    </a>
                  </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayColumns; sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: displayColumns;" class="student-element-row"
                  style="cursor: pointer;"></tr>
              </table>
            </div>
          </ng-container>
          <ng-template #NoPermissionGroup>
            <div class="d-flex vertical-center nodata">
            </div>
          </ng-template>
        </div>

      </mat-drawer-container>
    </div>
  </div>
</div>