<div class="panel panel-default">
    <div class="panel-body">
        <table class="table">
            <tr>
                <th>Type</th>
                <th>Description</th>
                <th>Last Online</th>
                <th>Enrollment</th>
                <th></th>
            </tr>
            <tr *ngFor="let item of items">
                <td>
                    {{item.deviceType}}
                </td>
                <td>
                    {{item.description}}
                </td>
                <td>
                    <p *ngIf="item.isOnline">Online Now</p>
                    <p *ngIf="!item.isOnline && item.lastOnline">
                        {{item.lastOnline | date:'HH:mm dd-MMM-yyyy'}}</p>
                    <p *ngIf="!item.isOnline && !item.lastOnline">Never Connected</p>

                </td>
                <td>
                    <button class="btn"
                            [class.btn-success]="item.isEnrolled"
                            [class.btn-warning]="!item.isEnrolled"
                            (click)='toggleEnrollClicked(item)'>
                        {{item.isEnrolled ? "Enrolled" : "Not Enrolled"}}
                    </button>
                </td>
                <td>
                    <div class="btn btn-default" (click)='deleteDeviceClicked(item)'>
                        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>