- content_for :page_title do
  %h1.page-title Customers

= admin_inject_shops

%div{ ng: { app: 'admin.customers', controller: 'customersCtrl' } }
  .row{ ng: { hide: "loaded() && filteredCustomers.length > 0" } }
    .five.columns.alpha
      %h3 Please select a Hub:
    .four.columns
      %select.select2.fullwidth#shop_id{ 'ng-model' => 'shop.id', name: 'shop_id', 'ng-options' => 'shop.id as shop.name for shop in shops' }
    .seven.columns.omega  

  .row{ 'ng-hide' => '!loaded() || filteredCustomers.length == 0' }
    .controls{ :class => "sixteen columns alpha", :style => "margin-bottom: 15px;" }
      .five.columns.alpha
        %input{ :class => "fullwidth", :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => 'Quick Search' }
      .five.columns  
      -#   %div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "bulk_actions_dropdown", 'ofn-drop-down' => true }
      -#     %span{ :class => 'icon-check' }   Actions
      -#     %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
      -#     %div.menu{ 'ng-show' => "expanded" }
      -#       %div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "action in bulkActions", 'ng-click' => "selectedBulkAction.callback(filteredCustomers)", 'ofn-close-on-click' => true }
      -#         %span{ :class => 'three columns omega' } {{action.name }}
      .three.columns  
      .three.columns.omega
        %div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "columns_dropdown", 'ofn-drop-down' => true, :style => 'float:right;' }
          %span{ :class => 'icon-reorder' }   Columns
          %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
          %div.menu{ 'ng-show' => "expanded" }
            %div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "column in columns",  'ofn-toggle-column' => true }
              %span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "✓" || !column.visible && " " }}
              %span{ :class => 'two columns omega' } {{column.name }}
  .row{ 'ng-if' => 'shop && !loaded()' }
    .sixteen.columns.alpha#loading
      %img.spinner{ src: "/assets/spinning-circles.svg" }
      %h1 LOADING CUSTOMERS
  .row{ :class => "sixteen columns alpha", 'ng-show' => 'loaded() && filteredCustomers.length == 0'}
    %h1#no_results No customers found.


  .row{ ng: { show: "loaded() && filteredCustomers.length > 0" } }
    %form{ name: "customers" }
      %table.index#customers
        %col.email{ width: "20%"}
        %col.code{ width: "20%"}
        %col.tags{ width: "50%"}
        %col.actions{ width: "10%"}
        %thead
          %tr{ ng: { controller: "ColumnsCtrl" } }
            -# %th.bulk
              -# %input{ :type => "checkbox", :name => 'toggle_bulk', 'ng-click' => 'toggleAllCheckboxes()', 'ng-checked' => "allBoxesChecked()" }
            %th.email{ 'ng-show' => 'columns.email.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'customer.email'; reverse = !reverse" } Email
            %th.code{ 'ng-show' => 'columns.code.visible' }
              %a{ :href => '', 'ng-click' => "predicate = 'customer.code'; reverse = !reverse" } Code
            %th.tags{ 'ng-show' => 'columns.tags.visible' } Tags
            %th.actions
              Ask? 
              %input{ :type => 'checkbox', 'ng-model' => "confirmDelete" }
        %tr.customer{ 'ng-repeat' => "customer in filteredCustomers = ( customers | filter:quickSearch | orderBy:predicate:reverse )", 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'", :id => "c_{{customer.id}}" }
          -# %td.bulk
            -# %input{ :type => "checkbox", :name => 'bulk', 'ng-model' => 'customer.checked' }
          %td.email{ 'ng-show' => 'columns.email.visible' } {{ customer.email }}
          %td.code{ 'ng-show' => 'columns.code.visible' }
            %input{ :type => 'text', :name => 'code', :id => 'code', 'ng-model' => 'customer.code', 'obj-for-update' => "customer", "attr-for-update" => "code" }
          %td.tags{ 'ng-show' => 'columns.tags.visible' }
            .tag_watcher{ 'obj-for-update' => "customer", "attr-for-update" => "tag_list"}
              %tags_with_translation{ object: 'customer' }
          %td.actions
            %a{ 'ng-click' => "deleteCustomer(customer)", :class => "delete-customer icon-trash no-text" }
      %input{ :type => "button", 'value' => 'Update', 'ng-click' => 'submitAll()' }