<div class="search-container">
    <p class="text-left"> Coach Nomination</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">Employee 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">
        <mat-card>
            <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='tile-details-fullName'><strong>{{candidateDetails.userInfoMstr.fullName}}</strong></p>
                        <p class='tile-details-others'>{{candidateDetails.userInfoMstr.emailId}}</p>
                    </div>
                </div>
                <div class='col-xs-6 card-info-middle'>
                    <p class='tile-details-roleName'>Employee ID: {{candidateDetails.employeeNo || 'No Id'}} </p>
                </div>
                <div class='col-xs-1 card-expand' style="padding-left: 10%;">
                    <button data-toggle="modal" data-target="#adminModal" class="btn-nominate">NOMINATE</button>
                </div>
            </div>
        </mat-card>
    </div>
</div>

<!-- Modal -->
<div *ngIf="searchBtnEnabled" 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'>{{candidateDetails.userInfoMstr.fullName}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="modal-btn btn-cancel" data-dismiss="modal">CANCEL</button>
                <button type="button" (click)="nominate({userInfoMstrId:candidateDetails.userInfoMstr.userInfoMstrId})" class="modal-btn btn-confirm" [attr.data-dismiss]=dismiss>SEND</button>
            </div>
        </div>

    </div>
</div>