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

- content_for :app_wrapper_attrs do
  = "ng-app='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(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', ng: { model: 'quickSearch', disabled: '!shop_id' }, :placeholder => t('.search_by_email') }
      .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
      %img.spinner{ src: "/assets/spinning-circles.svg" }
      %h1
        =t :loading_customers

  .row{ :class => "sixteen columns alpha", 'ng-show' => '!RequestMonitor.loading && filteredCustomers.length == 0'}
    %h1#no_results
      =t :no_customers_found

  .row.margin-bottom-50{ ng: { show: "!RequestMonitor.loading && filteredCustomers.length > 0" } }
    %form{ name: "customers_form" }
      %save-bar{ dirty: "customers_form.$dirty", persist: "false" }
        %input.red{ type: "button", value: "Save Changes", ng: { click: "submitAll(customers_form)" } }

      %table.index#customers
        %col.email{ width: "20%", 'ng-show' => 'columns.email.visible' }
        %col.name{ width: "20%", 'ng-show' => 'columns.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.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.name{ 'ng-show' => 'columns.name.visible' }
              %a{ :href => '', 'ng-click' => "sorting.toggle('name')" }=t('admin.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.actions
              Ask? 
              %input{ :type => 'checkbox', 'ng-model' => "confirmDelete" }
        %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.name{ 'ng-show' => 'columns.name.visible'}
              %input{ type: 'text', name: 'name', ng: { model: 'customer.name' }, 'obj-for-update' => 'customer', 'attr-for-update' => 'name'}
            %td.code{ 'ng-show' => 'columns.code.visible' }
              %input{ type: 'text', name: 'code', ng: {model: 'customer.code', change: 'checkForDuplicateCodes()'}, "obj-for-update" => "customer", "attr-for-update" => "code" }
              %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.actions
              %a{ 'ng-click' => "deleteCustomer(customer)", :class => "delete-customer icon-trash no-text" }

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