<!-- partial HTML -->
<div id="ov-roadm-flow" class="less-gap" ng-init="queryShowItems()">

    <div class="tabular-header">
        <h2>Connections for Optical Device {{devId}} ({{tableData.length}} total)</h2>
        <div class="ctrl-btns">
            <div class="active"
                 icon icon-id="plus" icon-size="42"
                 tooltip tt-msg="addFlowTip"
                 ng-click="displayFlowForm()"></div>

            <div class="refresh" ng-class="{active: autoRefresh}"
                 icon icon-id="refresh" icon-size="42"
                 tooltip tt-msg="autoRefreshTip"
                 ng-click="toggleRefresh()"></div>
            <div class="separator"></div>

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

            <div class="current-view"
                 icon icon-id="flowTable" icon-size="42"
                 tooltip tt-msg="flowTip"></div>

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

    <div class="summary-list" onos-table-resize>

        <div class="table-header" onos-sortable-header>
            <table>
                <tr>
                    <td col-width="30px"></td>
                    <td colId="flowId" sortable col-width="180px">Flow ID </td>
                    <td colId="appId" sortable>App ID </td>
                    <td colId="priority" sortable>Priority </td>
                    <td colId="timeout" sortable>Timeout </td>
                    <td colId="permanent" sortable>Permanent </td>
                    <td colId="state" sortable>State </td>
                    <td colId="inPort" sortable>In Port </td>
                    <td colId="outPort" sortable>Out Port </td>
                    <td colId="multiplier" ng-show="showChannel" sortable>Channel </td>
                    <td colId="spacing" ng-show="showChannel">Spacing <span class="units">(GHz)</span> </td>
                    <td colId="currentPower" col-width="180px">Current Power <span class="units">(0.01dBm)</span></td>
                    <td colId="attenuation" col-width="200px" ng-show="showAttenuation">Attenuation <span class="units">(0.01dB)</span></td>
                </tr>
            </table>
        </div>

        <div class="table-body">
            <table>
                <tr ng-if="!tableData.length" class="no-data">
                    <td colspan="13">
                        {{annots.no_rows_msg}}
                    </td>
                </tr>

                <tr ng-repeat="flow in tableData track by $index"
                    ng-class="{selected: flow.id === selId}">
                    <td class="delete-icon" ng-click="deleteFlow($event, flow)">&#215;</td>
                    <td>{{flow.flowId}}</td>
                    <td>{{flow.appId}}</td>
                    <td>{{flow.priority}}</td>
                    <td>{{flow.timeout}}</td>
                    <td>{{flow.permanent}}</td>
                    <td>{{flow.state}}</td>
                    <td>{{flow.inPort}}</td>
                    <td>{{flow.outPort}}</td>
                    <td ng-show="showChannel">{{flow.multiplier}}{{flow.channdlFrequency}}</td>
                    <td ng-show="showChannel">{{flow.spacing}}</td>
                    <td>{{flow.currentPower}}</td>
                    <td class="editable" roadm-att="flow" roadm-set-att="setAttenuation(flow, targetVal, cb)" ng-show="showAttenuation"></td>
                </tr>
            </table>
        </div>

    </div>

    <div class="flow-form" ng-controller="FlowFormController as form" ng-show="showFlowForm">
        <div class="delete-icon" ng-click="hideFlowForm()">&#215;</div>
        <form>
            <label>Priority</label><input type="number" ng-model="form.flow.priority" />
            <span class="form-error" ng-show="form.priorityError" >{{form.priorityMessage}}</span><br />

            <label>Is Permanent</label><input type="checkbox" ng-model="form.flow.permanent" /><br />

            <label>Timeout</label><input type="number" ng-model="form.flow.timeout" ng-disabled="form.flow.permanent"/>
            <span class="form-error" ng-show="form.timeoutError" >{{form.timeoutMessage}}</span><br />

            <label>In Port</label><input type="number" ng-model="form.flow.inPort" />
            <span class="form-error" ng-show="form.inPortError">{{form.inPortMessage}}</span><br />

            <label>Out Port</label><input type="number" ng-model="form.flow.outPort" />
            <span class="form-error" ng-show="form.outPortError">{{form.outPortMessage}}</span>
            <span class="form-error" ng-show="form.connectionError">{{form.connectionMessage}}</span><br />

            <label>Include Channel</label><input type="checkbox" ng-model="showChannel" /><br />

            <label>Channel Spacing</label><select ng-model="form.flow.spacing" ng-disabled="!showChannel" ng-options="x.freq for x in form.spacings"></select>
            <span class="form-error" ng-show="form.spacingError">{{form.spacingMessage}}</span><br />

            <label>Spacing Multiplier</label><input type="number" ng-model="form.flow.multiplier" ng-disabled="!showChannel"/>
            <span class="form-error" ng-show="form.multiplierError">{{form.multiplierMessage}}</span>
            <span class="form-error" ng-show="form.channelError">{{form.channelMessage}}</span><br />

            <label>Include Attenuation</label><input type="checkbox" ng-model="showAttenuation" /><br />

            <label>Attenuation</label><input type="number" ng-model="form.flow.attenuation" ng-disabled="!showAttenuation"/>
            <span class="form-error" ng-show="form.attenuationError">{{form.attenuationMessage}}</span><br />
        </form>
        <button type="submit" class="submit" ng-click="form.createFlow(form.flow)">Create Connection</button>
    </div>

</div>