.widget-container.fluid-height.stf-port-forwarding(ng-controller='PortForwardingCtrl')
  .heading
    span
      stacked-icon(icon='fa-random', color='color-orange')
      span(translate).pointer Port Forwarding

      button.btn.pull-right.btn-sm.btn-primary-outline(
        ng-click='addRow()')
        i.fa.fa-plus.fa-fw

  .widget-content.padded

    nothing-to-show(icon='fa-random', message='{{"No Ports Forwarded" | translate}}',
    ng-if='!reversePortForwards.length')

    div(ng-show='reversePortForwards.length')
      .port-forwarding-image
        i.fa.fa-mobile.fa-2x.fa-fw(title='{{"Device"|translate}}')
        i.fa.fa-arrow-right.fa-fw
        i.fa.fa-laptop.fa-2x.fa-fw(title='{{"Host"|translate}}')

      form(editable-form, name='portsform', onaftersave='saveTable()', oncancel='cancel()')
        table.table.table-condensed
          thead
            tr
              th(colspan='1')
                span(translate) Device
              th(colspan='3')
                span(translate) Host
              th(colspan='1')
          tbody
            tr(ng-repeat='forward in reversePortForwards track by $index')
              td(width='35%')
                div.input-group.input-group-sm
                  span.input-group-addon
                    input(type='checkbox', ng-model='forward.enabled', ng-change='applyForward(forward)')
                  input.form-control(type='text', min='0', ng-model='forward.devicePort', ng-model-options="{ updateOn: 'default blur' }", placeholder='{{"Port"|translate}}', ng-change='disableForward(forward)')
              td(width='40%')
                input.form-control.input-sm(type='text', ng-model='forward.targetHost', ng-model-options="{ updateOn: 'default blur' }", placeholder='{{"Hostname"|translate}}', ng-change='disableForward(forward)')
              td
                span :
              td(width='25%')
                input.form-control.input-sm(type='text', min='0', ng-model='forward.targetPort', ng-model-options="{ updateOn: 'default blur' }", placeholder='{{"Port"|translate}}', ng-change='disableForward(forward)')
              td
                button.btn.btn-sm.btn-danger-outline(ng-click='removeRow(forward)')
                  i.fa.fa-trash-o