<div class="js-navProfileMenu popMenu popMenu-navBar">
  <div class="popMenu-navBarSubMenu popMenu-navBarSubMenu-pageNav">
    <a class="js-serverSubmenuTrigger">
      <div class="noOverflow inlineBlock" style="max-width: 171px"><%= ob.connectedServer.name %></div>
      <span class="pull-right txt-muted ion-arrow-right-b positionRelative" style="top: 4px"></span>
    </a>
    <hr/>
    <a href="#userPage/<%= ob.guid %>">
      <span class="ion-document-text fontSize12 marginRight2 textOpacity1"></span>
    	<%= polyglot.t('nav.myPage') %>
    	<span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.myPage.toUpperCase() %></span>
    </a>
    <a href="#userPage/<%= ob.guid %>/customize">
      <span class="ion-paintbucket fontSize10  textOpacity1"></span>
      <%= polyglot.t('nav.customizePage') %>
  	<span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.customizePage.toUpperCase() %></span>
    </a>
    <% if(ob.vendor) { %>
      <a href="#userPage/<%= ob.guid %>/listingNew" >
        <span class="ion-ios-pricetag fontSize10 marginRight2 textOpacity1"></span>
        <%= polyglot.t('nav.createListing') %>
  	  <span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.create.toUpperCase() %></span>
      </a>
    <% }else{ %>
      <a href="#userPage/<%= ob.guid %>/createStore">
        <span class="ion-ios-cart fontSize11 marginRight2 textOpacity1"></span>
        <%= polyglot.t('CreateStore') %>
      </a>
    <% } %>
    <% if(!ob.moderator){ %>
      <a href="#userPage/<%- ob.guid %>/becomeModerator">
        <span class="ion-bowtie fontSize11 marginRight2 textOpacity1"></span>
        <span class="js-userPageBecomeModerator">
          <%= polyglot.t('BecomeModerator') %>
        </span>
      </a>
    <% } %>
    <hr/>
    <a href="#transactions/purchases">
      <span class="ion-log-out fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('nav.purchases') %>
  	<span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.purchases.toUpperCase() %></span>
    </a>
    <% if(ob.vendor) { %>
      <a href="#transactions/sales">
        <span class="ion-log-in fontSize11 marginRight2 textOpacity1"></span>
        <%= polyglot.t('nav.sales') %>
  	  <span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.sales.toUpperCase() %></span>
      </a>
    <% } %>
    <% if(ob.moderator) { %>
      <a href="#transactions/cases">
        <span class="ion-briefcase fontSize11 marginRight2 textOpacity1"></span>
        <%= polyglot.t('nav.cases') %>
  	  <span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.cases.toUpperCase() %></span>
      </a>
    <% } %>
    <hr/>
    <a href="#settings">
      <span class="ion-toggle-filled fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('nav.settings') %>
  	<span class="pull-right txt-muted marginLeft10"><%= config.keyShortcutPrefix + config.keyShortcuts.settings.toUpperCase() %></span>
    </a>
    <hr/>
    <a class="js-showAboutModal">
      <span class="ion-ios-book fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('nav.about') %>
    </a>
    <a class="js-showSupportModal">
      <span class="ion-android-favorite fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('nav.support') %>
    </a>
    <a class="js-showSupportModal">
      <span class="ion-android-share fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('nav.share') %>
    </a>
  </div>

  <div class="js-serverSubmenu popMenu-navBarSubMenu popMenu-navBarSubMenu-servers"></div>
</div>

<div class="popMenu popMenu-notifications js-navNotificationsMenu" data-onclose="onNotifMenuClose" data-onopen="onNotifMenuOpen">
  <div id="notificationsPanel"></div>
</div>

