<admin-page-header [title]="'Edit Roles'" ></admin-page-header>

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <form #editRoles="ngForm" (ngSubmit)="roleEdit(editRoles, 'roleEdit')">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Edit Role and Permissions' | translate}}</h4>
        <div class="card-options card-header-styles switch pe-3 position-relative">
          <div class="switch_section my-0">
            <div class="switch-toggle d-flex float-end mt-2 me-5">
              <span class="onoffswitch2">
                <input #checkall type="checkbox" id="rolecheckall" [checked]="checkAllBtn ? true : false" (change)="checkAll()" class=" toggle-class onoffswitch2-checkbox">
                <label for="rolecheckall" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3">{{'Select All' | translate}}</label>
            </div>
          </div>
          <div class="form-group  ">
            <button type="submit" [disabled]="sendingResponse['roleEdit']" class="btn btn-secondary">{{'Save'| translate}}@if (sendingResponse['roleEdit']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
            }</button>
          </div>
        </div>
      </div>

      <div class="card-body">

        <div class="row">
          <div class="col-sm-12 col-md-12">
            <div class="form-group">
              <label class="form-label">{{'Role Name' | translate}}</label>
              @if (user && user.name == 'superadmin') {
                <input type="text" class="form-control" name="name" [value]="user?.name" ngModel readonly [placeholder]="'Role' | translate">
              } @else {
                <input type="text" class="form-control" name="name" [value]="user?.name" [ngModel]="user?.name" [placeholder]="'Role' | translate">
              }
            </div>
          </div>

          <div class="col-sm-12 col-md-12">
            <div class="form-group ">
              <div class="switch-selectall">
                <label class="form-label">{{'Permissions' | translate}}</label>
              </div>

              <div class="row">
                @for (data of permission; track data) {
                  <div class="col-sm-12 col-md-12">
                    <h5 class="roles-title">{{data?.permissionName | translate}}</h5>
                  </div>
                  @for (item of data?.permissionList; track item) {
                    <div class="col-xl-3">
                      <div class="switch_section">
                        <div class="switch-toggle d-flex mt-4">
                          <span class="onoffswitch2">
                            <input type="checkbox" name="permission" (change)="checkVariante(item, $event)" id="myonoffswitch{{item.id}}" class=" toggle-class onoffswitch2-checkbox rolecheck" value="{{item.id}}" [disabled]="user?.name == 'superadmin'" [checked]="item.permission ? true : false">
                            <label for="myonoffswitch{{item.id}}" class="toggle-class onoffswitch2-label" ></label>
                          </span>
                          <label class="form-label ps-3">{{ item.name  | translate}}</label>
                        </div>
                      </div>
                    </div>
                  }
                }
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 card-footer ">
        <div class="form-group float-end">
          <button type="submit" [disabled]="sendingResponse['roleEdit']" class="btn btn-success">{{'Save' | translate}}@if (sendingResponse['roleEdit']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
        </div>
      </div>
    </form>
  </div>
</div>