<div class="mainContainer custCol-background">

  <div class="userBar">
    <div class="title-section custCol-primary-darken shadow-inner1-ultra-light">
      <div class="thumbnail pull-left"
      <% if(ob.page.avatar_hash) { %>
      style="background-image: url(<%= ob.user.serverUrl %>get_image?hash=<%= ob.page.avatar_hash %>), url(imgs/defaultUser.png);">
      <% } else { %>
      style="background-image: url(imgs/defaultUser.png);">
      <% } %>
    </div>
    <h1 class="fancy-heading fontSize20 vCentered colorWhiteForce textShadow"><%= polyglot.t('Transactions') %></h1>
    <a href="#userPage" class="btn btn-txt custCol-primary positionWrapper pull-right right10 marginTop9 marginLeft6">
      <span class="ion-document-text fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('GoToMyPage') %>
    </a>
    <a href="#settings" class="btn btn-txt custCol-primary positionWrapper pull-right right10 marginTop9 marginLeft6">
      <span class="ion-toggle-filled fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('nav.settings') %>
    </a>
  </div>
</div>

<div class="bar navBar barFlush custCol-secondary clearFix height55">
  <a class="btn btn-bar btn-tab custCol-secondary js-tab js-purchasesTab paddingRight18 active" data-tab="purchases">
    <span class="ion-log-out fontSize11 marginRight2 textOpacity1"></span>
    <%= polyglot.t('Purchases') %>
    <span class="pill fontSize12 textOpacity75 marginLeft2 js-purchasesCount"></span>
  </a>
  <a class="btn btn-bar btn-tab custCol-secondary js-tab js-salesTab paddingRight18 <% if(!ob.page.vendor){ %>hide<% } %>" data-tab="sales">
    <span class="ion-log-in fontSize11 marginRight2 textOpacity1"></span>
    <%= polyglot.t('Sales') %>
    <span class="pill fontSize12 textOpacity75 marginLeft2 js-salesCount"></span>
  </a>
  <a class="btn btn-bar btn-tab custCol-secondary js-tab js-casesTab paddingRight18 <% if(!ob.page.moderator){ %>hide<% } %>" data-tab="cases">
    <span class="ion-briefcase fontSize11 marginRight2 textOpacity1"></span>
    <%= polyglot.t('Cases') %>
    <span class="pill fontSize12 textOpacity75 marginLeft2 js-casesCount"></span>
  </a>
  <div class="flexExpand marginRight10">
    <a class="btn btn-txt pull-right custCol-primary js-downloadCSV"><i class="ion-archive fontSize12"></i><%= polyglot.t('transactions.ExportCSV') %></a>
  </div>
</div>