<div id="pageNavBar" class="bar navBar custCol-secondary">
  <div class="ctrlGroup">
    <a class="btn btn-togLeft btn-back ion-chevron-left js-navBack custCol-primary custCol-text fontSize13 tooltip" data-tooltip="<%= polyglot.t('nav.Back') %>"></a>
    <a class="btn btn-togRight btn-fwd ion-chevron-right js-navFwd custCol-primary custCol-text fontSize13 tooltip" data-tooltip="<%= polyglot.t('nav.Forward') %>"></a>
  </div>
  <div class="ctrlGroup">
    <a class="btn btn-home ion-refresh custCol-primary custCol-text js-navRefresh tooltip" data-tooltip="<%= polyglot.t('Reload') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.refresh.toUpperCase() %>)"> </a>
  </div>
  <div class="ctrlGroup flexExpand">
    <div class="txtFieldWrapper searchWrapper mainSearchWrapper js-mainSearchWrapper">
      <input type="text" class="txtField js-navAddressBar borderRadius3" id="addressBar" placeholder="<%= polyglot.t('nav.searchPlaceholder') %>" />
      <% if(config.testnet) { %>
      <div class="testnetBadge">
        <span class="ion-alert-circled fontSize9"></span>
        <%= polyglot.t('nav.testMode') %>
      </div>
      <% } %>

    </div>
  </div>
  <div class="ctrlGroup">
    <a class="btn btn-home ion-eye custCol-primary custCol-text fontSize15 tooltip" href="#home" data-tooltip="<%= polyglot.t('Discover') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.discover.toUpperCase() %>)"></a>
  </div>
  <div class="ctrlGroup">
    <div class="btn btn-notifications ion-android-notifications custCol-primary  custCol-text fontSize14 js-navNotifications tooltip" data-tooltip="<%= polyglot.t('nav.notifications') %>" data-popmenu=".popMenu-notifications">
      <div class="badge"></div>
    </div>
  </div>

  <div class="ctrlGroup nav-profile">
    <div class="btn btn-profile js-navProfile tooltip" data-tooltip="<%= polyglot.t('Menu') %>" data-popmenu=".popMenu-navBar"
    <% if(ob.avatar_hash != "") { %>
    style="background-image: url(<%= ob.serverUrl %>get_image?hash=<%= ob.avatar_hash %>), url(imgs/defaultUser.png);"
    <% }else{ %>
    style="background-image: url(imgs/defaultUser.png)"
    <% } %>></div>
  </div>

  <div class="statusBar navBar navBar-main fadeOut js-navStatusBar">
    <div class="pad20 js-statusBarMessage"></div>
    <div class="btn-corner btn-cornerTR btn-cornerTRSmall js-closeStatus">
      <h3 class="txt-unleaded ion-close-circled"></h3>
    </div>
  </div>

  <div id="adminPanel"></div>
</div>

<div class="onboardingIntroDiscover js-OnboardingIntroDiscoverHolder hide">
  <a href="#home" class="js-OnboardingIntroDiscover">
    <div>
      <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
    </div>
    <p class="textOpacity75 padding025 fontSize15 margin8"><%= polyglot.t('onboarding.discoverCallOut') %></p>
    <div class="btn btn-enter custCol-secondary custCol-text"><%= polyglot.t('Enter') %></div>
  </a>
</div>

<div class="softwareUpdate softwareUpdateHidden js-softwareUpdate">
  <div class="clearFix">
    <div class="ion-android-download fontSize20 floatLeft marginRight8"></div>
    <div class="fontSize15 floatLeft marginTop3"><%= polyglot.t('softwareUpdate.updateAvailable') %></div>
  </div>
  <div class="marginLeft30 marginTop2">
    <div class="btn btn-txt js-navInstallUpdate"><%= polyglot.t('softwareUpdate.installUpdate') %></div>
    <div class="fontSize11 textOpacity75 marginTop8 marginLeft7 floatLeft js-navDismisslUpdate clickable"><%= polyglot.t('softwareUpdate.dismiss') %></div>
  </div>
</div>

<div class="socialReminder js-socialReminder">
  <% var shareURL = "https%3A%2F%2Fopenbazaar.org" %>
  <h3 class="socialTitle"><%= polyglot.t('socialReminder.reminder') %>&nbsp;
    <span class="socialInfoLink js-socialInfoLink">
      <%= polyglot.t('socialReminder.explanationLink', { linkText: polyglot.t('socialReminder.explanationLinkText') }) %>
    </span>
  </h3>
  <p class="socialParagraph hide js-socialParagraph"><%= polyglot.t('socialReminder.explanation') %></p>
  <p class="socialDisclaimer hide js-socialParagraph"><%= polyglot.t('socialReminder.disclaimer') %></p>
  <div class="closeBtn js-socialCloseBtn"><i class="ion-close"></i></div>
  <div class="socialLinkWrapper">
    <a class="socialLink" href="https://twitter.com/intent/tweet/?text=<%= polyglot.t('socialReminder.blurb') %>&url=<%= shareURL %>&hashtags=TradeFree&related=openbazaar%3AOpenBazaar,News%20about%20OpenBazaar">
      <span class="ion-social-twitter socialIcon"></span>
    </a>
    <a class="socialLink" href="https://www.facebook.com/sharer/sharer.php?u=<%= shareURL %>">
      <span class="ion-social-facebook socialIcon"></span>
    </a>
    <a class="socialLink" href=http://pinterest.com/pin/create/button/?url=<%= shareURL %>&description=<%= polyglot.t('socialReminder.blurb') %>">
      <span class="ion-social-pinterest socialIcon"></span>
    </a>
    <a class="socialLink" href="https://www.linkedin.com/shareArticle?mini=true&url=<%= shareURL %>&title=<%= polyglot.t('socialReminder.title') %>&summary=<%= polyglot.t('socialReminder.blurb') %>&source=OpenBazaar">
      <span class="ion-social-linkedin socialIcon"></span>
    </a>
    <a class="socialLink" href="http://www.tumblr.com/share/link?url=<%= shareURL %>&name=OpenBazaar&description=<%= polyglot.t('socialReminder.blurb') %>">
      <span class="ion-social-tumblr socialIcon"></span>
    </a>
  </div>
</div>
