<!-- Main content -->

  <section class="content-header clearfix">
      <h4 translate class="subheader-title">
          <span class="subheader-icon fal fa-users"></span>&nbsp; User Role Mapping
      <small> </small>
    </h4>
    </section>
    <!--<div class="row pull-right">
      <app-helpdesk [menuId]="sendMenuId" [pageName]="sendPageName"></app-helpdesk>
    </div>-->
    <section class="content">
      <div class="box padding-15" style="display: block;">
    <form [formGroup]="userRoleForm">
      <div class="row">
      <div class="col-md-10 col-sm-12 col-lg-8">
        <div class="form-group row">
          <label class="col-sm-3 control-label" for="Project">Select Role Name</label>
          <div class="col-sm-9">          
            <select class="form-control" formControlName="roleid" id="roleid" (change)="GetMappedUserList()">
              <option [value]="0">--Select--</option>
              <option *ngFor="let role of roles" [value]="role.roleid">
                {{role.rolename}}
              </option>
            </select>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 control-label" for="Project">Select Department</label>
          <div class="col-sm-9">          
            <select class="form-control" formControlName="departmentid" id="departmentid" (change)="GetUser()">
              <option [value]="0">--Select--</option>
              <option *ngFor="let department of departments" [value]="department.departmentid">
                {{department.department}}
              </option>
            </select>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 control-label" for="Project">Select Users</label>
          <div class="col-sm-9">     
            <dual-list [source]="userList" key="userid" display="firstname"  [(destination)]="selectedUserList" (destinationChange)="destinationChange($event)"   height="200px" [format]="format"></dual-list>
          </div>
        </div>
        <div class="form-group row row" style="margin:15px 0">
          <label class="col-sm-3 control-label"> </label>
          <div class="col-sm-12 text-right">
          <!--  formTocuhed={{formTocuhed}}-->
            <button type="button" class="m-r-10 btn btn-outline-primary waves-effect waves-themed btn-sm" [disabled]="!formTocuhed" (click)="saveUserRole()">
              Save
            </button>
            <button type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm"  (click)="clear()">
              Cancel
            </button>
          </div>
        </div>
      </div>
	</div>	  
    </form>
  </div>
  </section>

  <ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
  </ngx-spinner>