<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-md-6 mb-2">
        <span *ngIf="!role?.id" class="mb-0 page-title">{{'ADD_ROLE' | translate}}<app-page-help-text code="MANAGE_ROLE"></app-page-help-text></span>
        <span *ngIf="role?.id" class="mb-0 page-title">{{'EDIT_ROLE' | translate}}<app-page-help-text code="MANAGE_ROLE"></app-page-help-text></span>
      </div>
    </div>
    <div class="card">
      <div class="body">
        <div class="row">
          <div class="form-group col-md-6">
            <label for="screeName">{{'ROLE_NAME' | translate}}:</label>
            <input [(ngModel)]="role.name" type="text" class="form-control">
          </div>
        </div>
        <div class="row align-items-center">
          <div class="col-md-6 mb-2">
            <h2 class="mb-0 page-title">{{'PERMISSION' | translate}}</h2>
          </div>
        </div>
        <div class="row align-items-center">
          <div class="col-md-6 mb-2">
            <mat-checkbox color="primary" (change)="selecetAll($event)" class="example-margin">
              {{'SELECT_ALL' | translate}}
            </mat-checkbox>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12">
            <div fxLayout="row wrap" *ngFor='let screen of screens; let i=index'>
              <div fxFlex="100" fxFlex.sm="100">
                <mat-checkbox color="primary" (change)="onPageSelect($event,screen.name)">
                  <b> {{screen.name.replaceAll(' ', '_').toUpperCase() | translate}}</b>
                </mat-checkbox>
              </div>
              <div class="row ms-2">
                <ng-container *ngFor='let operation of operations'>
                  <div *ngIf="checkPageAction(screen.id,operation.id)" class="col-sm-3 mb-0">
                    <mat-checkbox color="primary" [checked]="checkPermission(screen.id,operation.id)"
                      (change)="onPermissionChange($event,screen,operation)">
                      {{operation.name.replaceAll(' ', '_').toUpperCase() | translate}}
                    </mat-checkbox>
                  </div>
                </ng-container>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="m-2">
        <button class="btn btn-success btn-sm me-2" (click)="saveRole()" cdkFocusInitial>
          <i-feather name="save" class="small-icon"></i-feather>
          {{'SAVE' | translate}}</button>
        <button class="btn btn-danger btn-sm" [routerLink]="['/roles']">
          <i-feather name="x-circle" class="small-icon"></i-feather>
          {{'CANCEL' | translate}}
        </button>
      </div>
    </div>
  </div>
</section>