div layout="screen" layout-id="order" id="orderScreen" class="screen secondary"
  .content
    .content-head
      .content-icon= image_tag("content/icon_shopping_cart.png", {:height => 19, :width => 19})
      h1 check out
      = render "screen_navigation"
    .content-body
      #order_error.error.hidden
      .content-body-scroller
        .content-wrapper
          .checkout-navigation-bar
          .checkout-payment-info
            form class="payment-info" id="checkout-payment-info"
              .billing-address
                h2.billing-caption Billing Address
                #divBillingFirstName
                  .billing-label
                    label for="billing-first-name" First Name:
                  .billing-value
                    input type="text" id="billing-first-name"
                  .clearall
                #divBillingLastName
                  .billing-label
                    label for="billing-last-name" Last Name:
                  .billing-value
                    input type="text" id="billing-last-name"
                  .clearall
                #divBillingAddress1
                  .billing-label
                    label for="billing-address1" Address 1:
                  .billing-value
                    input type="text" id="billing-address1"
                  .clearall
                .billing-label
                  label for="billing-address2" Address 2:
                .billing-value
                  input type="text" id="billing-address2"
                .clearall
                #divBillingCity
                  .billing-label
                    label for="billing-city" City:
                  .billing-value
                    input type="text" id="billing-city"
                  .clearall
                #divBillingState
                  .billing-label
                    label for="billing-state" State/Region:
                  .billing-value
                    input type="text" id="billing-state"
                  .clearall
                #divBillingZip
                  .billing-label
                    label for="billing-zip" Zip:
                  .billing-value
                    input type="text" id="billing-zip"
                  .clearall
                #divBillingCountry
                  .billing-label
                    label for="billing-country" Country:
                  .billing-value
                    input type="text" id="billing-country"
                  .clearall
              .payment-method
                h2.payment-method-caption Payment Method
                b Enter Card Information
                br
                #divCardName
                  .card-label.mt10
                    label for="card-name" Name of Card:
                  .card-value.mt10
                    input type="text" id="card-name"
                  .clearall
                #divCardNumber
                  .card-label.mt10
                    label for="card-number" Card Number:
                  .card-value.mt10
                    input type="text" id="card-number"
                  .clearall
                #divCardExpiry
                  .card-label.mt10 Expiration Date:
                  .card-value.mt10
                    =date_select("card", "expire-date", use_two_digit_numbers: true, discard_day: true, :start_year => Time.now.year, :end_year => Time.now.year + 18, :order => [:month, :day, :year], :default => -25.years.from_now, :html=>{:class => "account-profile-birthdate", :id=>"card-expiry"} )
                  .clearall
                #divCardVerify
                  .card-label.mt10
                    label for="card-verify" Verification Value:
                  .card-value.mt10
                    input type="text" id="card-verify"
                  .clearall
                .card-label.mt15
                .card-value.mt15
                  .save-card-checkbox.ichecbuttons
                    input type="checkbox" id="save-card" name="save-card" checked="checked"
                  .divSaveCardHelper
                    label for="save-card" Save card for future use
                  .clearall
                .clearall
              .clearall

              .action-bar.mt15
                .shipping-address
                  h2.shipping-address-label Shipping Address
                  .shipping-as-billing.ichecbuttons
                    input type="checkbox" id="shipping-as-billing" name="shipping-as-billing" checked="checked"
                  .divBillingHelper
                    label for="shipping-as-billing" Same as billing address
                  .clearall
                  .shipping-address-detail.hidden
                    #divShippingFirstName
                      .shipping-label
                        label for="shipping-first-name" First Name:
                      .shipping-value
                        input type="text" id="shipping-first-name"
                      .clearall
                    #divShippingLastName
                      .shipping-label
                        label for="shipping-last-name" Last Name:
                      .shipping-value
                        input type="text" id="shipping-last-name"
                      .clearall
                    #divShippingAddress1
                      .shipping-label
                        label for="shipping-address1" Address 1:
                      .shipping-value
                        input type="text" id="shipping-address1"
                      .clearall
                    .shipping-label
                      label for="shipping-address2" Address 2:
                    .shipping-value
                      input type="text" id="shipping-address2"
                    .clearall
                    #divShippingCity
                      .shipping-label
                        label for="shipping-city" City:
                      .shipping-value
                        input type="text" id="shipping-city"
                      .clearall
                    #divShippingState
                      .shipping-label
                        label for="shipping-state" State/Region:
                      .shipping-value
                        input type="text" id="shipping-state"
                      .clearall
                    #divShippingZip
                      .shipping-label
                        label for="shipping-zip" Zip:
                      .shipping-value
                        input type="text" id="shipping-zip"
                      .clearall
                    #divShippingCountry
                      .shipping-label
                        label for="shipping-country" Country:
                      .shipping-value
                        input type="text" id="shipping-country"
                      .clearall
                .right.mt30
                  a href="#" id="payment-info-help" class="button-grey" HELP
                  a href="#" id="payment-info-next" class="button-orange" NEXT
                .clearall
          .order-panel.hidden
            .order-header.left
              h2 Review Your Order
              .mt5
                span By placing your order, you agree to JamKazam's
                '
                a href="/corp/terms" terms of service
                '
                span and
                '
                a href="/corp/returns" returns policy
                span .
            .right.mt10
              a href="#" class="button-grey" HELP
            .clearall

            .order-content
          .thanks-panel.hidden
            h2 Thank you for your order!
            br
            .thanks-detail We'll send you an email confirming your order shortly.
            br
            .thanks-detail.jam-tracks-in-browser.hidden
              | To play your purchased JamTrack, launch the JamKazam application and open the JamTrack while in a session.
            .thanks-detail.purchased-jam-track.hidden
              h2.purchased-jam-track-header Downloading Your Purchased JamTracks
              span Each JamTrack will be downloaded sequentially.
              br
              span.notice Note that you do not have to wait for this to complete in order to use your JamTrack later.
              br.clear
              ul.purchased-list



