<!-- item -->
<div class="flexRow">
  <div class="flexRow custCol-border borderBottom hide js-buyWizardOrderSummary">
    <div class="rowItem padding2015">
      <% ob.purchasesPageLink = '<a class="js-goToPurchases">' + polyglot.t('buyFlow.purchasesPage') + '</a>' %>
      <%= polyglot.t('buyFlow.summaryMsg1', { recipient: ob.recipient }) %>.
      <%= polyglot.t('buyFlow.summaryMsg2', { time: ob.vendor_offer.listing.item.process_time }) %>. <% print(polyglot.t('buyFlow.summaryMsg3', { purchasesPageLink: ob.purchasesPageLink })) %>.
    </div>
  </div>
  <div class="flexRow custCol-border borderBottom">
    <div class="flexCol-6">
      <div class="rowItem padding2015">
        <div class="table">
          <div>
            <div class="thumbnail-large-slim">
              <div class="thumbnail thumbnail-large-slim"
                  <% if(ob.vendor_offer.listing.item.image_hashes[0]) { %>
                  style="background-image: url(<%= ob.serverUrl %>get_image?hash=<%= ob.vendor_offer.listing.item.image_hashes[0] %><%= ob.imageExtension %>), url(imgs/defaultItem.png);">
                  <% } else { %>
                  style="background-image: url(imgs/defaultItem.png);">
                  <% } %>
              </div>
            </div>
            <div class="pad10left">
              <div class="marginTop12 marginBottom4 fontSize13 noOverflow"><strong><%= ob.vendor_offer.listing.item.title %></strong></div>
              <div class="noOverflow fontSize13 txt-fade"><%= polyglot.t('transactions.Vendor2') %> <% if(ob.page.profile.handle){ %><%= ob.page.profile.handle %><% } else { %><%= ob.page.profile.guid %><% } %></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flexCol-2">
      <div class="rowItem padding0 paddingTop20">
        <form id="buyWizardQuantity" class="positionWrapper">
          <input type="number"
                 step="1"
                 min="1"
                 name="max_quantity"
                 max="<%= ob.vendor_offer.listing.metadata.max_quantity || 999999%>"
                 class="fieldItem spinButtons js-buyWizardQuantity border1 custCol-border marginTop4"
                 value="1"/>
          <div class="numberSpinnerUp"></div>
          <div class="numberSpinnerDown"></div>
        </form>
        <% if(ob.vendor_offer.listing.metadata.max_quantity && ob.vendor_offer.listing.metadata.max_quantity < 999999) { %>
        <div class="textOpacity75 fontSize10 txt-center rowTop5">
          <%= polyglot.t('MaxQuantityDisplayShort', {quantity: ob.vendor_offer.listing.metadata.max_quantity}) %>
        </div>
        <% } %>
      </div>
    </div>
    <div class="flexCol-4 overflowHidden">
      <div class="rowItem padding5 paddingTop20 alignRight marginTop20">
        <div>
          <span class="noOverflow fontSize13 js-buyWizardBTCPrice"></span>
          <span class="noOverflow textOpacity75 fontSize13 js-buyWizardPrice">
            <% if(ob.userCurrencyCode != 'BTC'){ %>
              (<%= ob.displayPrice %>)
            <% } %>
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- only display shipping if physical item -->
  <% if( ob.vendor_offer.listing.metadata.category === "physical good" ) { %>
  <div class="flexRow custCol-border borderBottom">
    <div class="flexCol-8">
      <div class="payAddressWrapper">
        <div class="table">
          <div>
            <div class="thumbnail-large-slim">
              <div class="thumbnail thumbnail-large-slim custCol-secondary alignCenter" >
                <span class="ion-cube textOpacity1 fontSize20 positionAbsolute" style="left: 33%; top: 23%;"></span>
                <span class="fontSize10 textOpacity1 positionAbsolute width100 alignCenter left0 bottom8px"><%= polyglot.t('ShipTo') %></span>
              </div>
            </div>
            <div class="pad10left txt-unleaded fontSize13 textOpacity1">
              <% if(ob.selectedAddress) { %>
              <div class="marginBottom2"><%= ob.selectedAddress.name %></div>
              <div class="marginBottom2"><%= ob.selectedAddress.street %></div>
              <div class="marginBottom2">
                <%= ob.selectedAddress.city %><% if(ob.selectedAddress.state || ob.selectedAddress.postal_code && ob.selectedAddress.city){ %>,<% } %>
                <%= ob.selectedAddress.state %> <%= ob.selectedAddress.postal_code %>
              </div>
              <div class="marginBottom2"><%= ob.selectedAddress.alternate_contact %></div>
              <div><%= ob.selectedAddress.displayCountry %></div>
              <% } %>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flexCol-4">
      <div class="rowItem padding2015 marginTop20 alignRight">
        <% if(ob.vendor_offer.listing.shipping.free){ %>
          <%= polyglot.t('Free') %>
        <% } else { %>
          <span class="noOverflow fontSize13 js-buyWizardBTCShippingPrice">
            <% if(ob.shippingType === "domestic") { %>
              <%= ob.formatBitcoin(ob.domesticShippingBTC) %>
            <% }else{ %>
              <%= ob.formatBitcoin(ob.internationalShipping) %>
            <% } %>
          </span>
          <span class="noOverflow js-buyWizardShippingPrice textOpacity75 fontSize13">
            <% if(ob.userCurrencyCode != 'BTC'){ %>
              (<%= ob.currentShippingDisplayPrice %>)
            <% } %>
          </span>
        <% } %>
      </div>
    </div>
  </div>
  <% } %>

  <div class="flexRow custCol-border borderBottom">
    <div class="flexCol-8">
      <div class="rowItem padding2015">
        <div class="table">
          <div>
            <% if(ob.selectedModerator){ %>
            <div class="thumbnail-large-slim">
              <div class="thumbnail thumbnail-large-slim"
                  <% if(ob.selectedModerator.avatar){ %>
                  style="background-image: url(<%= ob.serverUrl %>get_image?hash=<%= ob.selectedModerator.avatar %>&guid=<%= ob.selectedModerator.guid %>), url(imgs/defaultUser.png);">
                  <% } else { %>
                  style="background-image: url(imgs/defaultUser.png);">
                  <% } %>
              </div>
            </div>
            <div class="pad10left">
              <div class="marginTop6 marginBottom4 fontSize13 noOverflow marginBottom4">
                <%= polyglot.t('Moderator2') %>
                <% if(ob.selectedModerator.blockchain_id){ %>
                  <%= ob.selectedModerator.blockchain_id %>
                <% } else { %>
                  <%= ob.selectedModerator.guid %>
                <% } %>
              </div>
              <div class="textOpacity75 lineHeight15">(<%= polyglot.t('buyFlow.moderatorPaymentDisclaimer') %>)</div>
            </div>
            <% } else { %>
              <div class="thumbnail-large-slim">
                <div class="thumbnail thumbnail-large-slim"
                    <% if(ob.avatar_hash) { %>
                    style="background-image: url(<%= ob.serverUrl %>get_image?hash=<%= ob.avatar_hash %>&guid=<%= ob.vendor_offer.listing.id.pubkeys.guid %>), url(imgs/defaultUser.png);">
                    <% } else { %>
                    style="background-image: url(imgs/defaultUser.png);">
                    <% } %>
                </div>
              </div>
              <div class="pad10left">
                <div class="marginTop6 marginBottom4 fontSize13 noOverflow"><%= polyglot.t('buyFlow.DirectPayment') %> <%= ob.handle %></div>
                <div class="textOpacity75 lineHeight15">
                  (<%= polyglot.t('buyFlow.directPaymentDisclaimer') %>)
                </div>
              </div>
            <% } %>
          </div>
        </div>
      </div>
    </div>
    <div class="flexCol-4">
      <div class="rowItem padding2015 alignRight marginTop20">
        <% if(ob.selectedModerator){ %>
          <span class="noOverflow fontSize13 tooltip tooltip-left js-buyWizardModeratorPrice">
            <%= ob.selectedModerator.fee %>
          </span>
        <% } else { %>
          <%= polyglot.t('Free') %>
        <% } %>
      </div>
    </div>
  </div>
</div>
