<header id="header" class="header">
  <div class="container">
    <div class="header__wrapper">
      <a href="/" class="header__logo">
        <img class="header__logo-image" src="/src/img/vite-logo.svg" alt="Vite Logo" height="24">
        <span class="header__logo-text">{{ APP_NAME_FORMATTED }}</span>
        <span class="label label_primary header__logo-label">v{{ APP_VERSION }}</span>
      </a>

      <nav class="header__nav">
        {% for nav in header %}
        <a href="{{ nav.link }}" class="header__nav-item {% if active_nav == nav.link %}active{% endif %}">{{ nav.name }}</a>
        {% endfor %}
      </nav>

      <div class="header__appearance">
        <span data-theme-set="dark" class="header__appearance-item" title="Switch to dark theme">{{ source('@ti/sun.svg') }}</span>
        <span data-theme-set="light" class="header__appearance-item" title="Switch to light theme">{{ source('@ti/moon.svg') }}</span>
      </div>

      <div class="header__social">
        <a href="{{ APP_REPOSITORY }}" target="_blank" class="header__social-item" title="View on GitHub">
          {{ source('@ti/brand-github.svg') }}
        </a>
      </div>
    </div>
  </div>
</header>
