<div class="search-container">
    <p class="text-left"> Candidate Transfer</p>
    <div class="search">
        <div class="container-fluid">
            <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" class="ui form users-container" [class.error]="!searchForm.valid && searchForm.touched">
                <div class="row">
                    <div class="col-xs-3">
                        <div class="search-form-group">
                            <label for="firstName" class="search-input-label">First Name</label><br>
                            <input type="text" id="firstName" class="search-input" placeholder="Enter" formControlName="firstName" required>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="search-form-group">
                            <label for="lastName" class="search-input-label">Last Name</label><br>
                            <input type="text" id="lastName" class="search-input" placeholder="Enter" formControlName="lastName" required>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="search-form-group">
                            <label for="email" class="search-input-label">Email</label><br>
                            <input type="text" id="email" class="search-input" placeholder="Enter" formControlName="email" required>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="col-xs-2 search-form-or">
                            <p>OR</p>
                        </div>
                        <div class="col-xs-10 search-form-group">
                            <label for="employeeId" class="search-input-label">Candidate ID</label><br>
                            <input type="text" id="employeeId" class="search-input" placeholder="Enter" formControlName="employeeNo" required>
                        </div>
                    </div>
                </div>
                <div class="col-xs-10">
                    <label for="err" id="err" class="modal-err-msg">{{errMsg}}</label>
                </div>
                <div class="col-xs-2">
                    <button type="submit" class="btn-search-off" [ngClass]="{ 'btn-search': searchBtnEnabled, 'btn-search-off': !searchBtnEnabled  }">SEARCH</button>
                </div>
            </form>
        </div>
    </div>

    <div *ngIf="searchBtnEnabled" class="row users-container">
        <div *ngFor="let candidateDetails of candidateList;  let rowcount = index;">
            <mat-card>
                <div class='row card-row' *ngIf="expendDiv && isRow == rowcount">
                    <div class='col-xs-12' style="padding-left:1122px;">
                        <a>
                            <img src="{{closeImg}}" (click)="isRow = rowcount ; expendDiv = false ">
                        </a>
                    </div>
                </div>
                <div class='row card-row'>
                    <div class='col-xs-5'>
                        <div class='col-xs-3'>
                            <img src="{{user.src}}">
                        </div>
                        <div class='col-xs-9 card-info-left'>
                            <p class='card-details-fullName'><strong>{{candidateDetails.userInfoMstr.fullName}}</strong></p>
                            <p class='card-details-others'>{{candidateDetails.userInfoMstr.emailId}}</p>
                        </div>
                    </div>
                    <div class='col-xs-3 card-info-middle'>
                        <p class='card-details-roleName'>Candidate ID: {{candidateDetails.employeeNo || 'No Id'}} </p>
                    </div>
                    <div class='col-xs-4 card-info-middle'>
                        <p>Current Location: <span class="card-details-location">{{candidateDetails.userInfoMstr.pgLocation.city}}</span></p>
                    </div>
                    <div class="col-xs-1 card-expand" *ngIf="!expendDiv">
                        <a>
                            <img src="{{expandImg}}" (click)="expendDiv = true; isRow = rowcount  ">
                        </a>
                    </div>
                </div>

                <div class="row card-row" *ngIf="expendDiv && isRow == rowcount">

                    <div class='col-xs-1'></div>
                    <div class='col-xs-4 card-dtls'>
                        <div class="search-form-group">
                            <label for="email" class="search-input-label">Transfer To:</label>
                            <select class="dropdown" id="f" #location>
                <option selected="selected">Select</option>
                <option *ngFor="let location of locations; let i=index" [value]="location.locationId">{{location.city}}</option>
              </select>
                        </div>
                    </div>
                    <div class='col-xs-1 card-expand card-Btns'>
                        <button data-toggle="modal" class="btn-nominate" (click)="transfer({locationId:location.value,userInfoMstrId:Number(candidateDetails.userInfoMstr.userInfoMstrId)})">TRANSFER</button>
                    </div>
                    <div class='col-xs-5 card-info-middle'>
                    </div>
                    <div class="col-xs-1 card-expand">

                    </div>
                </div>


            </mat-card>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="adminModal" class="modal fade skill-modal" role="dialog">
    <div class="modal-dialog admin-modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Confirm Nomination</h4>
            </div>
            <div class="modal-body admin-modal-body">
                <p class="modal-body-title">You have nominated this person to be a Coach.</p>
                <div class="row">
                    <div class="col-xs-12 modal-usr-info">
                        <div class="modal-form-group">
                            <div class='col-xs-3'>
                                <img src="{{user.src}}">
                            </div>
                            <div class='col-xs-9'>
                                <p class='modal-usr-info-text'>{{user.fullName}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" (click)="nominate(false)" class="modal-btn btn-cancel" data-dismiss="modal">CANCEL</button>
                <button type="button" (click)="nominate(true)" class="modal-btn btn-confirm" data-dismiss="modal">SEND</button>
            </div>
        </div>

    </div>
</div>