script type='text/template' id='template-order-content'
  .order-left-page
    .payment-info-page
      .address-info
        b.left Billing Address
        a.left.ml5.change-payment-info href="#" change
        .clearall
        span.mt5= "{{data.billing_info.first_name}} {{data.billing_info.last_name}}"
        br
        span.mt5= "{{data.billing_info.address1}}"
        br
        span.mt5= "{{data.billing_info.address2}}"
        br
        br
        b.left Shipping Address
        a.left.ml5.change-payment-info href="#" change
        .clearall
        = "{% if (data.shipping_as_billing) { %}"
        span.mt5 same as billing address
        = "{% } else { %}"
        span.mt5= "{{data.shipping_info.first_name}} {{data.shipping_info.last_name}}"
        br
        span.mt5= "{{data.shipping_info.address1}}"
        br
        span.mt5= "{{data.shipping_info.address2}}"
        = "{% } %}"
        br
      .payment-method-info
        b.left Payment Method
        a.left.ml5.change-payment-info href="#" change
        .clearall

        /= image_tag ''
        ="Ending in: {{data.billing_info.number.slice(-4)}}"
        
      .clearall
    .order-items-page
      .cart-items
        .cart-item-caption#header
          span Your order includes:
        .cart-item-price
          span style="text-decoration: underline;" Price
        .cart-item-quantity
          span style="text-decoration: underline;" Quantity
        .clearall
        = "{% if (data.carts.length == 0) { %}"
        .no-cart-items You have no orders now.
        = "{% } %}"
        = "{% _.each(data.carts, function(cart) { %}"
        .cart-item cart-id="{{cart.id}}"
          .cart-item-caption
            = "{{cart.cart_type}}: {{cart.product_info.name}}"
          .cart-item-price
            = "$ {{cart.product_info.price}}"
          .cart-item-quantity
            = "{{cart.quantity}}"
          .clearall
        = "{% }); %}"
    .clearall
  .order-right-page
    a href="#" class="button-orange place-order" PLACE YOUR ORDER
    br
    br
    b.mt10 Order Summary:
    br
    .left Items:
    .right= "${{data.sub_total}}"
    .clearall
    .left Shipping & handling
    .right $0.00
    br
    hr
    .left Total before Tax:
    .right= "${{data.sub_total}}"
    .clearall
    .left Taxes:
    .right= "${{data.taxes}}"
    .clearall
    br
    hr
    b.order-total
      .left Order Total:
      .right= "${{data.grand_total}}"
      .clearall
    br
    div style="text-align: left;"
      span By placing your order, you agree to JamKazam's
      '
      a href="/corp/terms" terms of service
      '
      span and
      '
      a href="/corp/returns" returns policy
      span .

script type='text/template' id='template-purchased-jam-track'
  li data-jam-track-id="{{data.jam_track_id}}"