<!--
~ Copyright 2018-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" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
    <div class="tabular-header">
        <onos-flash id="appMsgFlash" message="{{ alertMsg }}" dwell="5000" warning="true" (closed)="alertMsg = ''"></onos-flash>
        <onos-confirm title="{{ lionFn('dlg_confirm_action') }}" message="{{ confirmMsg }}" warning="{{ strongWarning }}" (chosen)="dOk($event)"></onos-confirm>
        <h2>
            {{lionFn('title_apps')}}
            ({{ tableData.length }}
            {{ lionFn('total') }})
        </h2>
        <div class="ctrl-btns">
            <form #inputFileForm="ngForm">
                <input id="uploadFile" hidden
                       type="file" size="50" accept=".oar,.jar"
                       name="appFile" (change)="fileEvent($event)">
            </form>

            <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>

            <div class="active" (click)="triggerForm()">
                <onos-icon classes="{{ 'active-rect upload' }}"
                           iconId="upload" iconSize="42" toolTip="{{ uploadTip }}"></onos-icon>
            </div>

            <div (click)="(!!selId) ? confirmAction(AppActionEnum.ACTIVATE) : ''">
                <onos-icon classes="{{ ctrlBtnState.installed?'active-rect play':'play' }}"
                           iconId="play" iconSize="42" toolTip="{{ activateTip }}"></onos-icon>
            </div>
            <div (click)="(!!selId) ? confirmAction(AppActionEnum.DEACTIVATE) : ''">
                <onos-icon classes="{{ ctrlBtnState.active?'active-rect stop':'stop' }}"
                        iconId="stop" iconSize="42" toolTip="{{ deactivateTip }}"></onos-icon>
            </div>
            <div (click)="(!!selId) ? confirmAction(AppActionEnum.UNINSTALL) : ''">
                <onos-icon classes="{{ ctrlBtnState.selection?'active-rect garbage':'garbage' }}"
                        iconId="garbage" iconSize="42" toolTip="{{ uninstallTip }}"></onos-icon>
            </div>
            <div (click)="(!!selId) ? downloadApp() : ''">
                <onos-icon classes="{{ ctrlBtnState.selection?'active-rect 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 id="summary-list" class="summary-list" onosTableResize>
        <div class="table-header">
            <table>
                <tr>
                    <th colId="state" [ngStyle]="{width: '32px'}" class="table-icon" (click)="onSort('state')">
                        <onos-icon classes="active-sort" [iconSize]="10" [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-sort" [iconSize]="10" [iconId]="sortIcon('title')"></onos-icon>
                    </th>
                    <th colId="id" (click)="onSort('id')">{{lionFn('app_id')}}
                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('id')"></onos-icon>
                    </th>
                    <th colId="version" (click)="onSort('version')"> {{lionFn('version')}}
                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('version')"></onos-icon>
                    </th>
                    <th colId="category" (click)="onSort('category')"> {{lionFn('category')}}
                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('category')"></onos-icon>
                    </th>
                    <th colId="origin" (click)="onSort('origin')"> {{lionFn('origin')}}
                        <onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('origin')"></onos-icon>
                    </th>
                </tr>
            </table>
        </div>
        <div class="table-body">
            <table>
                <tr *ngIf="tableData.length === 0" class="no-data">
                    <td colspan="5">
                        {{annots.noRowsMsg}}
                    </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 *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="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>
    </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 }}" (closeEvent)="deselectRow($event)"></onos-appsdetails>

</div>