<div class="container" *ngIf="collegeData">
    <div class="padding-top-30 ">
        <div class="row">
            <div class="pgTitle pull-left"> Colleges list</div>
            <div class="pull-right padding-top-16">
                <!-- <button class="btn btn-circle"><img src="{{usr_img_path +'Search_icon.png'}}" class="img-responsive" alt="" /></button> (click)="showLpFilter()"-->
                <!-- <button class="btn btn-circle"><img src="{{usr_img_path +'Filter.png'}}" class="img-responsive" alt="" /></button> -->
                <mat-slide-toggle class="example-margin" (change)="changeEvent($event)">
                    Inactive Colleges
                </mat-slide-toggle>
                <button class="btn btn-tg-left" (click)='toggleCoListView()'><img src="{{usr_img_path +'format_list_bulleted.png'}}" class="img-responsive" alt="" /></button>
                <button class="btn btn-tg-right" (click)='toggleCoGridView()'><img src="{{usr_img_path + 'ion-grid.png'}}" class="img-responsive" alt="" /></button>
            </div>
        </div>
    </div>
    <div class="row" *ngIf="tilesDisplay">
        <app-college-tiles class="col-lg-4 col-md-4 col-sm-6 col-xs-12" *ngFor="let colg of pagedItems; let i= index" [coTilesData]="colg" [coTilesIndex]="i" (coDeleteEvent)="deleteCollegeData($event)" (coEditEvent)="editCollegeData($event)" [colgStatus]="inacClData"></app-college-tiles>
    </div>
    <div class="row" *ngIf="!tilesDisplay">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th (click)="sortFn('colg.primaryAssessCount')">&nbsp; &nbsp;</th>
                    <th colspan="2" (click)="sort('colg.name')">College Name</th>
                    <th (click)="sortFn('colg.city')">City</th>
                    <th (click)="sortFn('colg.status')">Status</th>
                    <!-- <th (click)="sortFn('colg.technicalAssessCount')">Technical</th>
                    <th (click)="sortFn('colg.businessAssessCount')">Business</th> -->
                    <th>&nbsp; &nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let tcolg of pagedItems; let i=index" class="styled_lb" [style.borderLeftColor]="myColor[i]">
                    <td><input type="checkbox" /></td>
                    <td colspan="2">{{tcolg.collegeName}}</td>
                    <td>{{tcolg.city}}</td>
                    <td>{{tcolg.status}}</td>
                    <!-- <td>{{colg.technicalAssessCount}}</td>
                    <td>{{colg.businessAssessCount}}</td> -->
                    <td>
                        <span class="pull-right" *ngIf="rowIndex == i">
                        <mat-icon *ngIf="!inacClData" (click)="deleteTabCollegeData(tcolg, i)">delete</mat-icon>
                        <mat-icon (click)="editTabCollegeData(tcolg, i)"> edit</mat-icon>
                    </span>
                        <span class="pull-right iconDiv" (click)="showOtherIconsTable(i)" *ngIf="rowIndex != i">
                        <mat-icon>
                            more_vert
                        </mat-icon>
                    </span>
                    </td>
                </tr>
            </tbody>
            <!-- <tbody *ngIf="colleges.length == -1">
                <tr>
                    <td colspan=6> No Records Available</td>

                </tr>
            </tbody> -->
        </table>
    </div>
    <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 center-always">
        <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>
    <button id="delCoConfModal" [hidden]="true" data-toggle="modal" data-target="#confirmDialog">Open Del Modal</button>
    <app-dialog [title]="dialogData.title" [text]="dialogData.text" (confirm)="confirmJrDelete($event)"></app-dialog>
    <a class="btn-text addNew_btn" (click)="addCollegeData()">
        <img src="{{img_path + 'add.png'}}">
    </a>
</div>

<div *ngIf="!collegeData">
    <app-college-form *ngIf="addNewCollege" (closeCoForm)="formCancelled($event)"></app-college-form>
    <app-college-form *ngIf="!addNewCollege" (closeCoForm)="formCancelled($event)" [coEditDet]="coEditDet"></app-college-form>
    <!--  -->
    <!-- [boxEditDet]="sbDetEdit" -->
</div>