item.html

<div class="flexRow border0">
  <div class="flexRow bar pad20 height30 marginTop9 noFlexWrap">
    <a class="js-returnToStore textOpacity50 underline fontSize13 noWrap"><%= polyglot.t('AllListings') %></a>
    <% if(ob.vendor_offer.listing.item.category) { %>
      <span class="ion-ios-arrow-forward breadCrumbArrow"></span>
      <a class="js-returnToStoreCategory textOpacity50 underline fontSize13 noOverflow"><%= ob.vendor_offer.listing.item.category %></a>
    <% } %>
  </div>
  <div class="floatRight">

  </div>
</div>
<h2 class="page-contractTitle noOverflow textOpacity1 marginLeft20 marginBottom8" title="<%= ob.vendor_offer.listing.item.title %>"><%= ob.vendor_offer.listing.item.title %></h2>
    <!-- <div style="word-break: break-word;"><%= JSON.stringify(ob.vendor_offer.listing) %></div> -->

<div class="flexRow border0">
  <div class="flexCol-7 pad20">
    <div class="itemImg itemImg-large row10 overflowHidden">
      <div class="itemImg itemImg-large <% if(!ob.showNSFWContent && !ob.skipNSFWmodal && ob.vendor_offer.listing.item.nsfw){ %> nsfw <% } %>"
         style="background-image: url(<%= ob.serverUrl %>get_image?hash=<%= ob.vendor_offer.listing.item.image_hashes[0] %><%= ob.imageExtension %>),
         url(imgs/defaultItem.png);">
      </div>
      <% if(ob.vendor_offer.listing.item.image_hashes[0]) { %>
        <button class="fullscreen js-photoGallery" href="<%= ob.serverUrl %>get_image?hash=<%= ob.vendor_offer.listing.item.image_hashes[0] %><%= ob.imageExtension %>"></button>
      <% } %>
    </div>
    <div class="flexRow row20 flexRow-grid">
      <% _.each(ob.vendor_offer.listing.item.image_hashes, function(data, i) {
      if(i != 0){%>
      <div class="itemImg itemImg-small overflowHidden">
        <div class="itemImg itemImg-small <% if(!ob.showNSFWContent && !ob.skipNSFWmodal && ob.vendor_offer.listing.item.nsfw){ %> nsfw <% } %>"
             style="background-image: url(<%= ob.serverUrl %>get_image?hash=<%= data %><%= ob.imageExtension %>), url(imgs/defaultItem.png);">
        </div>
        <button class="fullscreen js-photoGallery" href="<%= ob.serverUrl %>get_image?hash=<%= data %><%= ob.imageExtension %>"></button>
      </div>
      <% } }); %>
    </div>
  </div>
  <div class="flexCol-5 pad20right pad10left">
    <div class="marginBottom12 clearfix custCol-primary borderBottom custCol-border">
      <ul class="itemMeta">
        <li class="alignCenter itemPrice">
          <span class="textSize22px textOpacity1 fontWeight500 marginRight2">
            <%= ob.formatBitcoin(ob.vendorBTCPrice) %>
          </span>
          <% if(ob.userCurrencyCode != 'BTC'){ %>
          <span class="textSize22px textOpacity65">(<%= ob.displayPrice %>)</span>
          <% } %>
        </li>
        <li class="border0 alignCenter padding10 height70 marginBottom12">
          <div class="btn btn-light btn-buyNow js-buyButton custCol-secondary
          <% if(ob.vendor_offer.listing.metadata.max_quantity === 0) { %>disabled<% } %>">
            <%= polyglot.t('BUYNOW') %>
          </div>
        </li>
        <% if (ob.totalReviews) { %>
        <li class="border0 alignCenter padding10 marginBottom12 clickable js-itemRating">
          <span class="marginRight3"><%= ob.totalReviews %> Review</span><% print(ob.starsTemplate({ rating: ob.avgRating })) %><span class="marginLeft2">(<%= ob.avgRating %>/5)</span>
        </li>
        <% } %>
      </ul>

      <% if(ob.vendor_offer.listing.metadata.max_quantity && ob.vendor_offer.listing.metadata.max_quantity < 999999 || ob.vendor_offer.listing.metadata.max_quantity === 0) { %>
      <div class="flexRow width100">
        <div class="width100 fontSize15 marginLeft10 textOpacity75 row10 txt-center">
          <% if(ob.vendor_offer.listing.metadata.max_quantity > 0) { %>
          <h5><%= polyglot.t('MaxQuantityDisplay', {quantity: ob.vendor_offer.listing.metadata.max_quantity}) %></h5>
          <% } else { %>
          <h5><%= polyglot.t('NoQuantityDisplay') %></h5>
          <% } %>
        </div>
      </div>
      <% } %>

    </div>

    <div class="width100 custCol-text borderBottom paddingBottom12 paddingLeft6 custCol-border">
      <div class="flexRow width100 row20">
        <% if(ob.displayShippingOrigin) { %>
          <div class="flexExpand row10 positionWrapper">
            <div class="itemMetaCircle custCol-secondary floatLeft ion-location marginRight7"></div>
            <div class="itemMetaValue noOverflow">
              <%= ob.displayShippingOrigin %>
            </div>
            <div class="positionAbsolute width100 itemMetaValue zIndex1 tooltip"
                 data-tooltip="<%= polyglot.t('CountryOfOrigin') %> <%= ob.displayShippingOrigin %>">
            </div>
          </div>
        <% } %>
        <% if(ob.vendor_offer.listing.metadata.category) { %>
        <div class="flexCol-6 row10">
          <div class="itemMetaCircle custCol-secondary floatLeft ion-pricetag marginRight7 fontSize15"></div>
          <div class="itemMetaValue">
            <%= polyglot.t(ob.vendor_offer.listing.metadata.category.split(' ')[0].replace(/^\w/, function (chr) {
            return chr.toUpperCase();
            })) %>
          </div>
        </div>
        <% } %>
        <% if(ob.vendor_offer.listing.item.condition) { %>
        <div class="flexCol-6 row10">
          <div class="itemMetaCircle custCol-secondary floatLeft ion-android-star marginRight7 fontSize15"></div>
          <div class="itemMetaValue">
            <%= polyglot.t(ob.vendor_offer.listing.item.condition.replace(/^\w/, function (chr) {
            return chr.toUpperCase();
            })) %>
          </div>
        </div>
        <% } %>

        <% if( ob.vendor_offer.listing.metadata.category === "physical good" && ob.vendor_offer.listing.shipping.free ) { %>
        <div class="flexCol-6 row10">
          <div class="itemMetaCircle custCol-secondary floatLeft ion-cube marginRight7 fontSize15"></div>
          <div class="itemMetaValue"><%= polyglot.t('FreeShipping') %></div>
        </div>
        <% } %>
      </div>
      <% if(ob.vendor_offer.listing.item.keywords != "") { %>
      <div class="flexRow width100">
        <div class="width100 fontSize15 marginLeft10 textOpacity75 row10">
          <h4><%= polyglot.t('Tags') %></h4>
        </div>
        <div class="marginBottom20  marginLeft7 row10">
          <% _.each(ob.vendor_offer.listing.item.keywords, function(data, i) {
            if(data.length < 100 && i < 11) {
          %>
            <a href="#home/products/<%= data.replace(/\s+/g, '')  %>">
              <div class="btn-pill custCol-secondary floatLeft taggle">
                #<%= data.replace(/\s+/g, '') %>
              </div>
            </a>
          <% } }); %>
        </div>
      </div>
      <% } %>
      <% if(ob.vendor_offer.listing.shipping && ob.vendor_offer.listing.shipping.shipping_regions && ob.vendor_offer.listing.shipping.shipping_regions.length > 0){ %>
      <div class="flexRow width100">
        <div class="width100 fontSize15 marginLeft10 textOpacity75 row10">
          <h4><%= polyglot.t('CanBeShippedTo') %></h4>
        </div>
        <div class="marginBottom20  marginLeft7 row10">
          <% var matchedItemShippableCountries = _.uniq(_.intersection(_.pluck(ob.userAddresses, 'country'), ob.vendor_offer.listing.shipping.shipping_regions));
          if(ob.userAddresses.length > 0) {
            if(matchedItemShippableCountries.length > 0){
              _.each(matchedItemShippableCountries, function(data){
                print("<p>" + polyglot.t(`countries.${data}`) + "</p>");
              });
            } else if(!ob.worldwide){
              print(polyglot.t('NoShippableAddress'));
            } else {
              _.each(_.uniq(_.pluck(ob.userAddresses, 'country')), function(data){
                print("<p>" + polyglot.t(`countries.${data}`) + "</p>");
              });
            }
          } else {
            print(polyglot.t('NoSavedAddresses'));
          }
          %>
        </div>
      </div>
      <% } %>
    </div>
  </div>
