<!-- Main content -->

  <!-- <section class="content">
    <div class="box padding-15" style="display: block;">
      <form [formGroup]="userStageForm">
        <div class="row">
          <div class="form-group">
            <label class="col-sm-3 control-label" for="Project">Select Project Definition Subtitle</label>
            <div class="col-sm-9">
              <select class="form-control" formControlName="projectdefinitionid" id="projectdefinitionid"
                (change)="GetMappedUserList()">
                <option [value]="0">--Select--</option>
                <option *ngFor="let projectDefinition of uniqueProjectDefinitions"
                  [value]="projectDefinition.projectdefinitionid">
                  {{projectDefinition.project_subtitle}}
                </option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label" for="Project">Select Stage</label>
            <div class="col-sm-9">
           
            </div>

          </div>
          <div class="form-group">
            <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" [filter]="filter"
                [(destination)]="selectedUserList" (destinationChange)="destinationChange($event)" height="200px"
                [format]="format"></dual-list>
            </div>
          </div>
          <div class="form-group text-right">
            <div class="col-sm-12" style="margin: 15px 0px;">
              <button type="button" class="btn btn-info mat-button m-r-10" (click)="saveUserStage()">
                Save
              </button>
              <button type="button" class="btn btn-info mat-button" (click)="clear()">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </section> -->

  <section class="content-header clearfix">
      <h2 translate class="subheader-title">
          <span class="subheader-icon fal fa-users"></span>&nbsp; User Stage Mapping
      <small> </small>
    </h2>
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="row margin">
      <div class="col-md-12">
        <div class="box">        
            <div class="row">
              <div class="col-md-6" id="searchDiv">
                <div style="padding:3%; border-radius:5px; border-color:black">
                  <div class="panel-group" id="accordion" aria-expanded="false">
                    <h4 class=" mb-3"><b>Users</b></h4>
                    <div class="box-tools pull-right" style="margin-top: -32px;">
                      <div class="input-group input-group-sm" style="width: 150px;">
                        <!-- <input class="form-control pull-right ng-pristine ng-valid ng-empty ng-touched"
                          placeholder="Search User" autocomplete="off" type="search" id="accordion_search_bar"> -->
                        <!-- <div class="input-group-btn">
                          <button type="submit" class="btn btn-default"><i class="fal fa-search"></i></button>
                        </div> -->
                      </div>
                    </div>
                    <!-- <div id="notrecordmasterdiv" class="panel panel-default ng-scope"
                      style="border: 1px solid rgb(204, 204, 204); padding: 3%; border-radius: 5px;">
                      <div class="panel-heading">
                        <b id="notrecordmaster" class="panel-title" style="color:#b90a0a">No user found!</b>
                      </div>
                    </div> -->

                    <p id="orginalusercount" style="display:none"> {{departmentlist.length}}</p>

                    <div class="panel panel-default" id="collapse{{dl.department.split(' ').join('')}}"
                      *ngFor="let dl of departmentlist;let i = index">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
                            title="Click here to view the user(s) of this department" href="#List-{{ i }}">
                            {{dl.department}}
                          </a>
                        </h4>
                      </div>

                      <div id="List-{{ i }}" class="panel-collapse collapse">
                        <div class="panel-body">
                          <ul class="list-group" style="margin-bottom: 5px;"
                            *ngFor="let dll of overalllist |searchbytitle:'department':dl.department">
                            <li id="searchtext" title="Click here to view the project(s) assigned to this user"
                              *ngIf="dll.username!==null" class="list-group-item"
                              (click)="selectuser(dll.userid, dll.department)"
                              [ngClass]="{active: dll.userid===selectedIndex}" style="cursor:pointer">
                              <b> {{dll.username}} </b>
                            </li>
                            <li style="color:#b90a0a" *ngIf="dll.username===null" class="list-group-item"> <b>No users
                                found!</b></li>
                          </ul>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div style="padding:3%; border-radius:5px;">
                  <div class="panel-group" id="accordion1" aria-expanded="false">
                   <div class="row mb-2">
                     <div class="col-md-8">
                          <h4 *ngIf="projectmaplist.length!==0"><b>Project(s) of - {{useridmapproj}} From
                              {{departdisplayname}}</b></h4>
                          <h4 *ngIf="projectmaplist.length===0 && useridmapproj!==''"><b>Project(s) Of -
                              {{useridmapproj}} From {{departdisplayname}}</b></h4>
                            </div>
                            <div class="col-md-4">
                          <button type="button" class="btn btn-outline-primary waves-effect waves-themed btn-sm pull-right"
                            [disabled]="addandremovestage.length===0" (click)="MapUserStagenew()"><i
                              class="fal fa-save"></i>
                            Save
                          </button>
                        </div>
                      </div>
                    <div class="panel panel-default" *ngIf="projectmaplist.length===0 && useridmapproj!==''"
                      style="border:1px solid #ccc; padding:3%; border-radius:5px;">
                      <div class="panel-heading">
                        <b class="panel-title" style="color:#b90a0a">No projects mapped!</b>
                      </div>
                    </div>

                    <div class="panel panel-default" *ngFor="let pl of projectmaplist;let i = index">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a (click)="clearsearch()" class="accordion-toggle" title="Click here to view the stages"
                            data-toggle="collapse" data-parent="#accordion1" href="#projectname-{{ i }}">
                            {{pl.projectname}}
                          </a>

                        </h4>
                      </div>
                      <div id="projectname-{{ i }}" class="panel-collapse collapse">
                        <h5 style="padding-left: 15px; padding-top: 12px;"><b> Stages </b> </h5>
                        <div class="box-tools pull-right" style="margin-top: -32px;padding-right: 10px;">
                          <div class="input-group input-group-sm" style="width: 150px;">
                            <input autocomplete="off" type="text" id="cleartext" name="table_search"
                              class="form-control pull-right" placeholder="Search Stage" [(ngModel)]="my.search"
                              (change)="updateFilteredList()">
                              <span class="input-group-append">
                                  <button class="btn btn-primary waves-effect waves-themed btn-sm" type="submit">
                                    <span class="fal fa-search"></span>
                                        </button>
                        </span>
                          </div>
                        </div>
                        <div class="panel-body">

                          <!-- | filter:dl.department -->
                          <!-- searchbytitle:'projectdefinitionid':pl.projdefid -->
                          <ul class="list-group" style="margin-bottom: 5px;">
                            <li id="bg" class="list-group-item bgoverallchange">
                              <input id="check" type="checkbox" value="" style="cursor:pointer"
                                (click)="selectAll(pl.projdefid,useridmapprojid,$event)">
                              Select All
                            </li>
                          </ul>
                          <ul class="list-group" style="margin-bottom: 5px;"
                            *ngFor="let dll of projectmaplist_overall| searchbytitle:'projectdefinitionid':pl.projdefid;let i = index ">
                            <li id="bg{{dll.pwdid}}" class="list-group-item bgoverallchange"
                              [attr.title]="isstagealreadymap ? '' : 'Select the stage(s)'"
                              [ngClass]="{mousedis: isstagealreadymap == true}" (mouseout)="removedisable()"
                              (mouseenter)="loaduserstagemapping_new( pl.projdefid,dll.pwdid, useridmapprojid)">
                              <input id="check{{dll.pwdid}}" type="checkbox" value="" style="cursor:pointer"
                                [disabled]="isstagealreadymap === true" [checked]="dll.active"
                                (click)="onchangestagemapping(dll.pwdid, pl.projdefid, useridmapprojid,dll.stagemappingid,$event)">
                              {{dll.stagename_alias}}
                              <div *ngIf="dll.mergecheckinappfeature.length">
                              <div *ngIf="(dll.mergecheckinappfeature|searchbytitle:'urltype':'weburl').length">
                                <br>Checkin Feature:
                                <div>
                                  <br>Web URL Features:
                                <ul class="list-group" style="margin-bottom: 5px;"
                                  *ngFor="let feature of dll.mergecheckinappfeature|searchbytitle:'urltype':'weburl';let i = index">
                                  <li class="list-group-item bgoverallchange"
                                    [attr.title]="isstagealreadymap ? '' : 'Select the stage(s)'"
                                    [ngClass]="{mousedis: isstagealreadymap == true}" (mouseout)="removedisable()"
                                    (mouseenter)="loaduserstagemapping_new( pl.projdefid,dll.pwdid, useridmapprojid)">
                                    <input type="checkbox" [checked]="feature.active" value={{feature.active}}
                                      id={{feature.mdata}}
                                      (click)="onchangemergecheckinappfeature(dll.pwdid, pl.projdefid, useridmapprojid,dll.stagemappingid,feature,$event)"
                                      name={{feature.mdata}}>
                                    <label for={{feature.mdata}}>{{feature.mdata}}</label>
                                  </li>
                                </ul>
                                </div>
                              </div>
                              </div>
                              <div *ngIf="dll.mergecheckoutappfeature.length">
                                <div *ngIf="(dll.mergecheckoutappfeature|searchbytitle:'urltype':'weburl').length">
                                <br>CheckOut Feature:
                                <div>
                                  <br>Web URL Features:
                                <ul class="list-group" style="margin-bottom: 5px;"
                                  *ngFor="let feature of dll.mergecheckoutappfeature|searchbytitle:'urltype':'weburl';let i = index">
                                  <li class="list-group-item bgoverallchange"
                                    [attr.title]="isstagealreadymap ? '' : 'Select the stage(s)'"
                                    [ngClass]="{mousedis: isstagealreadymap == true}" (mouseout)="removedisable()"
                                    (mouseenter)="loaduserstagemapping_new( pl.projdefid,dll.pwdid, useridmapprojid)">
                                    <input type="checkbox" [checked]="feature.active" value={{feature.active}}
                                      id={{feature.mdata}}
                                      (click)="onchangemergecheckoutappfeature(dll.pwdid, pl.projdefid, useridmapprojid,dll.stagemappingid,feature,$event)"
                                      name={{feature.mdata}}>
                                    <label for={{feature.mdata}}>{{feature.mdata}}</label>
                                  </li>
                                </ul>
                              </div>
                              </div>
                              </div>

                              <div *ngIf="dll.mergeinprocessappfeature.length">
                                <div *ngIf="(dll.mergeinprocessappfeature|searchbytitle:'urltype':'weburl').length">
                                <br>InProgress Feature:
                                <div>
                                  <br>Web URL Features:
                                <ul class="list-group" style="margin-bottom: 5px;"
                                  *ngFor="let feature of dll.mergeinprocessappfeature|searchbytitle:'urltype':'weburl';let i = index">
                                  <li class="list-group-item bgoverallchange"
                                    [attr.title]="isstagealreadymap ? '' : 'Select the stage(s)'"
                                    [ngClass]="{mousedis: isstagealreadymap == true}" (mouseout)="removedisable()"
                                    (mouseenter)="loaduserstagemapping_new( pl.projdefid,dll.pwdid, useridmapprojid)">
                                    <input type="checkbox" [checked]="feature.active" value={{feature.active}}
                                      id={{feature.mdata}}
                                      (click)="onchangemergecheckinappfeature(dll.pwdid, pl.projdefid, useridmapprojid,dll.stagemappingid,feature,$event)"
                                      name={{feature.mdata}}>
                                    <label for={{feature.mdata}}>{{feature.mdata}}</label>
                                  </li>
                                </ul>
                                </div>
                              </div>
                            </div>
                            </li>
                          </ul>
                          <ul class="list-group" *ngIf="projectmaplist_overall.length===0">
                            <li class="list-group-item"><b style="color:#b90a0a">No stages found!</b>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>        
        </div>
      </div>
    </div>
  </section>

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