<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a href="/" class="navbar-brand">
    <img src="/logo.jpg" width="30" height="30"/>
    {{ translate "en" "fedihub" }}
  </a>

  <button class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a href="#"
           id="aboutUsNavbarDropdown"
           role="button"
           class="nav-link dropdown-toggle"
           data-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false"
        >
          {{ translate "en" "about-us" }}
        </a>

        <div class="dropdown-menu" aria-labelledby="aboutUsNavbarDropdown">
          <a href="/team" class="dropdown-item">
            {{ translate "en" "our-team" }}
          </a>

          <a href="/donate" class="dropdown-item">
            {{ translate "en" "donate" }}
          </a>

          <a href="/reports" class="dropdown-item">
            {{ translate "en" "reports" }}
          </a>
        </div>
      </li>
    </ul>

    {{#if current_user}}
      <ul class="navbar-nav ml-auto mr-5">
        <li class="nav-item dropdown">
          <a href="#"
             id="currentUserNavbarDropdown"
             role="button"
             class="nav-link dropdown-toggle"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false"
          >
            {{ current_user.username }}
          </a>

          <div class="dropdown-menu" aria-labelledby="currentUserNavbarDropdown">
            <form method="post" action="/sign_out">
              <input type="hidden" name="_method"            value="delete"/>
              <input type="hidden" name="authenticity_token" value="{{ authenticity_token }}"/>

              <button type="submit" class="dropdown-item">
                {{ translate "en" "sign-out" }}
              </button>
            </form>
          </div>
        </li>
      </ul>
    {{else}}
      <div class="ml-auto">
        <a href="/sign_in" role="button" class="btn btn-light mr-2">
          {{ translate "en" "sign-in" }}
        </a>

        <a href="/sign_up" role="button" class="btn btn-primary mr-2">
          {{ translate "en" "sign-up" }}
        </a>
      </div>
    {{/if}}
  </div>
</nav>
