<title>Page Group Permission</title>
<div *ngIf="groupId else Add">
  <app-breadcrumb [title]="'Permission Group'" [items]="[{'name':'Permission Group', route:'/permissionGroups'}]"
    [active_item]="'Edit'">
  </app-breadcrumb>
</div>
<ng-template #Add>
  <app-breadcrumb [title]="'Permission Group'" [items]="[{'name':'Permission Group', route:'/permissionGroups'}]"
    [active_item]="'Add'">
  </app-breadcrumb>
</ng-template>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <mat-drawer-container class="example-container" autosize>
        <div class="card">
          <div class="p-4">
            <div class="addCard">
              <form #groupForm="ngForm">
                <div class="form-row">
                  <div class="form-row">
                    <div class="form-group col-lg-12 col-md-12">
                      <label for="name">{{ 'add_page_group_permission_lbl_group_name' | translate}} <span
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" name="name" [(ngModel)]="permissionGroup.name"
                        #Name="ngModel" required>
                      <mat-error *ngIf="(Name!.touched) && (Name.errors?.['required'])">
                        {{ 'message_lbl_name_is_required' | translate}}
                      </mat-error>
                    </div>
                  </div>
                </div>
                <hr>
                <div>
                  <form>
                    <div class="row mx-0">
                      <div class="col-sm-4"></div>
                      <div class="col-sm-8">
                        <div class="row">
                          <div class="col-sm-2">{{ 'lbl_select_all' | translate}}</div>
                          <div class="col-sm-2">{{ 'add_page_group_permission_lbl_admin_permission' | translate}}</div>
                          <div class="col-sm-2">{{ 'lbl_read' | translate}}</div>
                          <div class="col-sm-2">{{ 'lbl_write' | translate}}</div>
                          <div class="col-sm-2">{{ 'lbl_edit' | translate}}</div>
                          <div class="col-sm-2">{{ 'lbl_delete' | translate}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="row mx-0">
                      <ul style="width: 100%;">
                        <li class="main" *ngFor="let page of pageList"
                          style="margin: 0 0 5px 0;border-bottom: 1px solid #ddd;">
                          <div class="row">
                            <div [ngClass]="!(page.children && page.children.length > 0) ? 'col-lg-4' : 'col-sm-12'">
                              <input id="checkbox-info-1" type="checkbox" [checked]="page.isChecked"
                                (click)="onCheckTreeview(page)">
                              <span class="pl-2">{{page.title}}</span>
                              <ul *ngIf="page.children && page.children.length > 0" style="margin: 0 0 0 20px;">
                                <li *ngFor="let child of page.children" class="sub pl-2">
                                  <div class="row">
                                    <div class="col-sm-4">
                                      <input id="checkbox-info-1" type="checkbox" [checked]="child.isChecked"
                                        (click)="onCheckTreeview(child)">
                                      <span class="pl-1"> {{child.title}}</span>
                                    </div>
                                    <div class="col-sm-8">
                                      <div class="row" *ngIf="child.isChecked">
                                        <span class="col-sm-2">
                                          <input id="checkbox-info-2" type="checkbox" [checked]="child.isSelectAll"
                                            (click)="onSelectAll(child)">
                                        </span>
                                        <span class="col-sm-2">
                                          <input id="checkbox-info-2" type="checkbox"
                                            [checked]="child.isAdminVerificationRequired"
                                            (click)="onCheckAdminVerifiedPermission(child)">
                                        </span>
                                        <span class="col-sm-2">
                                          <input id="checkbox-info-2" type="checkbox" [checked]="child.readPermission"
                                            (click)="onCheckReadPermission(child)">
                                        </span>
                                        <span class="col-sm-2">
                                          <input id="checkbox-info-2" type="checkbox" [checked]="child.writePermission"
                                            (click)="onCheckWritePermission(child)">
                                        </span>
                                        <span class="col-sm-2">
                                          <input id="checkbox-info-2" type="checkbox" [checked]="child.editPermission"
                                            (click)="onCheckEditPermission(child)">
                                        </span>
                                        <span class="col-sm-2">
                                          <input id="checkbox-info-2" type="checkbox" [checked]="child.deletePermission"
                                            (click)="onCheckDeletePermission(child)">
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                              </ul>
                            </div>
                            <div class="col-lg-8">
                              <ng-container *ngIf="!(page.children && page.children.length > 0)">
                                <div class="row" *ngIf="page.isChecked">
                                  <span class="col-sm-2">
                                    <input id="checkbox-info-2" type="checkbox" [checked]="page.isSelectAll"
                                      (click)="onSelectAll(page)">
                                  </span>
                                  <span class="col-sm-2">
                                    <input id="checkbox-info-2" type="checkbox"
                                      [checked]="page.isAdminVerificationRequired"
                                      (click)="onCheckAdminVerifiedPermission(page)">
                                  </span>
                                  <span class="col-sm-2">
                                    <input id="checkbox-info-2" type="checkbox" [checked]="page.readPermission"
                                      (click)="onCheckReadPermission(page)">
                                  </span>
                                  <span class="col-sm-2">
                                    <input id="checkbox-info-2" type="checkbox" [checked]="page.writePermission"
                                      (click)="onCheckWritePermission(page)"></span>
                                  <span class="col-sm-2">
                                    <input id="checkbox-info-2" type="checkbox" [checked]="page.editPermission"
                                      (click)="onCheckEditPermission(page)"></span>
                                  <span class="col-sm-2">
                                    <input id="checkbox-info-2" type="checkbox" [checked]="page.deletePermission"
                                      (click)="onCheckDeletePermission(page)"></span>

                                </div>
                              </ng-container>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </form>
                </div>

              </form>
            </div>
            <div class="modal-footer">
              <button (click)="insertPermissionGroup(groupForm)" class="btn btn-sm btn-info filterbtn">
                {{ 'button_lbl_save' | translate}}
              </button>
              <button (click)="cancelPermissionGroup()" class="btn btn-sm btn-secondary filterbtn">
                {{ 'button_lbl_cancel' | translate}}
              </button>
            </div>
          </div>
        </div>
      </mat-drawer-container>
    </div>
  </div>
</div>