{% extends "base.html" %}

{% block body %}
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img src="/static/brass.jpeg" height="240" />
    </a>

    <a role="button" class="navbar-burger" 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 class="navbar-menu">
    <div hx-boost="true" class="navbar-start">
      <a href="/" class="navbar-item">
        Kalender
      </a>

      {% match user.role %}
      {% when Role::Staff %}
      {% when Role::AreaManager %}
      <div class="navbar-item has-dropdown is-hoverable">
        <div class="navbar-item">
          Export
        </div>

        <div class="navbar-dropdown">
          <a href="/export/availability" class="navbar-item">
            Verfügbarkeiten
          </a>
        </div>
      </div>
      <a href="/locations" class="navbar-item">
        Veranstaltungsorte
      </a>
      <a href="/users" class="navbar-item">
        Nutzerverwaltung
      </a>
      {% when Role::Admin %}
      <div class="navbar-item has-dropdown is-hoverable">
        <div class="navbar-item">
          Export
        </div>

        <div class="navbar-dropdown">
          <a href="/export/availability" class="navbar-item">
            Verfügbarkeiten
          </a>
        </div>
      </div>
      <a href="/locations" class="navbar-item">
        Veranstaltungsorte
      </a>
      <a href="/users" class="navbar-item">
        Nutzerverwaltung
      </a>

      {% endmatch %}
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        angemeldet als {{ user.name }}
        <div class="buttons ml-3">
          <a class="button is-success">
            <span class="icon">
              <svg class="feather">
                <use href="/static/feather-sprite.svg#check-circle" />
              </svg>
            </span>
            <span>Profil</span>
          </a>
          <a href="/logout" class="button is-light">
            Abmelden
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

<noscript>
  <section class="section">
    <div class="notification is-danger is-light">
      Dein Browser unterstützt kein JavaScript oder du hast es deaktiviert. Die Funktionalität ist daher auf
      nur-Lesen beschränkt.
    </div>
  </section>
</noscript>

{% block content %}
{% endblock %}
{% endblock %}