.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

        .pull-right
          button(ng-click='control.identify()', tooltip='Find Device', tooltip-placement='bottom').btn.btn-sm.btn-info-outline
            i.fa.fa-info

          span
            button(type='button', ng-click='control.rotate(0)', tooltip='Portrait', tooltip-placement='bottom').btn.btn-sm.btn-primary-outline
              i.fa.fa-mobile
            button(type='button', ng-click='control.rotate(90)', tooltip='Landscape', tooltip-placement='bottom').btn.btn-sm.btn-primary-outline
              i.fa.fa-mobile.fa-rotate-90

          button(type='button', ng-model='showScreen', btn-checkbox).btn.btn-sm.btn-danger
            i(ng-show='showScreen', tooltip-html-unsafe='{{"Just control device"|translate}}<br /><code>⌘-⇧-O</code>', tooltip-placement='left').fa.fa-eye
            i(ng-show='!showScreen', tooltip-html-unsafe='{{"View device"|translate}}<br /><code>⌘-⇧-O</code>', tooltip-placement='left').fa.fa-eye-slash

        .device-name-container
          a.stf-vnc-device-name.pointer.unselectable.dropdown-toggle
            p
              .device-small-image
                img(ng-src='{{device.image ? "/static/devices/" + device.image : "/static/bower_components/stf-graphics/devices/small/default.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.pointer.unselectable(ng-show='groupDevices.length > 0')
            li(ng-repeat='groupDevice in groupDevices')
              a(ng-click='controlDevice(groupDevice); $event.stopPropagation()')
                .device-small-image
                  img(ng-src='{{groupDevice.image ? "/static/devices/" + groupDevice.image : "/static/bower_components/stf-graphics/devices/small/default.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
              i.fa.fa-bars
            a(ng-click='control.home()', title='{{"Home"|translate}}').btn.btn-primary.btn-lg
              i.fa.fa-home
            a(ng-click='control.back()', title='{{"Back"|translate}}').btn.btn-primary.btn-lg
              i.fa.fa-mail-reply