<div *ngIf="userList">
    <div class="userMgmtPage">
        <div class="pg-title"> User Management
            <span class="searchIcon">
                <input type="search" placeholder="Search with user name" [(ngModel)]="searchUser" (keyup)="SearchforUsers($event, searchUser)"/>
            </span>
        </div>
        <div class="row">
            <app-user-tiles class="col-lg-3 col-md-3 col-sm-4 col-xs-12" *ngFor="let item of pagedItems" [usersData]="item" (userEditEvent)="edituserDetails($event)">
            </app-user-tiles>
        </div>
        <!-- <app-sandboxtile *ngFor="let item of sandboxes" [tileData]="item" [skillTrackDet]="skilltrackResponse" class="col-lg-4 col-md-4 col-sm-6 col-xs-12" (sbDeleteEvent)="deleteSandbox($event)" (sbEditEvent)="editSandbox($event)"></app-sandboxtile> -->
        <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="center-always" *ngIf="fetchingData">
        <img src="{{img_path + 'Blocks.gif'}}">
    </div>
    <a class="btn-text addNew_btn" (click)="addNewUserForm()">
        <img src="{{img_path + 'add.png'}}">
    </a>
</div>

<div *ngIf="!userList">
    <!-- <app-sandboxform *ngIf="addNewSandboxbox" (closeFormEvent)="formCancelled($event)"></app-sandboxform>
        <app-sandboxform *ngIf="!addNewSandboxbox" (closeFormEvent)="formCancelled($event)" [boxEditDet]="sbDetEdit"></app-sandboxform> -->
    <app-user-form *ngIf="addNewUserDet" (closeUsrMgmtForm)="userFormCancel($event)"></app-user-form>
    <app-user-form *ngIf="!addNewUserDet" (closeUsrMgmtForm)="userFormCancel($event)" [userDtEdit]="userDtEdit"></app-user-form>
</div>
