<!-- top banner with logos -->
<div class="header-banner">

  <img src="{{ url_for('static', filename='university-logo--en.svg') }}" alt="University Logo" class="logo">
  <div class="banner-right">

    <div class="heymans-banner">
    Heymans AI tutor (beta)
    </div>
    {% if session.name %}
    <div class="user-banner">
        <img src="{{ url_for('static', filename='divider.svg') }}" class="inline-divider" />
        <span class="username">{{ session.name }}</span>
        <img src="{{ url_for('static', filename='divider.svg') }}" class="inline-divider" />
        <a href="{{ url_for('app.logout') }}" class="regular-button">Log out</a>
        <!-- img src="{{ url_for('static', filename='divider.svg') }}" class="inline-divider" / -->
    </div>
    {% endif %}

    <!-- img src="{{ url_for('static', filename='Dall-E_heymans.svg') }}" alt="Profile Drawing" class="profile" -->
  </div>
</div>

<!-- top menu with functionality -->
<div class="top-menu">
  <ul>
    <li><a href="{{ url_for('app.quiz') }}" class="nav-link">Quiz Grading</a></li>
    <li><a href="#" class="nav-link disabled" @click.prevent>Assignments</a></li>
    <li><a href="#" class="nav-link disabled" @click.prevent>Knowledge Base</a></li>
  </ul>
</div>
<div class="divider"></div>
