<div class="navigation-progress" id="navigation-progress">
</div>
<header class="top-bar" id="top-bar">
  <a href="#articles-list" class="skip-content-link">Skip to content</a>
  <div class="top-bar__container">
    <a href="/" class="top-bar--logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a>

    <div id="pwa-nav-buttons" class="pwa-nav-buttons">
      <button type="button" id="app-back-button">
        <%= inline_svg_tag("keyboard-left-arrow-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Back") %>
      </button>
      <button type="button" id="app-forward-button">
        <%= inline_svg_tag("keyboard-right-arrow-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Forward") %>
      </button>
      <button type="button" id="app-refresh-button">
        <%= inline_svg_tag("refresh-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Refresh") %>
      </button>
    </div>

    <div class="top-bar--search" id="top-bar--search">
      <form acceptCharset="UTF-8" method="get" action="/search">
        <input class="top-bar--search-input crayons-textfield" type="text" name="q" id="nav-search" placeholder="Search..." autoComplete="off" />
      </form>
    </div>

    <div class="top-bar__links">
      <a href="/new" class="crayons-btn hidden mr-2 s:block">Write a post</a>

      <a class="top-bar__link trusted-visible-block" aria-label="Modeartion" href="<%= mod_path %>">
        <%= inline_svg_tag("mod.svg", aria: true, class: "crayons-icon", title: "Moderation") %>
      </a>

      <a href="/connect" id="connect-link" class="top-bar__link" aria-label="Connect">
        <%= inline_svg_tag("connect.svg", aria: true, class: "crayons-icon", title: "Connect") %>
        <span class="crayons-indicator crayons-indicator--accent hidden" id="connect-number"></span>
      </a>
      <a href="/notifications" id="notifications-link" class="top-bar__link" aria-label="Notifications">
        <%= inline_svg_tag("bell.svg", aria: true, class: "crayons-icon", title: "Notifications") %>
        <span class="crayons-indicator crayons-indicator--critical hidden" id="notifications-number"></span>
      </a>

      <div class="top-bar__menu" id="top-bar__menu">
        <button type="button" class="top-bar__menu__trigger" id="navigation-butt" aria-label="Navigation menu">
          <% if user_signed_in? %>
            <span class="crayons-avatar crayons-avatar--l"><img class="crayons-avatar__image" alt="" id="nav-profile-image" /></span>
          <% else %>
            <%= inline_svg_tag("hamburger.svg", aria: true, class: "crayons-icon", title: "Navigation menu") %>
          <% end %>
        </button>
        <%= render "layouts/nav_menu" %>
      </div>
    </div>
  </div>
  <% if user_signed_in? %>
    <script async>
      // Here we have some scripts we want to get working on before
      // waiting for the page to stream in.

      // Load the current user's pic as quickly as it's available
      var currentUser = localStorage.getItem('current_user')
      var navProfilePic = document.getElementById('nav-profile-image')
      if (currentUser && navProfilePic) {
        navProfilePic.src = JSON.parse(currentUser).profile_image_90;
      }

      // Load notifications count as quickly as it's available.
      // Not if we're on the notifications page itself
      if (
        window.location.pathname !== '/notifications'
      ) {
        var xmlhttp;
        if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
        } else {
          xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            var count = xmlhttp.response;
            if (isNaN(count)) {
              document
                .getElementById('notifications-number')
                .classList.add('hidden');
            } else if (count != '0' && count != undefined && count != '') {
              document.getElementById('notifications-number').innerHTML =
                xmlhttp.response;
              document
                .getElementById('notifications-number')
                .classList.remove('hidden');
            } else {
              document
                .getElementById('notifications-number')
                .classList.add('hidden');
            }
          }
        };

        xmlhttp.open('GET', '/notifications/counts', true);
        xmlhttp.send();
      }
    </script>
  <% end %>
</header>
