<div class="mainContainer custCol-background js-mainContainer">
  <div class="banner-large js-userPageBanner custCol-secondary"
        <% if(ob.page.profile.header_hash){ %>
        style="background-image: url(<%= ob.page.headerURL %>), url(imgs/defaultBanner.png);">
        <% } else { %>
        style="background-image: url(imgs/defaultBanner.png);">
        <% } %>
  </div>

  <div id="image-cropper" class="headerCropper banner-large js-pageCustomizationButtons js-headerCropper">
    <div class="headerCropperPreview banner-large cropit-image-preview js-pageCustomizationButtons"></div>
    <div class="statusBar navBar fadeOut positionAbsolute js-headerLoading">
      <div class="pad20 rowTop20 width100"><h2 class="txt-center"><% polyglot.t('LoadingImage') %></h2></div>
    </div>
    <input type="range" class="cropit-image-zoom-input hCentered rowTop20 js-bannerRangeInput hide" />
    <label for="headerImageInput" class="btn btn-c1 btn-txt rowTop20 fullCentered js-pageCustomizationButtons btn-upload-cover-photo custCol-primary">
      <span class="ion-qr-scanner fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('UploadCoverPhoto') %> (950px x 400px)
    </label>
    <input id="headerImageInput" type="file" class="cropit-image-input hide" />
    <div class="bar navBar barFlush user-page-navigation positionBottom">
      <div class="navEnd pad10">
        <div class="ctrlGroup js-pageCustomizationButtons js-userPageControls hide">
          <a class="btn btn-txt custCol-primary js-cancelCustomization"><%= polyglot.t('Cancel') %></a>
        </div>
        <div class="ctrlGroup js-pageCustomizationButtons js-userPageControls hide">
          <a class="btn btn-txt custCol-primary js-saveCustomization">
            <span class="ion-checkmark fontSize11 marginRight2 textOpacity1"></span>
            <%= polyglot.t('SaveChanges') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.save.toUpperCase() %>)
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="user-page-content">
    <div class="user-page-header-slim borderBottom2 custCol-border-secondary user-page-header-slim-tint js-userPageHeaderSlim">
      <div class="user-page-header-slim-bg"
        <% if(ob.page.profile.header_hash){ %>
        style="background-image: url(<%= ob.page.headerURL %>), url(imgs/defaultBanner.png); background-position: center; ">
        <% } else { %>
        style="background-image: url(imgs/defaultBanner.png);">
        <% } %>
      </div>
      <div class="rowItem positionAbsolute bottom0 width600" style="padding: 0 20px">
        <div class="thumbnail user-page-header-slim-avatar  pull-left js-userPageAvatar"
             <% if(ob.page.profile.avatar_hash) { %>
             style="background-image: url(<%= ob.user.serverUrl %>get_image?hash=<%= ob.page.profile.avatar_hash %>), url(imgs/defaultUser.png);">
             <% } else { %>
             style="background-image: url(imgs/defaultUser.png);">
             <% } %>
        </div>
      </div>
      <div class="pull-left">
        <div class="vCentered marginLeft82">
          <h1 class="page-userNameLarge floatLeft fancy-heading fontSize20 colorWhiteForce textShadow">
            <%= ob.page.profile.name %> <span class="hide js-followsMe colorWhiteForce allCaps fontSize11"><%= polyglot.t('FollowsYou') %></span>
          </h1>
        </div>
      </div>
    </div>
  </div>

  <div class="shadow-inner1 user-page-header js-userPageHeader">
    <div class="rowItem positionBottom width100 padding0 paddingLeft20 minEffectsDarkBackground">
      <div class="table">
        <div>
          <div class="thumbnail thumbnail-large js-userPageAvatar"
            <% if(ob.page.profile.avatar_hash) { %>
            style="background-image: url(<%= ob.user.serverUrl %>get_image?hash=<%= ob.page.profile.avatar_hash %>), url(imgs/defaultUser.png);">
            <% } else { %>
            style="background-image: url(imgs/defaultUser.png);">
            <% } %>

            <% if(ob.ownPage) { %>
              <a href="#settings/page" class="userPageEditBtn">
                <div class="btn btn-txt custCol-secondary fontSize11 marginTop4 hCentered ">
                  <span class="ion-edit fontSize10 marginRight2 textOpacity1"></span>
                  <%= polyglot.t('Edit') %>
                </div>
              </a>
            <%}%>
          </div>
          <div class="pad15 pad5Top noOverflow textShadow2">
            <div>
              <span class="h1 page-userNameLarge fancy-heading colorWhiteForce">
                <%= ob.page.profile.name %>
              </span>
            </div>
            <div>
              <span class="textSize16px colorWhiteForce">
              <% if(ob.page.profile.handle) { %><%= ob.page.profile.handle %><% }else{ %><%= ob.page.profile.guid %><% } %>
              </span>
            </div>
          </div>
          <div>
            <div class="hide js-followsMe allCaps fontSize12 padding10">
              <div class="pull-right">Follows You</div>
            </div>
            <div class="widthAuto bar navBar barFlush user-page-navigation-buttons positionBottomRight backgroundTransparent">

              <div class="navEnd pad10">
                <div class="ctrlGroup hide js-pageButtons js-userPageControls zIndex4">
                  <a class="btn btn-txt custCol-primary js-sellItem">
                    <span class="ion-ios-pricetag fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('nav.createListing') %>
                  </a>
                  <a class="btn btn-txt custCol-primary js-createStore">
                    <span class="ion-ios-cart fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('CreateStore') %>
                  </a>
                </div>
                <div class="ctrlGroup hide js-pageButtons js-userPageControls">
                  <a class="btn btn-txt custCol-primary js-customize">
                    <span class="ion-paintbucket fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Customize') %>
                  </a>
                </div>
                <div class="ctrlGroup hide js-notOwnPageButtons js-userPageControls">
                  <a class="btn btn-txt custCol-primary hide js-follow">
                    <span class="ion-person-add fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Follow') %>
                  </a>
                  <a class="btn btn-txt custCol-primary hide confirmable js-unfollow">
                    <span class="preSpacer">
                      <span class="ion-eye-disabled fontSize11 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('Unfollow') %>
                    </span>
                    <span class="preConfirm">
                      <span class="ion-trash-b fontSize11 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('Unfollow') %>
                    </span>
                    <span class="postConfirm">
                      <span class="ion-trash-b fontSize11 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('ConfirmUnfollow') %>
                    </span>
                  </a>
                </div>
                <% if(ob.page.profile.moderator && ob.user.vendor) { %>
  			          <div class="ctrlGroup hide js-notOwnPageButtons js-userPageControls">
                  <a class="btn btn-txt custCol-primary hide js-addmoderator">
                    <span class="ion-person-add fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('AddModerator') %>
                  </a>
                  <a class="btn btn-txt custCol-primary hide confirmable js-removemoderator">
                    <span class="preSpacer">
                      <span class="ion-eye-disabled fontSize11 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('RemoveModerator') %>
                    </span>
                    <span class="preConfirm">
                      <span class="ion-trash-b fontSize11 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('RemoveModerator') %>
                    </span>
                    <span class="postConfirm">
                      <span class="ion-trash-b fontSize11 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('ConfirmRemoveModerator') %>
                    </span>
                  </a>
                </div>
              <% } %>
                <div class="ctrlGroup hide js-notOwnPageButtons js-userPageControls">
                  <a class="btn btn-txt custCol-primary js-message">
                    <span class="ion-email fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Message') %>
                  </a>
                </div>
                <div class="ctrlGroup hide js-itemButtons js-userPageControls hide">
                  <a class="btn btn-txt custCol-primary js-editItem">
                    <span class="ion-compose fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Edit') %>
                  </a>
                </div>
                <div class="ctrlGroup hide js-itemButtons js-userPageControls hide">
                  <a class="btn btn-txt custCol-primary js-cloneItem">
                    <span class="ion-compose fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Clone') %>
                  </a>
                </div>
                <div class="ctrlGroup hide js-extraButtonsNotOwnPage js-userPageControls zIndex4">
                  <a class="btn btn-txt custCol-primary js-block <% if(ob.isBlocked){ %>hide<% } %>">
                    <span class="ion-sad fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Block') %>
                  </a>
                  <a class="btn btn-txt custCol-primary js-unblock <% if(!ob.isBlocked){ %>hide<% } %>">
                    <span class="ion-sad fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Unblock') %>
                  </a>
                </div>
                <div class="ctrlGroup hide js-extraButtonsOwnPage js-userPageControls zIndex4">
                  <a class="btn btn-txt custCol-primary js-moderatorSettings">
                    <span class="ion-ios-pricetag fontSize11 marginRight2 textOpacity1"></span>
                    <span class="js-userPageEditModerator <% if(!ob.page.profile.moderator){ %> hide <% } %>"><%= polyglot.t('EditModerator') %></span>
                    <span class="js-userPageBecomeModerator <% if(ob.page.profile.moderator){ %> hide <% } %>"><%= polyglot.t('BecomeModerator') %></span>
                  </a>
                </div>
                <div class="ctrlGroup hide js-pageButtons js-userPageControls">
                  <a class="btn btn-txt custCol-primary js-moreButtonsOwnPage width34 lineHeight32 padding0">...</a>
                </div>
                <div class="ctrlGroup hide js-notOwnPageButtons js-userPageControls">
                  <a class="btn btn-txt custCol-primary js-moreButtonsNotOwnPage width34 lineHeight32 padding0">...</a>
                </div>
                <div class="ctrlGroup hide js-itemButtons js-userPageControls hide">
                  <a class="btn btn-txt custCol-primary confirmable js-deleteItem">
                    <span class="preSpacer">
                      <span class="ion-trash-b fontSize11 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('Delete') %>
                    </span>
                    <span class="preConfirm">
                      <span class="ion-trash-b fontSize11 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('Delete') %>
                    </span>
                    <span class="postConfirm">
                      <span class="ion-trash-b fontSize11 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('ConfirmDelete') %>
                    </span>
                  </a>
                </div>
                <div class="ctrlGroup hide js-itemEditButtons js-userPageControls hide textOpacity1">
                  <a class="btn btn-txt custCol-primary js-cancelItem"><%= polyglot.t('Cancel') %></a>
                </div>
                <div class="ctrlGroup hide js-itemCustomizationButtons js-userPageControls hide textOpacity1">
                  <a class="btn btn-txt custCol-primary js-cancelCustomization"><%= polyglot.t('Cancel') %></a>
                </div>
                <div class="ctrlGroup hide js-itemEditButtons js-userPageControls hide">
                  <a class="btn btn-txt custCol-primary js-saveItem">
                    <span class="ion-checkmark fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('SaveChanges') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.save.toUpperCase() %>)
                  </a>
                </div>
                <div class="ctrlGroup hide js-itemCustomizationButtons js-userPageControls hide">
                  <a class="btn btn-txt custCol-primary js-saveCustomization">
                    <span class="ion-checkmark fontSize11 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('SaveChanges') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.save.toUpperCase() %>)
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="bar navBar barFlush user-page-navigation custCol-secondary height55 js-userPageTabs">
    <a class="btn btn-bar btn-tab custCol-secondary js-aboutTab js-tab">
      <span class="ion-ios-book fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('About') %>
    </a>
    <a class="btn btn-bar btn-tab custCol-secondary js-followingTab js-tab paddingRight18">
      <span class="ion-person fontSize11 marginRight2 textOpacity"></span>
      <%= polyglot.t('Following') %>
      <span class="pill fontSize12 textOpacity75 marginLeft2 js-userFollowingCount">...</span>
    </a>
    <a class="btn btn-bar btn-tab custCol-secondary js-followersTab js-tab paddingRight18">
      <span class="ion-person-stalker fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('Followers') %>
      <span class="pill fontSize12 textOpacity75 marginLeft2 js-userFollowerCount">...</span>
    </a>
    <% if(ob.page.profile.vendor) { %>
    <a class="btn btn-bar btn-tab custCol-secondary js-reviewsTab js-tab paddingRight18">
      <span class="ion-android-star fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('Reviews') %>
      <span class="pill fontSize12 textOpacity75 marginLeft2 js-userReviewsCount">...</span>
    </a>
    <% } %>
    <% if(ob.page.profile.vendor) { %>
    <a class="btn btn-bar btn-tab custCol-secondary js-storeTab js-tab paddingRight18">
      <span class="ion-ios-cart fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('Store') %>
      <span class="pill fontSize12 textOpacity75 marginLeft2 js-listingCount">...</span>
    <% } %>
    </a>
  </div>
  <div class="userPage-subViews custCol-primary minHeight650 js-userPageSubViews">
    <div class="flexContainer flex-border custCol-primary hide js-about js-tabTarg minHeight650">
      <div class="flexRow minHeight650">
        <div class="flexCol-8 custCol-border borderBottom0">
          <div class="rowItem userPageAboutSection js-userPageAboutSection padding2520">
            <% if(ob.ownPage) { %>
              <a href="#settings/page">
                <div class="btn btn-txt userPageEditBtn custCol-secondary fontSize12 js-editPage">
                  <span class="ion-edit fontSize10 marginRight2 textOpacity1"></span>
                  <%= polyglot.t('Edit') %>
                </div>
              </a>
            <%}%>
            <% if(ob.page.profile.about) { %>
             <div class="js-userAbout margin0 editableContent fontSize14"><%= ob.page.profile.displayAbout %></div>
            <%}else{%>
              <span class="textOpacity75"><%= polyglot.t('AboutEmpty') %></span>
            <%}%>
          </div>
        </div>
        <div class="flexCol-4 flex-border border0 userPageSocialAccounts overflowHidden">
          <div class="flexRow">
            <div class="flexRow borderBottom custCol-border">
              <div class="rowItem positionWrapper noOverflow">
                <div class="textOpacity75 fontSize14"><%= polyglot.t('Guid') %></div>
                <div class="textSize11px">
                  <%= ob.page.profile.guid %>
                </div>
              </div>
            </div>
            <div class="flexRow custCol-border">
              <div class="rowItem positionWrapper noOverflow">
                <div class="textOpacity75 fontSize14"><%= polyglot.t('Website') %></div>
                <% if(ob.ownPage) { %>
                  <a href="#settings/page" class="userPageEditBtn">
                    <div class="btn btn-txt custCol-secondary fontSize12 js-editPage">
                      <span class="ion-edit fontSize10 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('Edit') %>
                    </div>
                  </a>
                <%}%>
                <% if(ob.page.profile.website) { %>
                <a href="<%= ob.page.profile.website %>" class="js-externalLink"><%= ob.short_website %></a> <span class="ion-android-open fontSize10"></span>
                <%}else{%>
                <%= polyglot.t('NotProvided') %>
                <%}%>
              </div>
            </div>
            <div class="flexRow custCol-border">
              <div class="rowItem positionWrapper noOverflow">
                <div class="textOpacity75 fontSize14"><%= polyglot.t('Email') %></div>
                <% if(ob.ownPage) { %>
                  <a href="#settings/page" class="userPageEditBtn">
                    <div class="btn btn-txt custCol-secondary fontSize12 js-editPage">
                      <span class="ion-edit fontSize10 marginRight2 textOpacity1"></span>
                      <%= polyglot.t('Edit') %>
                    </div>
                  </a>
                <%}%>
                <% if(ob.page.profile.email) { %>
                <a href="mailto:<%= ob.page.profile.email %>"><%= ob.page.profile.email %></a> <span class="ion-android-open fontSize10"></span>
                <%}else{%>
                <%= polyglot.t('NotProvided') %>
                <%}%>
              </div>
            </div>
            <div class="flexRow custCol-border">
              <div class="rowItem positionWrapper noOverflow">
              <% if(ob.ownPage) { %>
                <a href="#settings/page" class="userPageEditBtn">
                  <div class="btn btn-txt custCol-secondary fontSize12 js-editPage">
                    <span class="ion-edit fontSize10 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Edit') %>
                  </div>
                </a>
              <%}%>
                <div class="textOpacity75 fontSize14"><%= polyglot.t('Facebook') %></div>
                <% if(ob.page.profile.social_accounts.facebook && ob.page.profile.social_accounts.facebook.username) { %>
                  <a href="https://facebook.com/<%= ob.page.profile.social_accounts.facebook.username %>">
                    <%= ob.page.profile.social_accounts.facebook.username %>
                  </a> <i class="ion-android-open fontSize10"></i>
                <%}else{%>
                  <%= polyglot.t('NotProvided') %>
                <%}%>
              </div>
            </div>
            <div class="flexRow custCol-border">
              <div class="rowItem positionWrapper noOverflow">
              <% if(ob.ownPage) { %>
                <a href="#settings/page" class="userPageEditBtn">
                  <div class="btn btn-txt custCol-secondary fontSize12 js-editPage">
                    <span class="ion-edit fontSize10 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Edit') %>
                  </div>
                </a>
              <%}%>
              <div class="textOpacity75 fontSize14"><%= polyglot.t('Twitter') %></div>
              <% if(ob.page.profile.social_accounts.twitter && ob.page.profile.social_accounts.twitter.username) { %>
                <a href="https://twitter.com/<%= ob.page.profile.social_accounts.twitter.username %>">
                  <%= ob.page.profile.social_accounts.twitter.username %>
                </a> <i class="ion-android-open fontSize10"></i>
              <%}else{%>
              <%= polyglot.t('NotProvided') %>
              <%}%>
              </div>
            </div>
            <div class="flexRow custCol-border">
              <div class="rowItem positionWrapper noOverflow">
              <% if(ob.ownPage) { %>
                <a href="#settings/page" class="userPageEditBtn">
                  <div class="btn btn-txt custCol-secondary fontSize12 js-editPage">
                    <span class="ion-edit fontSize10 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Edit') %>
                  </div>
                </a>
              <%}%>
              <div class="textOpacity75 fontSize14"><%= polyglot.t('Instagram') %></div>
                <% if(ob.page.profile.social_accounts.instagram && ob.page.profile.social_accounts.instagram.username) { %>
                  <a href="https://instagram.com/<%= ob.page.profile.social_accounts.instagram.username %>">
                    <%= ob.page.profile.social_accounts.instagram.username %>
                  </a> <i class="ion-android-open fontSize10"></i>
                <%}else{%>
                  <%= polyglot.t('NotProvided') %>
                <%}%>
              </div>
            </div>
            <div class="flexRow custCol-border">
              <div class="rowItem positionWrapper noOverflow">
              <% if(ob.ownPage) { %>
                <a href="#settings/page" class="userPageEditBtn">
                  <div class="btn btn-txt custCol-secondary fontSize12 js-editPage">
                    <span class="ion-edit fontSize10 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Edit') %>
                  </div>
                </a>
              <%}%>
              <div class="textOpacity75 fontSize14"><%= polyglot.t('Snapchat') %></div>
                <% if(ob.page.profile.social_accounts.snapchat && ob.page.profile.social_accounts.snapchat.username) { %>
                  <a href="https://snapchat.com/add/<%= ob.page.profile.social_accounts.snapchat.username %>">
                    <%= ob.page.profile.social_accounts.snapchat.username %>
                  </a> <i class="ion-android-open fontSize10"></i>
                <%}else{%>
                  <%= polyglot.t('NotProvided') %>
                <%}%>
              </div>
            </div>
            <div class="flexRow borderBottom custCol-border TODO">
              <div class="rowItem positionWrapper noOverflow">
              <% if(ob.ownPage) { %>
                <a href="#settings/page" class="userPageEditBtn">
                  <div class="btn btn-txt custCol-secondary">
                    <span class="ion-edit fontSize10 marginRight2 textOpacity1"></span>
                    <%= polyglot.t('Edit') %>
                  </div>
                </a>
              <%}%>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flexContainer flex-border custCol-primary js-reviews js-tabTarg hide minHeight650">
      <div class="flexRow js-list6">
        <div class="padding10 width100 alignCenter js-loadingMsg borderBottom">
          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
        </div>
      </div>
    </div>
    <div class="flexContainer flex-border custCol-primary js-followers js-tabTarg hide minHeight650" id="searchFollowers">
      <div class="flexRow height54">
        <!--<div class="txtFieldWrapper searchWrapper searchWrapperWithPill borderBottom custCol-border">-->
        <div class="txtFieldWrapper searchWrapper borderBottom custCol-border">
          <input type="text" id="inputFollowers" class="txtField txtField-bar search" placeholder="<%= polyglot.t('SearchForFollowersPlaceholder') %>" />
        </div>
        <!--
        <div class="selectPill pull-up43">
          <select class="custCol-secondary custcol-text">
            <option value="all" selected><%= polyglot.t('filters.pagesAllTypes') %></option>
            <option value="stores"><%= 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 class="flexRow js-list1">
        <div class="padding10 width100 alignCenter js-loadingMsg borderBottom">
          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
        </div>
      </div>
    </div>
    <div class="flexContainer flex-border custCol-primary js-following js-tabTarg hide minHeight650" id="searchFollowing">
      <div class="flexRow height54">
        <!--<div class="txtFieldWrapper searchWrapper searchWrapperWithPill borderBottom custCol-border">-->
        <div class="txtFieldWrapper searchWrapper borderBottom custCol-border">
          <input type="text" id="inputFollowing" class="txtField txtField-bar search" placeholder="<%= polyglot.t('SearchForFollowingPlaceholder') %>" />
        </div>
        <!--
        <div class="selectPill pull-up43">
          <select class="custCol-secondary custcol-text">
            <option value="all" selected><%= polyglot.t('filters.pagesAllTypes') %></option>
            <option value="stores"><%= 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 class="flexRow js-list2">
        <div class="padding10 width100 alignCenter js-loadingMsg borderBottom">
          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
        </div>
      </div>
    </div>
    <div class="flexContainer flex-border custCol-primary js-store js-tabTarg hide minHeight650" id="searchStore">
      <div class="flexRow positionWrapper">
        <div class="flexRow custCol-border">
          <div class="txtFieldWrapper searchWrapper searchWrapperWithPill">
            <input type="text" id="inputStore" class="txtField txtField-bar search" placeholder="<%= polyglot.t('SearchOnUserStorePlaceholder') %>"  />
          </div>
        </div>
        <div class="selectPill positionAbsolute left0 top11">
          <select id="categories" class="custCol-secondary js-categories custCol-text">
            <option value="all" selected><%= polyglot.t('All') %></option>
          </select>
        </div>
      </div>
      <div class="flexRow js-list3 list">
        <div class="padding10 width100 alignCenter js-loadingMsg borderBottom">
          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
        </div>
      </div>
    </div>
    <div class="flexContainer flex-border custCol-primary js-item js-tabTarg hide minHeight650">
      <div class="flexRow js-list4 minHeight650">
        <div class="padding10 width100 alignCenter js-loadingMsg borderBottom">
          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
        </div>
      </div>
    </div>
    <div class="flexContainer flex-border custCol-primary js-itemEdit js-tabTarg hide minHeight650">
      <div class="flexRow itemEdit js-list5 minHeight650 positionWrapper"></div>
    </div>
  </div>
  <div class="navBar custCol-secondary" style="padding: 4px 0"></div>
