{% 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"
       hx-on:click="[this, document.getElementById('navMenu')].forEach(e => e.classList.toggle('is-active'));">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div class="navbar-menu" id="navMenu">
    <div hx-boost="true" class="navbar-start">
      <a href="/" class="navbar-item">
        Kalender
      </a>

      {% if user.role == Role::AreaManager || user.role == 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>

          <a href="/export/events" class="navbar-item">
            Veranstaltungen
          </a>
        </div>
      </div>

      <div class="navbar-item has-dropdown is-hoverable">
        <div class="navbar-item">
          Verwaltung
        </div>

        <div class="navbar-dropdown">
          <a href="/users" class="navbar-item">
            Nutzer
          </a>

          <a href="/locations" class="navbar-item">
            Veranstaltungsorte
          </a>

          <a href="/vehicles" class="navbar-item">
            Fahrzeuge
          </a>

          {% if user.role == Role::Admin %}
          <a href="/clothing" class="navbar-item">
            Anzugsordnung
          </a>
          {% endif %}
        </div>
      </div>
      {% endif %}
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        angemeldet als {{ user.name }}
        <div class="buttons ml-3">
          <a class="button is-success is-outlined" hx-boost="true" href="/profile">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#user" />
            </svg>
            <span>Profil</span>
          </a>
          <button id="theme-switcher" class="button">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#moon" />
            </svg>
          </button>
          <a href="/logout" class="button is-danger is-outlined">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#log-out" />
            </svg>
            <span>Abmelden</span>
          </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>

<div class="notification is-hidden" id="toast">
  <div id="toast-progress"></div>
  <div id="toast-message"></div>
</div>

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