.interact-control.fill-height.as-table.stf-device-control(ng-controller='DeviceControlCtrl')
  .as-cell.fill-height
    .as-table.fill-height
      .stf-vnc-navbar.as-row(ng-show='!$root.basicMode')
        .stf-vnc-right-buttons.pull-right
          .btn-group
            label.btn-sm.btn-primary-outline(type='button', ng-click='tryToRotate("portrait")',
            ng-model='currentRotation', btn-radio='"portrait"').pointer
              i.fa.fa-mobile(tooltip='{{ "Portrait" | translate }} (Current rotation: {{ device.display.rotation }}°)', tooltip-placement='bottom')
            label.btn-sm.btn-primary-outline(type='button', ng-click='tryToRotate("landscape")',
              ng-model='currentRotation', btn-radio='"landscape"').pointer
              i.fa.fa-mobile.fa-rotate-90(tooltip='{{ "Landscape" | translate }} (Current rotation: {{ device.display.rotation }}°)', tooltip-placement='bottom')
          .button-spacer
          // NOTE: ui-bootstrap bug: tooltip breaks btn-checkbox so don't put in the same button
          button(type='button', ng-model='showScreen', btn-checkbox).btn.btn-sm.btn-danger
            i(ng-show='showScreen', tooltip-html-unsafe='{{"Hide Screen"|translate}}', tooltip-placement='bottom').fa.fa-eye
            i(ng-show='!showScreen', tooltip-html-unsafe='{{"Show Screen"|translate}}', tooltip-placement='bottom').fa.fa-eye-slash

        .device-name-container(dropdown)
          a.stf-vnc-device-name.pointer.unselectable.dropdown-toggle
            p
              .device-small-image
                img(ng-src='/static/app/devices/icon/x24/{{ device.image || "E30HT.jpg" }}')
              span.device-name-text {{ device.name }}
              span.caret(ng-show='groupDevices.length > 0')
            //span(ng-show='device && !device.present', translate) (Absent)

          ul.dropdown-menu(role='menu', data-toggle='dropdown', ng-show='groupDevices.length > 0').pointer.unselectable
            li(ng-repeat='groupDevice in groupDevices')
              a(ng-click='controlDevice(groupDevice); $event.stopPropagation()')
                .device-small-image
                  img(ng-src='/static/app/devices/icon/x24/{{ groupDevice.image || "E30HT.jpg" }}')
                span(ng-class='{"current-device": groupDevice.serial === device.serial }') {{ groupDevice.name }}

                span.pull-right(ng-click='kickDevice(groupDevice); $event.stopPropagation()').kick-device
                  i.fa.fa-times

      .as-row.fill-height(ng-file-drop='installFileForced($files)')
        div(ng-controller='DeviceScreenCtrl').fill-height
          device-screen(style='width: 100%; height: 100%; background: gray')

      .stf-vnc-bottom.as-row
        .controls
          .btn-group.btn-group-justified
            a(ng-click='control.menu()', title='{{"Menu"|translate}}').btn.btn-primary.btn-lg.no-transition
              i.fa.fa-bars
            a(ng-click='control.home()', title='{{"Home"|translate}}').btn.btn-primary.btn-lg.no-transition
              i.fa.fa-home
            a(ng-click='control.back()', title='{{"Back"|translate}}').btn.btn-primary.btn-lg.no-transition
              i.fa.fa-mail-reply
