<a id="skip-to-navigation"></a>
<nav class="main-nav" id="main-nav">
  {{>skeleton-nav}}
  {{#unless tradepro-nav}}
    <div class="main-nav__button" data-logged-in="false">
      <a href="/login.html" class="nav-button">
        <span class="nav-button__icon">
            <i class="fas fa-user"></i>
        </span>
        <span class="nav-button__text">Log In / Register</span>
      </a>
    </div>

    <div class="nav-button-wrap" data-logged-in="true">
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon">
              <i class="fas fa-user"></i>
          </span>
          <span class="nav-button__text">Hi, Christopher</span>
        </a>
      </div>
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">My Account</span>
          <span class="rewards-counter">0</span>
        </a>
      </div> 
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Address Book</span>
        </a>
      </div> 
      <div class="main-nav__button">
        <a href="./page_my-account_order-history.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Order History</span>
        </a>
      </div>
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Log Out</span>
        </a>
      </div>
    </div>
  {{/unless}}

  {{#if tradepro-nav}}
    <div class="nav-button-wrap" data-logged-in="false">
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon">
              <i class="fas fa-user"></i>
          </span>
          <span class="nav-button__text">Hi, Test</span>
        </a>
      </div>
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">My TradePro Account</span>
        </a>
      </div> 
      <div class="main-nav__button">
        <a href="./page_my-account_order-history.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Address Book</span>
        </a>
      </div>
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Payment Details</span>
        </a>
      </div>
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Order History</span>
        </a>
      </div>     
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">TradePro Discount Code</span>
        </a>
      </div> 
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">TradePro Rewards</span>
        </a>
      </div>
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Log Out</span>
        </a>
      </div>
    </div>

    <div class="nav-button-wrap" data-logged-in="true">
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon">
              <i class="fas fa-user"></i>
          </span>
          <span class="nav-button__text">Hi, Christopher</span>
        </a>
      </div>
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">My TradePro Account</span>
        </a>
      </div> 
      <div class="main-nav__button">
        <a href="./page_my-account_order-history.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Address Book</span>
        </a>
      </div>
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Payment Details</span>
        </a>
      </div>
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Order History</span>
        </a>
      </div>     
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">TradePro Discount Code</span>
        </a>
      </div> 
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">TradePro Rewards</span>
        </a>
      </div>
      <div class="main-nav__button">
        <a href="./page_my-account.html" class="nav-button">
          <span class="nav-button__icon"></span>
          <span class="nav-button__text">Log Out</span>
        </a>
      </div>
    </div>
  {{/if}}

  <div class="main-nav__button">
    <a href="/login.html" class="nav-button">
      <span class="nav-button__icon">
          <i class="fas fa-map-marked-alt"></i>
      </span>
      <span class="nav-button__text">Track Order</span>
    </a>
  </div>
  <div class="main-nav__button">
    <a href="/login.html" class="nav-button">
      <span class="nav-button__icon">
          <i class="fas fa-lightbulb"></i>
      </span>
      <span class="nav-button__text">Ideas & Advice</span>
    </a>
  </div>
  <div class="main-nav__button">
    {{#if shopListEmpty}}
      <a href="./page_my-shopping-list.html" class="nav-button">
        <span class="nav-button__icon">
            <i class="fas fa-clipboard"></i>
        </span>
        <span class="nav-button__text">Project List</span>
      </a>
    {{else}}
      <a href="./page_my-shopping-list.html" class="nav-button">
        <span class="nav-button__icon">
            <i class="fas fa-clipboard-list"></i>
        </span>
        <span class="nav-button__text">Project List</span>
      </a>
    {{/if}}
  </div>
</nav>
<div class="main-nav__overlay"></div>
