- content_for :page_title do
  %h1.page-title
    =t :customers

- content_for :main_ng_app_name do
  = "admin.customers"

- content_for :page_actions do
  %li
    %a.button.icon-plus#new-customer{ href: "#", "new-customer-dialog" => true }
      = t('admin.customers.index.new_customer')

= admin_inject_column_preferences(module: 'admin.customers')
= admin_inject_shops(@shops, module: 'admin.customers')
= admin_inject_available_countries(module: 'admin.customers')

%div{ "ng-controller": 'customersCtrl' }
  .row.filters
    .sixteen.columns.alpha.omega
      .filter_select.five.columns.alpha
        %label{ for: 'quick_search', "ng-class": '{disabled: !shop_id}' }=t('admin.quick_search')
        %br
        %input.fullwidth{ type: "text", id: 'quick_search', placeholder: t('.search_by_email'), "ng-model": 'quickSearch', "ng-disabled": '!shop_id' }
      .filter_select.four.columns
        %label{ for: 'hub_id', "ng-bind": "shop_id ? '#{t('admin.shop')}' : '#{t('admin.variant_overrides.index.select_a_shop')}'" }
        %br
        %input.ofn-select2.fullwidth#shop_id{ "ng-model": 'shop_id', name: 'shop_id', data: 'shops', "on-selecting": 'confirmRefresh' }
      .seven.columns.omega  

  %hr.divider{ "ng-show": "!RequestMonitor.loading && filteredCustomers.length > 0" }

  .row.controls{ "ng-show": "!RequestMonitor.loading && filteredCustomers.length > 0" }
    .thirteen.columns.alpha  
    %columns-dropdown{ action: "#{controller_name}_#{action_name}" }

  .row{ 'ng-if' => 'shop_id && RequestMonitor.loading' }
    .sixteen.columns.alpha#loading
      = render partial: "components/admin_spinner"
      %h1
        = t :loading_customers

  .row.margin-bottom-50{ "ng-show": "!RequestMonitor.loading" }
    %form{ name: "customers_form" }
      %h1#no_results{ 'ng-show' => '!RequestMonitor.loading && filteredCustomers.length == 0' }
        =t :no_customers_found

      %save-bar{ persist: "filteredCustomers.length > 0" }
        %input.red{ type: "button", value: t(:save_changes), "ng-click": "submitAll(customers_form)", "ng-disabled": "!hasUnsavedChanges()" }

      %table.index#customers{ 'ng-show' => '!RequestMonitor.loading && filteredCustomers.length > 0' }
        %col.email{ width: "20%", 'ng-show' => 'columns.email.visible' }
        %col.first_name{ width: "20%", 'ng-show' => 'columns.first_name.visible' }
        %col.last_name{ width: "20%", 'ng-show' => 'columns.last_name.visible' }
        %col.code{ width: "10%", 'ng-show' => 'columns.code.visible' }
        %col.tags{ width: "20%", 'ng-show' => 'columns.tags.visible' }
        %col.bill_address{ width: "10%", 'ng-show' => 'columns.bill_address.visible' }
        %col.ship_address{ width: "10%", 'ng-show' => 'columns.ship_address.visible' }
        %col.balance{ width: "10%", 'ng-show' => 'columns.balance.visible' }
        %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' => "sorting.toggle('email')" }=t('admin.email')
            %th.first_name{ 'ng-show' => 'columns.first_name.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('first_name')" }=t('admin.first_name')
            %th.last_name{ 'ng-show' => 'columns.last_name.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('last_name')" }=t('admin.last_name')
            %th.code{ 'ng-show' => 'columns.code.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('code')" }=t('admin.customers.index.code')
            %th.tags{ 'ng-show' => 'columns.tags.visible' }=t('admin.tags')
            %th.bill_address{ 'ng-show' => 'columns.bill_address.visible' }=t('admin.customers.index.bill_address')
            %th.ship_address{ 'ng-show' => 'columns.ship_address.visible' }=t('admin.customers.index.ship_address')
            %th.balance{ 'ng-show' => 'columns.balance.visible' }=t('admin.customers.index.balance')
        %tbody
          %tr.customer{ 'ng-repeat' => "customer in filteredCustomers = ( customers | filter:quickSearch | orderBy: sorting.predicate:sorting.reverse ) | limitTo:customerLimit track by customer.id", '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'}
              %span{ 'ng-bind' => '::customer.email' }
              %span.guest-label{ 'ng-show' => 'customer.user_id == null' }= t('.guest_label')
            %td.first_name{ 'ng-show' => 'columns.first_name.visible'}
              %input{ type: 'text', name: 'first_name', "obj-for-update": 'customer', "attr-for-update": 'first_name', "ng-model": 'customer.first_name' }
            %td.last_name{ 'ng-show' => 'columns.last_name.visible'}
              %input{ type: 'text', name: 'last_name', "obj-for-update": 'customer', "attr-for-update": 'last_name', "ng-model": 'customer.last_name' }
            %td.code{ 'ng-show' => 'columns.code.visible' }
              %input{ type: 'text', name: 'code', "obj-for-update": "customer", "attr-for-update": "code", "ng-model": 'customer.code', "ng-change": 'checkForDuplicateCodes()' }
              %i.icon-warning-sign{ "ng-if": 'duplicate' }
                = t('.duplicate_code')
            %td.tags{ 'ng-show' => 'columns.tags.visible' }
              .tag_watcher{ 'obj-for-update' => "customer", "attr-for-update" => "tag_list"}
                %tags_with_translation{ object: 'customer', 'find-tags' => 'findTags(query)' }
            %td.bill_address{ 'ng-show' => 'columns.bill_address.visible' }
              %a{ id: 'bill-address-link', href: 'javascript:void(0)', "ng-bind" => "customer.bill_address ? customer.bill_address.address1 : '#{t('admin.customers.index.edit')}' | limitTo: 15", 'edit-address-dialog' => true }
            %td.ship_address{ 'ng-show' => 'columns.ship_address.visible' }
              %a{ id: 'ship-address-link', href: 'javascript:void(0)', "ng-bind" => "customer.ship_address ? customer.ship_address.address1 : '#{t('admin.customers.index.edit')}' | limitTo: 15", 'edit-address-dialog' => true }
            %td.balance.align-center{ 'ng-show' => 'columns.balance.visible'}
              %span.state.white-space-nowrap{ 'ng-class' => 'customer.balance_status', 'ng-bind' => 'displayBalanceStatus(customer)' }
              %span{ 'ng-bind' => '::customer.balance' }
            %td.actions
              %a{ 'ng-click' => "deleteCustomer(customer)", :class => "delete-customer icon-trash no-text" }

      .text-center{ "ng-show": "filteredCustomers.length > customerLimit" }
        %input{ type: 'button', value: t(:show_more), "ng-click": 'customerLimit = customerLimit + 20' }
        %input{ type: 'button', value: t(:show_all_with_more, num: '{{ filteredCustomers.length - customerLimit }}'), "ng-click": 'customerLimit = filteredCustomers.length' }