openfoodnetwork/app/views/admin/enterprises/_enterprise_user_index.html.haml

%div{ ng: { app: 'admin.enterprises', 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 => 'Search By Name' }
      .six.columns  
      -# = render 'admin/shared/bulk_actions_dropdown'
      .three.columns  
      = render 'admin/shared/columns_dropdown'
  .row{ 'ng-if' => '!loaded' }
    .sixteen.columns.alpha#loading
      %img.spinner{ src: "/assets/spinning-circles.svg" }
      %h1 LOADING ENTERPRISES
  .row{ :class => "sixteen columns alpha", 'ng-show' => 'loaded && filteredEnterprises.length == 0'}
    %h1#no_results No enterprises found.


  .row{ ng: { show: "loaded && filteredEnterprises.length > 0" }, bindonce: true }
    %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' } }
            Name
          %th.producer{ ng: { show: 'columns.producer.visible' } } Producer?
          %th.package{ ng: { show: 'columns.package.visible' } } Package
          %th.status{ ng: { show: 'columns.status.visible' } } Status
          %th.manage{ ng: { show: 'columns.manage.visible' } } Manage
      %tbody{ :id => "e_{{enterprise.id}}", ng: { repeat: "enterprise in filteredEnterprises = ( allEnterprises | filter:{ name: quickSearch } )", controller: 'EnterpriseIndexRowCtrl' } }
        %tr.enterprise.panel-toggle-row{ object: "enterprise", ng: { class: { even: "'even'", odd: "'odd'"} } }
          %td.name{ ng: { show: 'columns.name.visible' } }
            %span{ bo: { bind: "enterprise.name" } }
          %td.producer.panel-toggle.text-center{ ng: { show: 'columns.producer.visible', class: "{error: producerError}" }, name: "producer" }
            %h5{ ng: { bind: "producer" } }
          %td.package.panel-toggle.text-center{ ng: { show: 'columns.package.visible', class: "{error: packageError}" }, name: "package" }
            %h5{ ng: { bind: "package" } }
          %td.status.panel-toggle.text-center{ ng: { show: 'columns.status.visible' }, name: "status" }
            %i.icon-status{ bo: { class: "status" } }
          %td.manage{ ng: { show: 'columns.manage.visible' } }
            %a.button.fullwidth{ bo: { href: 'enterprise.edit_path' } }
              Manage
              %i.icon-arrow-right

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