<!--
~ Copyright 2014-present Open Networking Foundation
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~     http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<div id="ov-app" filedrop on-file-drop="appDropped()">
    <div class="tabular-header">
        <h2>
            {{lionFn('title_apps')}}
            ({{ tableData.length }}
            {{ lionFn('total') }})
        </h2>
        <div class="ctrl-btns">
            <div class="refresh" (click)="toggleRefresh()">
                <onos-icon classes="{{ autoRefresh?'active refresh':'refresh' }}"
                           iconId="refresh" iconSize="42" toolTip="{{ autoRefreshTip }}"></onos-icon>
            </div>
            <div class="separator"></div>

            <!--<form id="inputFileForm">-->
                <!--<input id="uploadFile"-->
                       <!--type="file" size="50" accept=".oar,.jar"-->
                       <!--file-model="appFile">-->
            <!--</form>-->

            <div class="active" trigger-form>
                <onos-icon classes="{{ 'active upload' }}"
                        iconId="upload" iconSize="42" toolTip="{{ uploadTip }}"></onos-icon>
            </div>
            <div (click)="appAction('activate')">
                <onos-icon classes="{{ ctrlBtnState.installed?'active play':'play' }}"
                           iconId="play" iconSize="42" toolTip="{{ activateTip }}"></onos-icon>
            </div>
            <div (click)="appAction('deactivate')">
                <onos-icon classes="{{ ctrlBtnState.active?'active stop':'stop' }}"
                        iconId="stop" iconSize="42" toolTip="{{ deactivateTip }}"></onos-icon>
            </div>
            <div (click)="appAction('uninstall')">
                 <!--[ngClass]="{active: ctrlBtnState.selection}">-->
                <!--tooltip tt-msg="uninstallTip"-->
                <onos-icon classes="{{ ctrlBtnState.selection?'active garbage':'garbage' }}"
                        iconId="garbage" iconSize="42" toolTip="{{ uninstallTip }}"></onos-icon>
            </div>
            <div (click)="downloadApp()">
                <onos-icon classes="{{ ctrlBtnState.selection?'active download':'download' }}"
                        iconId="download" iconSize="42" toolTip="{{ downloadTip }}"></onos-icon>
            </div>
        </div>
        <div class="search">
            <input id="searchinput" [(ngModel)]="tableDataFilter.queryStr" type="search" #search placeholder="Search"/>
                   <!--(keyup)="onSearch(search.value)" (search)="onSearch(search.value)"/>-->
            <select [(ngModel)]="tableDataFilter.queryBy">
                <!--(change)="onSearchBy($event)" (change)="search.value = ''">-->
                <option value="" disabled>Search By</option>
                <option value="$">All Fields</option>
                <option value="title">{{lionFn('title')}}</option>
                <option value="id">{{lionFn('app_id')}}</option>
                <option value="version">{{lionFn('version')}}</option>
                <option value="category">{{lionFn('category')}}</option>
                <option value="origin">{{lionFn('origin')}}</option>
            </select>
        </div>

    </div>

    <div class="summary-list" onos-table-resize>
        <table onos-flash-changes id-prop="id" width="100%">
            <tr class="table-header">
                <th colId="state" [ngStyle]="{width: '32px'}" class="table-icon" (click)="onSort('state')">
                    <onos-icon classes="active" [iconId]="sortIcon('state')"></onos-icon>
                </th>
                <th colId="icon" [ngStyle]="{width: '32px'}" class="table-icon"></th>
                <th colId="title"  (click)="onSort('title')">{{lionFn('title')}}
                    <onos-icon classes="active" [iconId]="sortIcon('title')"></onos-icon>
                </th>
                <th colId="id" (click)="onSort('id')">{{lionFn('app_id')}}
                    <onos-icon classes="active" [iconId]="sortIcon('id')"></onos-icon>
                </th>
                <th colId="version" (click)="onSort('version')"> {{lionFn('version')}}
                    <onos-icon classes="active" [iconId]="sortIcon('version')"></onos-icon>
                </th>
                <th colId="category" (click)="onSort('category')"> {{lionFn('category')}}
                    <onos-icon classes="active" [iconId]="sortIcon('category')"></onos-icon>
                </th>
                <th colId="origin" (click)="onSort('origin')"> {{lionFn('origin')}}
                    <onos-icon classes="active" [iconId]="sortIcon('origin')"></onos-icon>
                </th>
            </tr>

            <tr *ngIf="tableData.length === 0" class="no-data">
                <td colspan="5">
                    {{annots.no_rows_msg}}
                </td>
            </tr>
            <!-- See https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
                Angular has dropped the filter and order by pipe that were present in
                AngularJS - filter and sort the data at source instead -->
            <tr class="table-body" *ngFor="let app of tableData | filter: tableDataFilter"
                (click)="selectCallback($event, app)"
                [ngClass]="{selected: app.id === selId, 'data-change': isChanged(app.id)}">
                <td class="table-icon">
                    <onos-icon iconId="{{app._iconid_state}}"></onos-icon>
                </td>
                <td class="table-icon">
                    <!-- The path below gets the app icon from the old GUI path -->
                    <img src="../../ui/rs/applications/{{app.icon}}/icon"
                                            height="24px" width="24px" />
                </td>
                <td>{{ app.title }}</td>
                <td>{{ app.id }}</td>
                <td>{{ app.version }}</td>
                <td>{{ app.category }}</td>
                <td>{{ app.origin }}</td>
            </tr>
        </table>

    </div>
    <!-- There are 2 ways this component can be included
     1) Insert it in to the ngFor above and have it created as the row is rendered
        for the row that has a selId != '' OR
     2) Include it here and let selId dictate its state
     The advantage in 2) is that panel can be animated in and out, as it is not
     killed every time the selection changes.
     -->
    <onos-appsdetails  class="floatpanels" id="{{ selId }}"></onos-appsdetails>

</div>