<div class="userPermission-w">
  <div class="container">
    
    <div class="row">
      <div class="col-12">
        <ul class="list-unstyled titileLi-w">
          <li class="headingText-w">خدمه الصلاحيات > </li>
          <li class="headingText-w" style="cursor:pointer" (click)="authService.perviousLocation()"> المستخدمين > </li>
          <li class="headingText-w activeLi-w" style="margin-right:5px"> الصلاحيات </li>
        </ul>
      </div>
    </div>

    <div class="containerContent-w">
      <div class="row">
        <div class="col-12 col-sm-3 col-md-3" *ngFor="let role of roles; let i = index">
          <div class="permission text-center">
            <div class="custom-control custom-checkbox centerIneerItem">
              <input type="checkbox" class="custom-control-input" id="{{role.id}}" [(ngModel)]="role.selected" [value]='role.id' name="{{role.id}}" style="cursor: pointer;">
              <label class="custom-control-label disblayBlock-w" for="{{role.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px">{{role.role_name}}</label>
            </div>
          </div>
        </div>
      </div>
  
      <!-- <h1 class="text-center" style="margin: 30px 0;">الصلاحيات</h1>
      <hr> -->
      <!-- <div class="row">
        <div class="col-12 col-sm-6 col-md-6" *ngFor="let page of pages; let i=index">
          <div class="permission text-center">
            <h2>{{page.name}}</h2>
            <div class="custom-control custom-checkbox centerIneerItem" *ngFor="let pagePermission of pages[i].permissions; let j=index" style="margin: 5px 0;">
              <input type="checkbox" class="custom-control-input" id="{{pagePermission.id}}" [(ngModel)]="pagePermission.selected" [value]='pagePermission.id' name="{{pagePermission.id}}" style="cursor: pointer;">
              <label class="custom-control-label disblayBlock-w" for="{{pagePermission.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px"><span>{{pagePermission.permission_name}}</span></label>
            </div>
          </div>
        </div>
      </div> -->
      <button class="btn btn-success" style="float:right; margin: 20px 0;" (click)="onSubmitted()">حفظ</button>
    
    </div>

  </div>
</div>