<div class="flexContainer color-primary custCol-primary minHeight650">

      <div class="flexRow flex-border positionWrapper js-tabTarg js-purchases" id="transactionsPurchases">
        <div class="selectPill rowTop10">
          <select class="custCol-secondary custCol-text js-transactionFilter">
            <option value="all"><%= polyglot.t('transactions.sortByStatusAll') %></option>
            <option value="0"><%= polyglot.t('transactions.sortByStatus0') %></option>
            <option value="1"><%= polyglot.t('transactions.sortByStatus1') %></option>
            <option value="2"><%= polyglot.t('transactions.sortByStatus2') %></option>
            <option value="3"><%= polyglot.t('transactions.sortByStatus3') %></option>
            <option value="4"><%= polyglot.t('transactions.sortByStatus4') %></option>
            <option value="5"><%= polyglot.t('transactions.sortByStatus5') %></option>
            <option value="6"><%= polyglot.t('transactions.sortByStatus6') %></option>
            <option value="7"><%= polyglot.t('transactions.sortByStatus7') %></option>
            <option value="dateNewest"><%= polyglot.t('transactions.sortByDateNewest') %></option>
            <option value="dateOldest"><%= polyglot.t('transactions.sortByDateOldest') %></option>
          </select>
        </div>
        <div class="pad10 rowTop10">
          <input type="checkbox"
                 class="hide js-toggleUnpaid"
                 id="toggleUnpaidPurchases"
                 data-tab="purchases"
                 <% if(ob.showUnpaid_purchases === 'true'){ %> checked <% } %>
                 value="<%= ob.showUnpaid_purchases || 'false' %>">
          <label for="toggleUnpaidPurchases" class="btn btn-txt custCol-secondary clickable">
            <span class="fontSize12 clickable togLabelOff">
              <%= polyglot.t('transactions.ShowUnpaid') %>
            </span>
            <span class="fontSize12 clickable togLabelOn">
              <%= polyglot.t('transactions.HideUnpaid') %>
            </span>
            (<span class="js-unpaidCount"></span>)
          </label>
        </div>
        <div class="positionWrapper searchWrapper borderBottom custCol-border flexExpand">
          <input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
          <a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
        </div>
        <div class="padding10 width100 alignCenter js-loadingMsg">
          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
        </div>
        <div class="padding10 width100 alignCenter hide js-emptyMsg">
          <%= polyglot.t("transactions.NoPurchases") %>
        </div>
      </div>

      <div class="flexRow flex-border positionWrapper js-tabTarg js-sales hide" id="transactionsSales">
        <div class="selectPill rowTop10">
          <select class="custCol-secondary custCol-text js-transactionFilter">
            <option value="all"><%= polyglot.t('transactions.sortByStatusAll') %></option>
            <option value="0"><%= polyglot.t('transactions.sortByStatus0') %></option>
            <option value="1"><%= polyglot.t('transactions.sortByStatus1') %></option>
            <option value="2"><%= polyglot.t('transactions.sortByStatus2') %></option>
            <option value="3"><%= polyglot.t('transactions.sortByStatus3') %></option>
            <option value="4"><%= polyglot.t('transactions.sortByStatus4') %></option>
            <option value="5"><%= polyglot.t('transactions.sortByStatus5') %></option>
            <option value="6"><%= polyglot.t('transactions.sortByStatus6') %></option>
            <option value="7"><%= polyglot.t('transactions.sortByStatus7') %></option>
            <option value="dateNewest"><%= polyglot.t('transactions.sortByDateNewest') %></option>
            <option value="dateOldest"><%= polyglot.t('transactions.sortByDateOldest') %></option>
          </select>
        </div>
        <div class="pad10 rowTop10">
          <input type="checkbox"
                 class="hide js-toggleUnpaid"
                 id="toggleUnpaidSales"
                 data-tab="sales"
                 <% if(ob.showUnpaid_sales === 'true'){ %> checked <% } %>
                 value="<%= ob.showUnpaid_sales || 'false' %>">
          <label for="toggleUnpaidSales" class="btn btn-txt custCol-secondary clickable">
            <span class="fontSize12 togLabelOff">
              <%= polyglot.t('transactions.ShowUnpaid') %>
            </span>
            <span class="fontSize12 togLabelOn">
              <%= polyglot.t('transactions.HideUnpaid') %>
            </span>
            (<span class="js-unpaidCount"></span>)
          </label>
        </div>
        <div class="positionWrapper searchWrapper borderBottom custCol-border flexExpand">
          <input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
          <a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
        </div>
        <div class="padding10 width100 alignCenter js-loadingMsg">
          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
        </div>
        <div class="padding10 width100 alignCenter hide js-emptyMsg">
          <%= polyglot.t("transactions.NoSales") %>
        </div>
      </div>

      <div class="flexRow flex-border positionWrapper hide js-tabTarg js-cases" id="transactionsCases">
        <div class="selectPill rowTop10">
          <select class="custCol-secondary custCol-text js-transactionFilter">
            <option value="dateNewest"><%= polyglot.t('transactions.sortByDateNewest') %></option>
            <option value="dateOldest"><%= polyglot.t('transactions.sortByDateOldest') %></option>
          </select>
        </div>
        <div class="positionWrapper searchWrapper borderBottom custCol-border flexExpand">
          <input type="text" class="txtField txtField-bar search" placeholder="<%= polyglot.t('transactions.searchByOrder') %>" />
          <a class="btn-corner btn-cornerTR ion-close-circled vCentered icon-med hide js-transactionsSearchClear textOpacity50"></a>
        </div>
        <div class="padding10 width100 alignCenter js-loadingMsg">
          <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
        </div>
        <div class="padding10 width100 alignCenter hide js-emptyMsg">
          <%= polyglot.t("transactions.NoCases") %>
        </div>
      </div>

</div>
<div class="navBar custCol-secondary" style="padding: 4px 0"></div>
</div>

