.widget-container.fluid-height(ng-controller='ScreenshotsCtrl').stf-screenshots
  .heading
    button.btn.btn-sm.btn-primary-outline(ng-click='takeScreenShot()',
    title='{{"Take Screenshot"|translate}}')
      i.fa.fa-camera
      span(translate) Screenshot
    //button.btn.btn-sm.btn-info-outline(ng-click='takePageShot()',
      title='{{"Take Pageshot (Needs WebView running)"|translate}}',
      ng-if='$root.platform == "web" && $root.browser == "webview"')
      i.fa.fa-camera-retro(translate)
      span(translate) Pageshot

    .button-spacer

    clear-button(ng-click='clear()', ng-disabled='!screenshots.length')

    .button-spacer

    .pull-right
      button.btn.btn-primary-outline.btn-sm.transparent-border(
        ng-click='zoom({min: 80, step: -50})',
        ng-disabled='!screenshots.length')
        i.fa.fa-minus

      input(type='range', ng-model='screenShotSize', min='80', max='480', step='10',
      ng-model-options='{ updateOn: "default blur", debounce: { default: 100, blur: 0} }',
      ng-disabled='!screenshots.length').zoom-range

      button.btn.btn-primary-outline.btn-sm.transparent-border(
        ng-click='zoom({max: 480, step: 50})',
        ng-disabled='!screenshots.length')
        i.fa.fa-plus

  .widget-content.padded
    nothing-to-show(message='{{"No screenshots taken"|translate}}', icon='fa-camera', ng-show='!screenshots.length')

    ul.screenshots-icon-view.clear-fix.selectable
      li.screenshots-icon-item(ng-repeat='shot in screenshots').cursor-select
        h5 {{ device.name }}
        h6 {{ shot.body.date | date:'HH:mm:ss' }}
        a(ng-href='{{ shot.body.href }}', target='_blank')
          img(ng-src='{{ shot.body.href + shotSizeParameter(480, 1) }}',
          ng-srcset='{{ shot.body.href + shotSizeParameter(480, 2) }} 2x').screenshot-image

    .clearfix