<div class="mainContainer">
  <div class="home-page-header">
    <div class="welcomeBar">
      <div class="welcomeBar-inner">
        <h1 class="fancy-heading fontSize20 vCentered js-discoverHeading"><%= polyglot.t('Discover') %></h1>
        <a href="#userPage" class="btn btn-txt custCol-background positionWrapper pull-right right10 marginTop9 marginLeft6">
          <span class="ion-document-text fontSize11 marginRight2 textOpacity1"></span>
          <%= polyglot.t('GoToMyPage') %>
        </a>
        <a class="btn btn-txt custCol-background js-sellItem positionWrapper pull-right marginTop9 right10 js-homeCreateListing">
          <span class="ion-ios-pricetag fontSize11 marginRight2 textOpacity1"></span>
          <%= polyglot.t('nav.createListing') %>
        </a>  
        <a class="btn btn-txt custCol-background positionWrapper pull-right marginTop9 right10 js-homeCreateStore">
          <span class="ion-ios-cart fontSize11 marginRight2 textOpacity1"></span>
          <%= polyglot.t('CreateStore') %>
        </a>
      </div>
    </div>

    <div class="bar barFlush navBar home-page-navigation height55">
      <a class="btn btn-bar btn-tab active js-productsTab">
        <span class="ion-ios-pricetag fontSize11 marginRight2 textOpacity1"></span> 
        <%= polyglot.t('Listings') %>
      </a>
      <a class="btn btn-bar btn-tab js-vendorsTab">
        <span class="ion-document-text fontSize12 marginRight2 textOpacity1"></span> 
        <%= polyglot.t('Pages') %>
      </a>
    </div>
  </div>
  <div class="bar home-page-navigation-filler hide custCol-primary"></div>
  <div class="flex-border color-primary height54 js-productsSearch">
    <div class="flexRow">
      <div class="flexRow borderBottom">
        <div class="flexCol-12">
          <div class="txtFieldWrapper searchWrapper">
            <input type="text" class="txtField txtField-bar js-homeSearchItems" placeholder="<%= polyglot.t('SearchForItemsPlaceholder') %>" />
            <a class="btn-corner btn-cornerTR ion-ios-close vCentered icon-med hide js-homeSearchItemsClear textOpacity50"></a>
          </div>
          <div class="flexRow positionAbsolute">
            <div class="btn-togWrapper btn-togWrapper-c1 btn-toWrapper-discoverToggle marginRight10 js-homeListingToggle">
              <a class="btn btn-txt btn-discoverToggle borderRadiusBottom0 btn-togLeft active js-homeListingsFollowed tooltip tooltip-left"
                 data-tooltip="<%= polyglot.t('ShowOnlyFollowerListingsTooltip') %>">
                <span class="ion-person fontSize11 marginRight2 toggle-txt"></span>
                <span class="toggle-txt"><%= polyglot.t('ShowOnlyFollowerListings') %></span>
              </a>
              <% if(!localStorage.getItem('safeListingsWarningDissmissed')){ %>
                <div class="discoverToggleHelper js-discoverToggleHelper"><%= polyglot.t('TryRandom') %></div>
              <% } %>
              <a class="btn btn-txt btn-discoverToggle borderRadiusBottom0 btn-togRight js-homeListingsAll tooltip tooltip-left"
                 data-tooltip="<%= polyglot.t('ShowAllListingsTooltip') %>">
                <span class="ion-earth fontSize11 marginRight2 toggle-txt"></span>
                <span class="toggle-txt"><%= polyglot.t('Random') %></span>
              </a>
            </div>
          </div>
        </div>
        <!--
        <div class="js-vendorsSearch width100 hide">
          <div class="txtFieldWrapper searchWrapper searchWrapperWithPill borderBottom">
            <input type="text" class="txtField txtField-bar js-homeSearchUsers" placeholder="<%= polyglot.t('SearchForPagesPlaceholder') %>" />
          </div>
          <div class="selectPill pull-up43">
            <select class="custCol-secondary">
              <option value="all"><%= polyglot.t('filters.pagesAllTypes') %></option>
              <option value="stores" selected><%= polyglot.t('filters.pagesStores') %></option>
              <option value="moderators"><%= polyglot.t('filters.pagesMods') %></option>
              <option value="basic"><%= polyglot.t('filters.pagesBasic') %></option>
            </select>
          </div>
        </div>
        -->
      </div>
    </div>
  </div>
  <div class="flexRow flexRow-wrap color-primary js-vendors minHeight650 hide">
    <div class="padding10 width100 alignCenter js-loadingSpinner spinnerWrapper borderTop">
      <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
    </div>
  </div>
  <div class="homeGridItems">
    <div class="js-products color-primary minHeight650">
      <div class="js-blocked-listings-count color-primary width100 hide"></div>
      <div class="flexRow">
        <div class="padding10 marginBottom12 width100 alignCenter js-loadingSpinner">
          <div class="js-loadingMessage spinnerWrapper">
            <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
            <div class="textOpacity75 typeWeight400 marginTop6">
              <div class="js-loadingText" data-default-text="<%= polyglot.t('discover.searchDefaultText') %>" data-searching-text="<%= polyglot.t('discover.searchingText') %>"><%= polyglot.t('discover.searchDefaultText') %></div>
            </div>
          </div> 
        </div>
      </div>
    </div>
  </div>
  <%= ob.backToTopTmpl() %>
  <div class="navBar custCol-secondary" style="padding: 4px 0"></div>
</div>
