%div{ "ng-controller": 'enterprisesCtrl' }
  .row{ 'ng-hide' => '!loaded' }
    .controls{ :class => "sixteen columns alpha", :style => "margin-bottom: 15px;" }
      .four.columns.alpha
        %input{ :class => "fullwidth", :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => t('.search_placeholder') }
      .six.columns  
      -# = render 'admin/shared/bulk_actions_dropdown'
      .three.columns  
      %columns-dropdown{ action: "#{controller_name}_#{action_name}" }
  .row{ 'ng-if' => '!loaded' }
    .sixteen.columns.alpha#loading
      = render partial: "components/admin_spinner"
      %h1
        = t('.loading_enterprises')
  .row{ :class => "sixteen columns alpha", 'ng-show' => 'loaded && filteredEnterprises.length == 0'}
    %h1#no_results= t('.no_enterprises_found')

  .row{ "ng-show": "loaded && filteredEnterprises.length > 0" }
    %table.index#enterprises
      %col.name{ width: "28%", "ng-show": 'columns.name.visible' }
      %col.producer{ width: "18%", "ng-show": 'columns.producer.visible' }
      %col.package{ width: "18%", "ng-show": 'columns.package.visible' }
      %col.status{ width: "18%", "ng-show": 'columns.status.visible' }
      %col.manage{ width: "18%", "ng-show": 'columns.manage.visible' }
      %thead
        %tr{ "ng-controller": "ColumnsCtrl" }
          %th.name{ "ng-show": 'columns.name.visible' }=t('admin.name')
          %th.producer{ "ng-show": 'columns.producer.visible' }=t('.producer?')
          %th.package{ "ng-show": 'columns.package.visible' }=t('.package')
          %th.status{ "ng-show": 'columns.status.visible' }=t('.status')
          %th.manage{ "ng-show": 'columns.manage.visible' }=t('.manage')
      %tbody.panel-ctrl{ id: "e_{{enterprise.id}}", object: "enterprise", "ng-repeat": "enterprise in filteredEnterprises = ( allEnterprises | filter:{ name: quickSearch } )" }
        %tr.enterprise{ "ng-class-even": "'even'", "ng-class-odd": "'odd'" }
          %td.name{ "ng-show": 'columns.name.visible' }
            %span{ "ng-bind": "::enterprise.name" }
          %td.producer.panel-toggle.text-center{ name: "producer", "ng-show": 'columns.producer.visible', "ng-class": "{error: enterprise.producerError}" }
            %h5{ "ng-bind": "enterprise.producer" }
          %td.package.panel-toggle.text-center{ name: "package", "ng-show": 'columns.package.visible', "ng-class": "{error: enterprise.packageError}" }
            %h5{ "ng-bind": "enterprise.package" }
          %td.status.panel-toggle.text-center{ name: "status", "ng-show": 'columns.status.visible' }
            %i.icon-status{ "ng-class": "enterprise.status" }
          %td.manage{ "ng-show": 'columns.manage.visible' }
            %a.button.fullwidth{ "ng-href": '{{::enterprise.edit_path}}' }
              = t('.manage_link')
              %i.icon-arrow-right

        %tr.panel-row{ object: "enterprise", panels: "{producer: 'enterprise_producer', package: 'enterprise_package', status: 'enterprise_status'}" }