<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="{% url 'index' %}">
      <img
        src="https://bulma.io/images/bulma-logo.png"
        width="112"
        height="28"
      />
    </a>

    <a
      role="button"
      class="navbar-burger burger is-active"
      aria-label="menu"
      aria-expanded="false"
      data-target="navbarBasicExample"
    >
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu is-active">
    <div class="navbar-start">
      <a class="navbar-item" href="{% url 'index' %}">
        Home
      </a>

      <a class="navbar-item" href="{% url 'profile' %}">
        Profile
      </a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">

        {% if user.is_authenticated %}
          <p class="has-margin-right-10">Hello, {{ user.username }}</p>
          <div class="buttons">
            <a class="button is-light" href="{% url 'logout' %}">
              Log out
            </a>
          </div>
        {% else %}
          <div class="buttons">
            <a class="button is-primary" href="{% url 'register' %}">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light" href="{% url 'login' %}">
              Log in
            </a>
          </div>
        {% endif %}
        
      </div>
    </div>
  </div>
</nav>
