.stf-device-list
  .row.stf-stats-container.unselectable
    .col-md-12
      device-list-stats(tracker='tracker')

  .row.unselectable
    .col-md-12
      .widget-container.fluid-height.stf-device-list-tabs
        .widget-content.padded

          .filtering-buttons
            datalist(id='searchFields')
              select(name='searchFields')
                option(ng-repeat='column in columns', ng-value='column.name + ": "',
                ng-bind='columnDefinitions[column.name].title | translate')
            input(type='search', autosave='deviceFilter'
              name='deviceFilter', ng-model='search.deviceFilter', ng-change='applyFilter(search.deviceFilter)',
              ng-model-options='{debounce: 150}'
              autocorrect='off', autocapitalize='off', spellcheck='false',
              list='searchFields', multiple, focus-element='search.focusElement',
              text-focus-select, accesskey='4').form-control.input-sm.device-search.pull-right

            span.pull-right(ng-if='activeTabs.details && !$root.basicMode')
              .btn-group(dropdown).pull-right
                button.btn.btn-sm.btn-primary-outline(type='button', dropdown-toggle)
                  i.fa.fa-columns
                  span(ng-bind='"Customize"|translate')

                ul.dropdown-menu(role='menu').pointer.stf-device-details-customize
                  li(ng-repeat='column in columns track by column.name',
                  ng-hide='!adminMode && columnDefinitions[column.name].admin',
                  ng-click='$event.stopPropagation()')
                    label.checkbox.pointer
                      input(type='checkbox', ng-model='column.selected')
                      span(ng-bind='columnDefinitions[column.name].title | translate')
                  li
                    button(ng-click='reset()').btn.btn-xs.btn-danger-outline
                      i.fa.fa-trash-o
                      span(ng-bind='"Reset"|translate')

          tabset.overflow-auto.device-list-active-tabs(ng-if='activeTabs')
            tab(active='activeTabs.icons', select='focusSearch()')
              tab-heading
                i.fa.fa-th-large
                span(translate) Devices
              div.device-list-devices-content(ng-if='activeTabs.icons').selectable

                device-list-icons(tracker='tracker', columns='columns', sort='sort', filter='filter')

            tab(active='activeTabs.details', select='focusSearch()', ng-if='!$root.basicMode')
              tab-heading
                i.fa.fa-list
                span(translate) Details
              div.device-list-details-content(ng-if='activeTabs.details').selectable

                device-list-details(tracker='tracker', columns='columns', sort='sort', filter='filter').selectable