.widget-container.fluid-height.stf-port-forwarding(ng-controller='PortForwardingCtrl')
  .heading
    span(ng-click='isCollapsed = !isCollapsed')
      i.fa.fa-random
      span(translate).pointer Port forwarding

    button(ng-click='forwarding = !forwarding', ng-class="{active: forwarding}").btn.btn-primary-outline.btn-xs.pull-right
      i.fa(ng-class="{'fa-arrow-circle-right': !forwarding, 'fa-times-circle': forwarding}")
      span(ng-show='forwarding', translate) Unforward
      span(ng-hide='forwarding', translate) Forward
  .widget-content.padded(collapse='isCollapsed')

    table(ng-table='portsTable').table.table-striped
      thead
        tr
          th(width='28%')
            span(translate) Device
            .button-spacer
            i.fa.fa-arrow-right.fa-fw
          th(width='44%')
            span(translate) Host
          th(width='28%')
      tbody
        tr(ng-repeat='ports in $data')
          //td(data-title='"Local" | translate').check
            label
              input(type='checkbox', ng-model='ports.targetLocal')
              span
          td
            input.form-control(type='number', min='0', ng-model='ports.devicePort', placeholder='{{"Port"|translate}}')
          td
            input.form-control(type='text', ng-model='ports.targetHost', placeholder='{{"Hostname"|translate}}', ng-disabled='ports.targetLocal')
          td
            input.form-control(type='number', min='0', ng-model='ports.targetPort', ng-change='targetPortChanged(result)', placeholder='{{"Port"|translate}}')


    //table(ng-table='deviceStatusTable', ng-hide='!devicesStatus.length').table
      tr(ng-repeat='result in $data')
        td(data-title="'Device'|translate")
          p {{ result.deviceId }}
        td(data-title="'Reachable'|translate")
          i(ng-class="{'text-status-on': result.value.connectable, 'text-status-off': !result.value.connectable}").fa.fa-circle
        td(data-title="'Connected'|translate")
          i(ng-class="{'text-status-on': result.value.connected, 'text-status-off': !result.value.connected}").fa.fa-circle
