<section *ngIf="!uploadSuccess">
    <div class="text-center file-dld">
        If you don't have the Bulk Upload excel file with you, You can
        <a href="{{imageUrl}}/assets/data/Bulk_Onboard.xlsm" download>
            Download from here
        </a>
    </div>
    <div class="buMaindiv">
        <div draggable="true" ngClass="{{dragAreaClass}}">
            <div class="row">
                <div class="col-md-12 text-center">
                    <img src="{{img_path + 'upload_icon.png'}}" alt="" />

                    <div class="drgText">Drag &amp; Drop</div>
                    <div class="otherText">
                        <span class="pull-left"> Your file(s), or &nbsp;</span>
                        <a href="javascript:void(0)" (click)="file.click()" class="pull-left">
                      Browse 
                    </a>
                        <br /> <br />

                    </div>
                    <i>You can upload Word Document, Excel and PDF files</i><br />
                    <i> (Upto 100 files, max 10 MB each)</i>
                    <input type="file" #file [multiple]="(maxFiles > 1)" (change)="onFileChange($event)" style="display:none" />
                </div>
            </div>

        </div>
        <div class="row error" *ngIf="errors.length > 0">
            <ul>
                <li *ngFor="let err of errors">{{err}}</li>
            </ul>
        </div>
    </div>
    <br />
    <div class="text-center file-dld footer"> Upload all the resume documents listed in Bulk Upload Excel file along with Bulk Upload Excel/Template file. </div>
</section>
<section *ngIf="uploadSuccess">
    <div class="row uploadRecActionDiv">
        <div class="pull-left">
            <img src="{{img_path + 'tik.png'}}" alt="" />
            <span>{{uploadCount}} Profiles Uploaded </span>
        </div>
        <div class="pull-right">
            <!-- <button class="btn btn-discard" (click)="discardBulkUploadConfirm()">DISCARD</button> -->
            <button class="btn btn-submit" (click)="submitBulkUploadConfirm()">DONE</button>
        </div>
    </div>
    <div class="table_parent">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <!-- <th>Candidate ID</th> -->
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Location</th>
                        <th>Experience Level</th> 
                        <th>Primary Skill</th>                                               
                        <th>Contact Number</th>
                        <th>Email ID</th>
                    </tr>
                </thead>
                <tbody *ngIf="uploadedUsers.length != 0">
                    <tr *ngFor="let user of uploadedUsers; let userRow = index">
                        <!-- <td>{{user?.userInfoMstrId}}</td> -->
                        <td>{{user?.firstName}}</td>
                        <td>{{user?.lastName}}</td>
                        <td>{{user?.locationName}}</td>
                        <td>{{user?.experienceLevel}}</td>
                        <td>
                            <div *ngIf="user?.primarySkills.length > 0">
                                <span *ngFor="let skillName of user?.primarySkills">
                                    {{skillName}}
                                </span>
                            </div> 
                        </td>
                        <td>{{user?.contactNumber}}</td>
                        <td>{{user?.emailId}}</td>
                    </tr>
                </tbody>
                <tbody *ngIf="uploadedUsers.length === 0">
                    <td colspan="9" style="text-align:center; font-weight: bold; color:red;">No records to display</td>
                </tbody>
            </table>
        </div>

        <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
            <li><span>{{pager.startIndex+1}} - {{pager.endIndex+1}} of {{pager.totalItems}}</span></li>
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(1)">First</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(pager.currentPage - 1)"><img src="{{usr_img_path + 'prev.png'}}"></a>
            </li>
            <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                <a (click)="setPage(page)">{{page}}</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.currentPage + 1)"><img src="{{usr_img_path + 'next.png'}}"></a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.totalPages)">Last</a>
            </li>
        </ul>
    </div>

    <div class="row uploadRecActionDiv">
        <div class="pull-left">
            <img src="{{img_path + 'close-simple-line-icons.png'}}" alt="" />
            <span>{{failedCount}} Profiles Failed to Upload </span>
        </div>
    </div>
    <div class="table_parent">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <!-- <th>Candidate ID</th> -->
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Location</th>
                        <th>Experience Level</th> 
                        <th>Primary Skill</th>                                               
                        <th>Contact Number</th>
                        <th>Email ID</th>
                        <th>Failure Message</th>
                    </tr>
                </thead>
                <tbody *ngIf="failedProfiles.length != 0">
                    <tr *ngFor="let fuser of failedProfiles; let fuserRow = index">
                        <!-- <td>{{fuser?.user?.userInfoMstrId}}</td> -->
                        <td>{{fuser?.user?.firstName}}</td>
                        <td>{{fuser?.user?.lastName}}</td>
                        <td>{{fuser?.user?.locationName}}</td>
                        <td>{{fuser?.user?.experienceLevel}}</td>
                        <td>
                            <div *ngIf="fuser.user?.primarySkills.length > 0">
                                <span *ngFor="let skillName of fuser.user?.primarySkills">
                                    {{skillName}}
                                </span>
                            </div> 
                        </td>
                        <td>{{fuser.user?.contactNumber}}</td>
                        <td>{{fuser.user?.emailId}}</td>
                        <td>{{fuser?.message}}</td>
                    </tr>
                </tbody>
                <tbody *ngIf="failedProfiles.length == 0">
                    <td colspan="9" style="text-align:center; font-weight: bold; color:red;">No records to display</td>
                </tbody>
            </table>
        </div>

        <!-- <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
            <li><span>{{pager.startIndex+1}} - {{pager.endIndex+1}} of {{pager.totalItems}}</span></li>
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(1)">First</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(pager.currentPage - 1)"><img src="{{usr_img_path + 'prev.png'}}"></a>
            </li>
            <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                <a (click)="setPage(page)">{{page}}</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.currentPage + 1)"><img src="{{usr_img_path + 'next.png'}}"></a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.totalPages)">Last</a>
            </li>
        </ul> -->
    </div>
</section>