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

    .one.column
      &nbsp;

    .seven.columns.omega
      .row
        .five.columns.alpha
          %h3= t('.products')
        .two.columns.omega.text-right
          %input#edit-products{ type: "button", value: t(:edit), ng: { click: "setView('products')" } }
      .row
        .seven.columns.alpha.omega
          %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' }", class: { even: 'even', 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{"data-hook" => "admin_order_form_subtotal"}
              %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{"data-hook" => "admin_order_form_total"}
              %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'
