.expanding-sidebar.cart-sidebar{ng: {controller: 'CartCtrl', show: 'showCartSidebar', class: "{'shown': showCartSidebar, 'hidden': !showCartSidebar}"}}
  .background{ng: {click: 'toggleCartSidebar()'}}
  .sidebar
    .cart-header
      %span.title{"ng-show" => "Cart.line_items.length == 1"}
        = t('.items_in_cart_singular', num: "{{ Cart.total_item_count() }}")
      %span.title{"ng-show" => "Cart.line_items.length > 1"}
        = t('.items_in_cart_plural', num: "{{ Cart.total_item_count() }}")
      %a.close{ng: {click: 'toggleCartSidebar()'}}
        = t('.close')
        %i.ofn-i_009-close

    .cart-content
      %table
        %tr.product-cart{"ng-repeat" => "line_item in Cart.line_items", "id" => "cart-variant-{{ line_item.variant.id }}"}
          %td.image
            %img{'ng-src' => '{{ line_item.variant.thumb_url }}'}
          %td
            %span {{ line_item.variant.extended_name | truncate: max_characters }}
            %br
            %span.options-text {{ line_item.variant.options_text | truncate: max_characters }}
          %td.text-right
            %span.quantity {{ line_item.quantity }}
          %td
            %span.total-price.right {{ line_item.total_price | localizeCurrency }}

      .cart-empty{"ng-show" => "Cart.line_items.length == 0"}
        %p
          = t('.cart_empty')

        %a.go-shopping.button.large.bright{ng: {show: "#{show_shopping_cta?}", href: "{{ CurrentHub.hub.id ? '#{main_app.shop_path}' : '#{main_app.shops_path}' }}"}}
          = t('.take_me_shopping')

  .sidebar-footer{"ng-show" => "Cart.line_items.length > 0"}
    %p.cart-total
      %strong
        = t 'total'
        {{ Cart.total()  | localizeCurrency }}

    %div.fullwidth
      %a.edit-cart.button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"}
        = "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t('.edit_cart')}' ) }}"
      %a.checkout.button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"}
        = t '.checkout'