</div>

<div id="customizeControls" class="hide">
  <div class="positionWrapper js-customizePrimaryColor">
    <div class="interactiveTooltip seeTooltip"><div class="noOverflow"><%= polyglot.t('ClickToChange') %></div></div>
    <div class="customizePrimaryColorRecommendations js-customizeColorRecommendations">
      <div class="marginLeft7 floatLeft customizePrimaryColorChoices js-customizePrimaryColorChoices">
        <div class="customColorChoice customColorChoiceControl js-customColorChoice js-customColorChoicePicker" data-color-key=""><span class="customColorPicker ion-android-color-palette colorWhiteForce"></span></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice1" data-color-key="primary_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice2" data-color-key="primary_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice3" data-color-key="primary_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice4" data-color-key="primary_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice5" data-color-key="primary_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice6" data-color-key="primary_color"></div>
      </div>
    </div>
    <label class="btn btn-square btn-corner btn-cornerTL btn-flushTL box-borderBright js-customizeColor" for="primary_color"></label>
    <div class="labelWrap width40 fade">
      <div><input class="js-customizeColorInput" type="text" id="primary_color" size="7"/></div>
    </div>
  </div>
  <div class="positionWrapper js-customizeSecondaryColor">
    <div class="customizeSecondaryColorRecommendations js-customizeColorRecommendations">
      <div class="marginLeft7 floatLeft customizeSecondaryColorChoices js-customizeSecondaryColorChoices">
        <div class="customColorChoice customColorChoiceControl js-customColorChoice js-customColorChoicePicker" data-color-key=""><span class="customColorPicker ion-android-color-palette colorWhiteForce"></span></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice1" data-color-key="secondary_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice2" data-color-key="secondary_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice3" data-color-key="secondary_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice4" data-color-key="secondary_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice5" data-color-key="secondary_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice6" data-color-key="secondary_color"></div>
      </div>
    </div>
    <label class="btn btn-square btn-corner btn-cornerTL btn-flushTL box-borderBright js-customizeColor" for="secondary_color"></label>
    <div class="labelWrap width40 fade">
      <div><input class="js-customizeColorInput" type="text" id="secondary_color" size="7"/></div>
    </div>
  </div>
  <div class="positionWrapper js-customizeBackgroundColor">
    <div class="customizeBackgroundColorRecommendations js-customizeColorRecommendations">
      <div class="marginLeft7 floatLeft customizeBackGrounColorChoices js-customizeBackgroundColorChoices">
        <div class="customColorChoice customColorChoiceControl js-customColorChoice js-customColorChoicePicker" data-color-key=""><span class="customColorPicker ion-android-color-palette colorWhiteForce"></span></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice1" data-color-key="background_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice2" data-color-key="background_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice3" data-color-key="background_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice4" data-color-key="background_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice5" data-color-key="background_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice6" data-color-key="background_color"></div>
      </div>
    </div>
    <label class="btn btn-square btn-corner btn-cornerTL btn-flushTL box-borderBright js-customizeColor" for="background_color"></label>
    <div class="labelWrap width40 fade">
      <div><input class="js-customizeColorInput" type="text" id="background_color" size="7"/></div>
    </div>
  </div>
  <div class="positionWrapper js-customizeTextColor">
    <div class="customizeTextColorRecommendations js-customizeColorRecommendations">
      <div class="marginLeft7 floatLeft customizeTextColorChoices js-customizeTextColorChoices">
        <div class="customColorChoice customColorChoiceControl js-customColorChoice js-customColorChoicePicker" data-color-key=""><span class="customColorPicker ion-android-color-palette colorWhiteForce"></span></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice1" data-color-key="text_color"></div>
        <div class="customColorChoice js-customColorChoice js-customColorChoice2" data-color-key="text_color"></div>
      </div>
    </div>
    <label class="btn btn-square btn-corner btn-cornerTL btn-flushTL box-borderBright js-customizeColor" for="text_color"></label>
    <div class="labelWrap width40 fade">
      <div><input class="js-customizeColorInput" type="text" id="text_color" size="7"/></div>
    </div>
  </div>
</div>

<%= ob.backToTopTmpl({ className: 'custCol-secondary' }) %>
