.filters.sixteen.columns.alpha.omega
  .filter.four.columns.alpha
    %label{for: 'query', ng: {class: '{disabled: !hub_id}'} }=t('admin.quick_search')
    %br
    %input.fullwidth{type: "text", id: 'query', ng: {model: 'query', disabled: '!hub_id'} }
  .filter_select.three.columns
    %label{for: 'hub_id', ng: {bind: "hub_id ? '#{t('admin.shop')}' : '#{t('admin.variant_overrides.index.select_a_shop')}'" } }
    %br
    %select.select2.fullwidth#hub_id{name: 'hub_id', ng: {model: 'hub_id', options: 'hub.id as hub.name for (id, hub) in hubs' } }
  .filter_select.three.columns
    %label{for: 'producer_filter', ng: {class: '{disabled: !hub_id}'} }=t('admin.producer')
    %br
    %input.ofn-select2.fullwidth{id: 'producer_filter', type: 'number', data: 'producers', blank: "{id: 0, name: '#{t(:all)}'}", ng: {model: 'producerFilter', disabled: '!hub_id' } }
  .filter_select.three.columns
    %label{ :for => 'import_date_filter', ng: {class: '{disabled: !hub_id}'} } #{t('admin.variant_overrides.index.import_date')}
    %br
    %select.fullwidth{id: 'import_date_filter', 'ofn-select2-min-search' => 5, ng: {model: 'importDateFilter', options: 'date.id as date.name for date in import_dates', disabled: '!hub_id', init: "import_dates = #{@import_dates}"} }
      %options{value: '0', selected: 'selected'} #{t(:all)}
  -# .filter_select{ :class => "three columns" }
  -#   %label{ :for => 'distributor_filter' }Hub
  -#   %br
  -#   %select{ :class => "three columns alpha", :id => 'distributor_filter', 'select2-min-search' => 5, 'ng-model' => 'distributorFilter', 'ng-options' => 'd.id as d.name for d in distributors'}
  -# .filter_select{ :class => "three columns" }
  -#   %label{ :for => 'order_cycle_filter' }Order Cycle
  -#   %br
  -#   %select{ :class => "three columns alpha", :id => 'order_cycle_filter', 'select2-min-search' => 5, 'ng-model' => 'orderCycleFilter', 'ng-options' => 'oc.id as oc.name for oc in orderCycles', 'confirm-change' => "confirmRefresh()", 'ng-change' => 'refreshData()'}
  .filter_clear.three.columns.omega
    %label{ :for => 'clear_all_filters' }
    %br
    %input.red.fullwidth{ :type => 'button', :id => 'clear_all_filters', :value => "#{t('admin.clear_all')}", ng: { click: "resetSelectFilters()", disabled: '!hub_id'} }
