<!--
  ~ Copyright 2017-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-pipeconf">
    <div class="tabular-header">
        <h2>
            Pipeconf for Device {{devId || "(No device selected)"}}
        </h2>

        <div class="ctrl-btns">
            <div class="refresh" ng-class="{active: autoRefresh}"
                 icon icon-size="42" icon-id="refresh"
                 tooltip tt-msg="autoRefreshTip"
                 ng-click="autoRefresh = !autoRefresh"></div>

            <div class="separator"></div>

            <div class="active"
                 icon icon-id="deviceTable" icon-size="42"
                 tooltip tt-msg="deviceTip"
                 ng-click="nav('device')"></div>

            <div class="active"
                 icon icon-id="flowTable" icon-size="42"
                 tooltip tt-msg="flowTip"
                 ng-click="nav('flow')"></div>

            <div class="active"
                 icon icon-id="portTable" icon-size="42"
                 tooltip tt-msg="portTip"
                 ng-click="nav('port')"></div>

            <div class="active"
                 icon icon-id="groupTable" icon-size="42"
                 tooltip tt-msg="groupTip"
                 ng-click="nav('group')"></div>

            <div class="active"
                 icon icon-id="meterTable" icon-size="42"
                 tooltip tt-msg="meterTip"
                 ng-click="nav('meter')"></div>

            <div class="current-view"
                 icon icon-id="pipeconfTable" icon-size="42"
                 tooltip tt-msg="pipeconfTip"></div>
        </div>
    </div>
    <div id="pipeconf-info" auto-height>
        <div id="pipeconf-basic">
            <h2>Basic information</h2>
            <table class="pipeconf-table">
                <tr>
                    <th class="text-center" style="width: 160px">Name</th>
                    <th>Info</th>
                </tr>
                <tr ng-show="collapsePipeconf">
                    <td colspan="2" class="text-center">....</td>
                </tr>
                <tr ng-show="pipeconf === null">
                    <td colspan="2" class="no-data">
                        No PiPipeconf for this device
                    </td>
                </tr>
                <tr ng-show-start="!collapsePipeconf && pipeconf !== null">
                    <td class="text-center">ID</td>
                    <td>{{pipeconf.id}}</td>
                </tr>
                <tr>
                    <td class="text-center">Behaviors</td>
                    <td>{{pipeconf.behaviors.join(", ")}}</td>
                </tr>
                <tr ng-show-end>
                    <td class="text-center">Extensions</td>
                    <td>{{pipeconf.extensions.join(", ")}}</td>
                </tr>
            </table>
        </div>
        <!-- ng-show-start for checking pipeconf !== null -->
        <h2 ng-show-start="pipeconf !== null">Pipeline Model</h2>
        <div id="pipeconf-headers">
            <h3>Headers</h3>
            <div ng-show="!collapseHeaders"
                 class="collapse-btn" icon icon-id="plus" icon-size="30"
                 ng-click="collapseHeaders = !collapseHeaders"></div>
            <div ng-show="collapseHeaders"
                 class="collapse-btn" icon icon-id="minus" icon-size="30"
                 ng-click="collapseHeaders = !collapseHeaders"></div>
            <table class="pipeconf-table">
                <tr>
                    <th style="width: 160px">Name</th>
                    <th class="text-center" style="width: 100px">Is metadata</th>
                    <th class="text-center" style="width: 100px">Index</th>
                    <th>Header type</th>
                </tr>
                <tr ng-show="collapseHeaders">
                    <td colspan="4" class="clickable text-center"
                        ng-click="collapseHeaders = !collapseHeaders">....</td>
                </tr>
                <tr ng-show="!collapseHeaders && pipelineModel.headers.length === 0">
                    <td colspan="4" class="no-data">No Data</td>
                </tr>
                <tr ng-show="!collapseHeaders"
                    ng-repeat="header in pipelineModel.headers"
                    ng-click="headerSelectCb($event, header)"
                    ng-class="{selected: header.name === selectedId.name && selectedId.type === 'header'}"
                    class="clickable">
                    <td>{{header.name}}</td>
                    <td class="text-center">{{header.isMetadata}}</td>
                    <td class="text-center">{{header.index}}</td>
                    <td>{{header.type.name}}</td>
                </tr>
            </table>
        </div>
        <div id="pipeconf-actions">
            <h3>Actions</h3>
            <div ng-show="!collapseActions"
                 class="collapse-btn" icon icon-id="plus" icon-size="30"
                 ng-click="collapseActions = !collapseActions"></div>
            <div ng-show="collapseActions"
                 class="collapse-btn" icon icon-id="minus" icon-size="30"
                 ng-click="collapseActions = !collapseActions"></div>
            <table class="pipeconf-table">
                <tr>
                    <th style="width: 160px">Name</th>
                    <th>Action parameters</th>
                </tr>
                <tr ng-show="collapseActions">
                    <td colspan="2" class="clickable text-center"
                        ng-click="collapseActions = !collapseActions">....</td>
                </tr>
                <tr ng-show="!collapseActions && pipelineModel.actions.length === 0">
                    <td colspan="2" class="no-data">No Data</td>
                </tr>
                <tr ng-show="!collapseActions"
                    ng-repeat="action in pipelineModel.actions"
                    ng-click="actionSelectCb($event, action)"
                    ng-class="{selected: action.name === selectedId.name && selectedId.type === 'action'}"
                    class="clickable">
                    <td style="width: 160px">{{action.name}}</td>
                    <td ng-show="action.params.length != 0">{{ mapToNames(action.params).join(', ') }}</td>
                    <td ng-show="action.params.length == 0">No action params</td>
                </tr>
            </table>
        </div>

        <div id="pipeconf-tables" ng-show-end>
            <h3>Tables</h3>
            <div ng-show="!collapseTables" class="collapse-btn"
                 icon icon-id="plus" icon-size="30"
                 ng-click="collapseTables = !collapseTables"></div>
            <div ng-show="collapseTables" class="collapse-btn"
                 icon icon-id="minus" icon-size="30"
                 ng-click="collapseTables = !collapseTables"></div>
            <table class="pipeconf-table">
                <tr>
                    <th class="text-center" style="width: 160px">Name</th>
                    <th class="text-center" style="width: 100px">Max size</th>
                    <th class="text-center" style="width: 100px">Has Counters</th>
                    <th class="text-center" style="width: 100px">Support Aging</th>
                    <th>Match fields</th>
                    <th>Actions</th>
                </tr>
                <tr ng-show="collapseTables">
                    <td colspan="6" class="clickable text-center"
                        ng-click="collapseTables = !collapseTables">....</td>
                </tr>
                <tr ng-show="!collapseTables && pipelineModel.tables.length === 0">
                    <td colspan="6" class="no-data">No Data</td>
                </tr>
                <tr ng-show="!collapseTables"
                    ng-repeat="table in pipelineModel.tables"
                    ng-click="tableSelectCb($event, table)"
                    ng-class="{selected: table.name === selectedId.name && selectedId.type === 'table'}"
                    class="clickable">
                    <td class="text-center">{{table.name}}</td>
                    <td class="text-center">{{table.maxSize}}</td>
                    <td class="text-center">{{table.hasCounters}}</td>
                    <td class="text-center">{{table.supportAging}}</td>
                    <td ng-show="table.matchFields.length != 0">
                        {{matMatchFields(table.matchFields).join(', ')}}
                    </td>
                    <td ng-show="table.matchFields.length == 0">No match fields</td>
                    <td ng-show="table.actions.length != 0">{{table.actions.join(", ")}}</td>
                    <td ng-show="table.actions.length == 0">No table actions</td>
                </tr>
            </table>
        </div>
        <!-- ng-show-end for checking pipeconf !== null -->
    </div>
    <pipeconf-view-detail-panel></pipeconf-view-detail-panel>
</div>