</div>

<div class="flexRow border0">
  <div lass="flexCol-12">
    <div id="shareBar" class="marginLeft20">
      Share via <a href="https://duosear.ch">Duo Search</a>:
      <a class="marginRight10 marginLeft10" title="Twitter" href="https://twitter.com/intent/tweet?text=<%= ob.vendor_offer.listing.item.title %>&via=duosearch&hashtags=OpenBazaar&url=https://duosear.ch/<%= ob.vendor_offer.listing.id.blockchain_id || ob.vendor_offer.listing.id.guid %>/listing/<%= ob.itemHash %>"><span class="ion-social-twitter"></span></a>
      <a class="marginRight10" title="Facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://duosear.ch/<%= ob.vendor_offer.listing.id.blockchain_id || ob.vendor_offer.listing.id.guid %>/listing/<%= ob.itemHash %>"><span class="ion-social-facebook"></span></a>
      <a class="marginRight10" title="Reddit" href="https://www.reddit.com/submit?url=https://duosear.ch/<%= ob.vendor_offer.listing.id.blockchain_id || ob.vendor_offer.listing.id.guid %>/listing/<%= ob.itemHash %>"><span class="ion-social-reddit"></span></a>

    </div>
  </div>
</div>


<div class="flexRow border0">
  <div class="flexCol-12">
    <div class="custCol-border marginBottom40 marginTop30">
      <div class="bar navBar barFlush navBar custCol-secondary height55">
        <a class="btn btn-bar btn-tab custCol-secondary js-descriptionTab js-tab marginLeft20 borderRadiusTop borderRadiusBottom0 <% ob.activeTab === 'description' && print('active') %>">
          <span class="ion-android-list fontSize12 marginRight2 textOpacity1"></span>
          <%= polyglot.t('Description') %>
        </a>
        <a class="btn btn-bar btn-tab custCol-secondary js-itemReviewsTab js-tab paddingRight18 <% ob.activeTab === 'itemReviews' && print('active') %>">
          <span class="ion-android-star fontSize11 marginRight2 textOpacity1"></span>
          <%= polyglot.t('Reviews') %>
          <% if (!ob.fetchingRatings) { %>
          <span class="pill fontSize12 textOpacity75 marginLeft2 js-listingReviewCount"><%= ob.totalReviews %></span>
          <% } %>
        </a>
        <a class="btn btn-bar btn-tab custCol-secondary js-shippingTab js-tab <% ob.activeTab === 'shipping' && print('active') %>">
          <span class="ion-cube fontSize11 marginRight2 textOpacity1"></span>
          <%= polyglot.t('ShippingReturns') %>
        </a>
      </div>
      <div class="flexContainer flex-border custCol-primary js-description js-tabTarg textOpacity1 minHeight300 <% ob.activeTab !== 'description' && print('hide') %>">
        <div class="flexRow">
          <div class="rowItem fontSize16 padding30 paddingTop20 lineHeight24 fontWeight400 flexContainer editableContent">
            <%= ob.vendor_offer.listing.item.displayDescription %>
          </div>
        </div>
      </div>
      <div class="flexContainer flex-border custCol-primary minHeight300 textOpacity75 js-itemReviews js-tabTarg <% ob.activeTab !== 'itemReviews' && print('hide') %>">
        <% if (ob.fetchingRatings) { %>
        <div class="padding20 marginBottom12 width100 alignCenter">
          <div class="spinnerWrapper">
            <i class="ion-android-sync spinner textSize24px"></i>
          </div>
        </div>
        <% } %>
        <div class="js-reviewsContainer <% (ob.fetchingRatings) && print ('hide') %>"></div>
      </div>
      <div class="flexContainer flex-border custCol-primary minHeight300 textOpacity75 js-shipping js-tabTarg <% ob.activeTab !== 'shipping' && print('hide') %>">
        <div class="flexRow">
        <% if(ob.vendor_offer.listing.shipping.shipping_regions.length || ob.vendor_offer.listing.policy.returns || ob.vendor_offer.listing.policy.terms_conditions) { %>
          <div class="flexCol-6">
            <div class="rowItem fontSize16 padding30 lineHeight24 fontWeight400">
              <% if(ob.worldwide || ob.shipsLocal){ %>
                <h3><%= polyglot.t('Local') %></h3>
                <div>
                  <% if(ob.userCurrencyCode != "BTC"){ %>
                  <%= polyglot.t('Shipping2') %> <%= ob.displayDomesticShipping %> (<%= ob.formatBitcoin(ob.domesticShippingBTC) %>)
                <% } else { %>
                  <%= polyglot.t('Shipping2') %> <%= ob.formatBitcoin(ob.domesticShippingBTC) %>
                <% } %>
                </div>
                <p><%= polyglot.t('transactions.EstimatedDelivery') %> <%= ob.vendor_offer.listing.shipping.est_delivery.domestic %></p>
              <% } %>
              <% if(ob.worldwide || ob.shipsLocal && ob.nonLocalRegions.length){ %>
                <hr/>
              <% } %>
              <% if(ob.nonLocalRegions.length){ %>
                <h3><%= polyglot.t('International') %></h3>
                <div>
                  <% if(ob.userCurrencyCode != "BTC"){ %>
                    <%= polyglot.t('Shipping2') %> <%= ob.displayInternationalShipping %> (<%= ob.formatBitcoin(ob.internationalShippingBTC) %>)
                <% } else { %>
                  <%= polyglot.t('Shipping2') %> <%= ob.formatBitcoin(ob.internationalShippingBTC) %>
                <% } %>
                </div>
                <p><%= polyglot.t('transactions.EstimatedDelivery') %> <%= ob.vendor_offer.listing.shipping.est_delivery.international %></p>
              <% } %>
              <% if(ob.vendor_offer.listing.policy.returns) { %>
                <h3><%= polyglot.t('ReturnsPolicy') %></h3>
                <p><%= ob.vendor_offer.listing.policy.returns %></p>
              <% } %>
              <% if(ob.vendor_offer.listing.policy.terms_conditions) { %>
                <h3><%= polyglot.t('TermsAndConditions') %></h3>
                <p><%= ob.vendor_offer.listing.policy.terms_conditions %></p>
              <% } %>
            </div>
          </div>
          <div class="flexCol-6">
            <div class="rowItem fontSize16 padding30 lineHeight24 fontWeight400">
              <% if(ob.displayShippingOrigin){ %>
                <h3><%= polyglot.t('ShipsFrom2', {country: ob.displayShippingOrigin}) %></h3>
              <% } %>
              <% if (ob.shippingRegionsDisplay.length == 1){ %>
                <h3><%= polyglot.t('ShipsTo2', {country: ob.shippingRegionsDisplay[0]}) %></h3>
              <% } else if (ob.shippingRegionsDisplay.length) { %>
              <h3><%= polyglot.t('ShipsTo') %></h3>
              <% _.each(ob.shippingRegionsDisplay, function(data, i) { %>
              <div class="row5">
                <%= data %>
              </div>
              <% }); %>
              <% } %>
            </div>
          </div>
        <% } else { %>
          <div class="flexCol-12 flex-border">
            <div class="rowItem">
              <h4 class="txt-center row20 fontSize14 textOpacity75"><%= polyglot.t('NoDetailsSpecified') %></h4>
            </div>
          </div>
        <% } %>
        </div>
      </div>
    </div>
  </div>
</div>