.row{"ng-if" => "open()"}
  .columns.small-12.fat
    %table
      %tr
        %th.order1= t :transaction
        %th.order2= t :transaction_date
        %th.order3.show-for-large-up= t :payment_state
        %th.order4.show-for-large-up= t :shipping_state
        %th.order5.text-right= t :value
        %th.order6.text-right.show-for-large-up= t :outstanding_balance
        %th.order7.text-right= t :running_balance
      %tbody.transaction-group{"ng-repeat" => "order in shop.orders", "ng-class-odd"=>"'odd'", "ng-class-even"=>"'even'"}
        %tr.payment-row{"ng-repeat" => "payment in order.payments", "ng-class" => "{'invalid': payment.state != 'completed'}"}
          %td.order1{"ng-bind" => "::payment.payment_method"}
          %td.order2{"ng-bind" => "::payment.updated_at"}
          %td.order3.show-for-large-up
            %i{"ng-class" => "{'ofn-i_012-warning': payment.state == 'invalid' || payment.state == 'void' || payment.state == 'failed'}"}
            %span{"ng-bind" => "::'spree.payment_states.' + payment.state | t | capitalize"}
          %td.order4.show-for-large-up
          %td.order5.text-right{"ng-class" => "{'credit' : payment.amount > 0, 'debit' : payment.amount < 0, 'paid' : payment.amount == 0}","ng-bind" => "::payment.amount | localizeCurrency"}
          %td.order6.show-for-large-up
          %td.order7
        %tr.order-row
          %td.order1
            %a{"ng-href" => "{{::order.path}}", "ng-bind" => "::('js.spree.users.order' | t )+ ' ' + order.number"}
          %td.order2{"ng-bind" => "::order.completed_at"}
          %td.order3.show-for-large-up{"ng-bind" => "::'spree.payment_states.' + order.payment_state | t | capitalize"}
          %td.order4.show-for-large-up{"ng-bind" => "::'spree.shipment_states.' + order.shipment_state | t | capitalize"}
          %td.order5.text-right{"ng-class" => "{'credit' : order.total < 0, 'debit' : order.total > 0, 'paid' : order.total == 0}","ng-bind" => "::order.total | localizeCurrency"}
          %td.order6.text-right.show-for-large-up{"ng-class" => "{'credit' : order.outstanding_balance < 0, 'debit' : order.outstanding_balance > 0, 'paid' : order.outstanding_balance == 0}", "ng-bind" => "::order.outstanding_balance | localizeCurrency"}
          %td.order7.text-right{"ng-class" => "{'credit' : order.runningBalance < 0, 'debit' : order.runningBalance > 0, 'paid' : order.runningBalance == 0}", "ng-bind" => "::order.runningBalance | localizeCurrency"}
