%fieldset.no-border-bottom
  %legend{ align: 'center'}= t(".details")
  .row
    .eight.columns.alpha
      .row
        .five.columns.alpha
          %h3= t('.details')
        .eleven.columns.omega
          %input#edit-details{ type: "button", value: t(:edit), "ng-click": "setView('details')" }
      .row
        .five.columns.alpha
          %strong= t('admin.customer')
        .eleven.columns.omega {{ subscription.customer().email }}
      .row
        .five.columns.alpha
          %strong= t('admin.schedule')
        .eleven.columns.omega {{ subscription.schedule().name }}
      .row
        .five.columns.alpha
          %strong= t('admin.payment_method')
        .eleven.columns.omega {{ subscription.paymentMethod().name }}
      .row
        .five.columns.alpha
          %strong= t('admin.shipping_method')
        .eleven.columns.omega {{ subscription.shippingMethod().name }}
      .row
        .five.columns.alpha
          %strong= t('admin.begins_at')
        .eleven.columns.omega {{ subscription.begins_at }}
      .row.margin-bottom-30
        .five.columns.alpha
          %strong= t('admin.ends_at')
        .eleven.columns.omega {{ subscription.ends_at || ('ongoing' | t) }}
      .row
        .five.columns.alpha
          %h3= t('.address')
        .eleven.columns.omega
          %input#edit-address{ type: "button", value: t(:edit), "ng-click": "setView('address')" }
      .row
        .five.columns.alpha
          %strong= t('admin.bill_address')
        .eleven.columns.omega {{ formatAddress(subscription.bill_address) }}
      .row
        .five.columns.alpha
          %strong= t('admin.ship_address')
        .eleven.columns.omega {{ formatAddress(subscription.ship_address) }}

    .one.column
       

    .seven.columns.omega
      .row
        .five.columns.alpha
          %h3= t('.products')
        .eleven.columns.omega
          %input#edit-products{ type: "button", value: t(:edit), "ng-click": "setView('products')" }
      .row
        %table#subscription-line-items.admin-subscription-review-subscription-line-items
          %colgroup
            %col{:style => "width: 62%;"}/
            %col{:style => "width: 14%;"}/
            %col{:style => "width: 10%;"}/
            %col{:style => "width: 14%;"}/
          %thead
            %tr
              %th= t(:item_description)
              %th.price= t(:price)
              %th.quantity= t(:qty)
              %th.total
                %span= t(:total)
          %tbody
            %tr.item{ id: "sli_{{$index}}", "ng-repeat": "item in subscription.subscription_line_items | filter:{ _destroy: '!true' }", "ng-class-even": 'even', "ng-class-odd": 'odd' }
              %td
                .description {{ item.description }}
                .not-in-open-and-upcoming-order-cycles-warning{ "ng-if": '!item.in_open_and_upcoming_order_cycles' }
                  = t(".no_open_or_upcoming_order_cycle")
              %td.price.align-center {{ item.price_estimate | localizeCurrency }}
              %td.quantity {{ item.quantity }}
              %td.total.align-center {{ (item.price_estimate * item.quantity) | localizeCurrency }}
          %tbody#subtotal.no-border-top
            %tr#subtotal-row
              %td{:colspan => "3"}
                %b
                  = t(:subtotal)
                  \:
              %td.total.align-center
                %span {{ subscription.estimatedSubtotal() | localizeCurrency }}
          %tbody#order-total.grand-total.no-border-top
            %tr
              %td{:colspan => "3"}
                %b
                  = t(:order_total_price)
                  \:
              %td.total.align-center
                %span#order_form_total {{ subscription.estimatedTotal() | localizeCurrency }}
        %p.notice
          = t "this_is_an_estimate", scope: 'admin.subscriptions.subscription_line_items'