<h1>Sensors</h1>

<!-- <div class="ui-g">
    <div class="ui-g-12">
        <p-panel [showHeader]="false" *ngIf="paramTarget">
            <div class="ui-key-value">
                <span>Status</span>
                <span class="ng-star-inserted">
                    <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>
            </div>
            <of-key-value [key]="'Alias'" [value]="paramTarget.target.displayName" class="ui-key-value"></of-key-value>
            <of-key-value [key]="'Description'" [value]="paramTarget.target.description" class="ui-key-value"></of-key-value>
            <of-key-value [key]="'Type'" [value]="paramTarget.infraType.name" class="ui-key-value"></of-key-value>
            <of-key-value [key]="'Created at'" [value]="paramTarget.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>
            <of-key-value [key]="'Sensors'" [value]="'todo: count'" class="ui-key-value"></of-key-value>
        </p-panel>
    </div>
</div> -->

<div *ngIf="page" class="ui-g">
    <div class="ui-g-12 ui-g-nopad">
        <div class="ui-g">
            <div class="ui-g-12 ui-md-3">
                <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large" (click)="addSensor.emit()"></button>
            </div>
            <div class="ui-g-12 ui-md-9">
                <div style="float: right; margin-top: 30px;">
                    <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
                    <i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Down
                    <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn
                    <i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error
                </div>
            </div>
        </div>
    </div>
    <div class="ui-g-12 ui-md-3">
        <p-panel [showHeader]="false">
            <div class="ui-g">
                <h3>Search</h3>
                <div class="ui-g-12 ui-inputgroup ui-bottom-space-10">
                    <span class="md-inputfield">
                        <input type="text" pInputText [(ngModel)]="filteredName">
                        <label>IP or Application name</label>
                    </span>
                </div>

                <div class="ui-g-12 ui-bottom-space-10">
                    <p-multiSelect [options]="targetOptions" [(ngModel)]="selectedTargets"></p-multiSelect>
                    <!-- <p-multiSelect [options]="targetOptions" (onChange)="onTargetFilterSelect($event)"></p-multiSelect> -->
                </div>


                <div class="ui-g-6">
                    <p-checkbox name="cg" value="Active" label="Active" [(ngModel)]="selectedStatus"></p-checkbox>
                </div>
                <div class="ui-g-6">
                    <p-checkbox name="cg" value="Inactive" label="Inactive" [(ngModel)]="selectedStatus"></p-checkbox>
                </div>
                <button pButton type="button" label="Search" class="ui-button-secondary ui-top-space-10" (click)="onSearch()"></button>
            </div>
        </p-panel>
    </div>

    <div class="ui-g-12 ui-md-9">
        <p-dataList [value]="targetSensors" [paginator]="true" styleClass="ui-sensors-datalist" [rows]="10">
            <!-- <p-header>
                List of Cars
            </p-header> -->
            <ng-template let-item pTemplate="item">
                <div class="clearfix ui-sensors ui-bottom-border-1">
                    <div class="ui-g-12 ui-md-3 ui-lg-3 ui-sensor">
                        <i class="fa ui-icon-devices ui-icon-lg"></i>
                        <br> {{item.target.id}} - {{item.target.displayName}}
                    </div>
                    <div class="ui-g-12 ui-md-9 ui-lg-9 ui-sensors-details">
                        <div class="ui-g">
                            <div class="ui-g-10">
                                <div *ngFor="let sensor of item.sensors" class="ui-g-12">
                                    <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>
                                    <a href="javascript:void(0)" (click)="select.emit(sensor)">{{sensor.crawler.name}} | {{sensor.itemCount}} items | {{sensor.status.name}}</a>
                                </div>
                            </div>
                            <div class="ui-g-2" style="text-align: center !important">
                                <div style="width:14px; height:14px; margin: auto;">
                                    <button type="button" pButton icon="ui-icon-add" (click)="addSensor.emit(item.target)"></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
        </p-dataList>

        <!-- <p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
            <ng-template pTemplate="header">
                <tr>
                    <th>No.</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th>Crawler</th>
                    <th>Items</th>
                    <th>Created at</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
                <tr [pSelectableRow]="sensor">
                    <td>{{rowIndex + 1}}</td>
                    <td>{{sensor.Description}}</td>
                    <td>{{sensor.status.name}}</td>
                    <td>{{sensor.crawler.name}}</td>
                    <td>???</td>
                    <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
                </tr>
            </ng-template>
        </p-table> -->
    </div>
</div>