= render 'products_panel'
= render 'orders_panel'

%table.index#subscriptions{ ng: { cloak: true, show: 'shop_id && !RequestMonitor.loading && filteredSubscriptions.length > 0' } }
  %col.customer{ width: "20%", 'ng-show' => 'columns.customer.visible' }
  %col.schedule{ width: "20%", 'ng-show' => 'columns.schedule.visible' }
  %col.items{ width: "10%", 'ng-show' => 'columns.items.visible' }
  %col.orders{ width: "10%", 'ng-show' => 'columns.orders.visible' }
  %col.status{ width: "15%", 'ng-show' => 'columns.state.visible' }
  %col.begins_on{ width: "10%", 'ng-show' => 'columns.begins_on.visible' }
  %col.ends_on{ width: "10%", 'ng-show' => 'columns.ends_on.visible' }
  %col.payment_method{ width: "20%", 'ng-show' => 'columns.payment_method.visible' }
  %col.shipping_method{ width: "20%", 'ng-show' => 'columns.shipping_method.visible' }
  %col.actions{ width: "15%" }
  %thead
    %tr
      -# %th.bulk
        -# %input{ :type => "checkbox", :name => 'toggle_bulk', 'ng-click' => 'toggleAllCheckboxes()', 'ng-checked' => "allBoxesChecked()" }
      %th.customer{ ng: { show: 'columns.customer.visible' } }
        = t('admin.customer')
      %th.schedule{ ng: { show: 'columns.schedule.visible',  } }
        = t('admin.schedule')
      %th.items{ ng: { show: 'columns.items.visible',  } }
        = t('admin.items')
      %th.orders{ ng: { show: 'columns.orders.visible',  } }
        = t('orders')
      %th.status{ ng: { show: 'columns.state.visible',  } }
        = t('admin.status_state')
      %th.begins_on{ ng: { show: 'columns.begins_on.visible',  } }
        = t('admin.begins_on')
      %th.ends_on{ ng: { show: 'columns.ends_on.visible',  } }
        = t('admin.ends_on')
      %th.payment_method{ ng: { show: 'columns.payment_method.visible',  } }
        = t('admin.payment_method')
      %th.shipping_method{ ng: { show: 'columns.shipping_method.visible',  } }
        = t('admin.shipping_method')
      %th.actions
         
  %tbody.panel-ctrl{ object: 'subscription', ng: { repeat: "subscription in subscriptions | filter:query as filteredSubscriptions track by subscription.id" } }
    %tr.subscription{ :id => "so_{{subscription.id}}", ng: { class: { even: "'even'", odd: "'odd'" } } }
      %td.customer.text-center{ ng: { show: 'columns.customer.visible', bind: '::subscription.customer_email' } }
      %td.schedule.text-center{ ng: { show: 'columns.schedule.visible', bind: '::subscription.schedule_name' } }
      %td.items.panel-toggle.text-center{ name: 'products', ng: { show: 'columns.items.visible' } }
        %h5{ ng: { bind: 'itemCount(subscription)' } }
      %td.orders.panel-toggle.text-center{ name: 'orders', ng: { show: 'columns.orders.visible' } }
        %h5{ ng: { bind: 'subscription.not_closed_proxy_orders.length' } }
      %td.status.text-center{ ng: { show: 'columns.state.visible' } }
        %span.state{ ng: { class: "subscription.state", bind: "'spree.subscription_state.' + subscription.state | t" } }
      %td.begins_on.text-center{ ng: { show: 'columns.begins_on.visible', bind: '::subscription.begins_at' } }
      %td.ends_on.text-center{ ng: { show: 'columns.ends_on.visible', bind: '::subscription.ends_at' } }
      %td.payment_method{ ng: { show: 'columns.payment_method.visible', bind: '::paymentMethodsByID[subscription.payment_method_id].name' } }
      %td.shipping_method{ ng: { show: 'columns.shipping_method.visible', bind: '::shippingMethodsByID[subscription.shipping_method_id].name' } }
      %td.actions
        %a.edit-subscription.icon-edit.no-text{ ng: { href: '{{subscription.edit_path}}'}, 'ofn-with-tip' => t('.edit_subscription') }
        %a.pause-subscription.icon-pause.no-text{ ng: { click: 'subscription.pause()', hide: '!!subscription.paused_at' }, 'ofn-with-tip' => t('.pause_subscription') , href: 'javascript:void(0)' }
        %a.unpause-subscription.icon-play.no-text{ ng: { click: 'subscription.unpause()', show: '!!subscription.paused_at' }, 'ofn-with-tip' => t('.unpause_subscription') , href: 'javascript:void(0)' }
        %a.cancel-subscription.icon-remove.no-text{ ng: { click: 'subscription.cancel()', hide: '!!subscription.canceled_at'}, 'ofn-with-tip' => t('.cancel_subscription') , href: 'javascript:void(0)' }

    %tr.panel-row{ object: "subscription", panels: "{products: 'subscription_products', orders: 'proxy_orders'}" }