{% from "_partials/icon.html" import icon %}
<header class="site-header">
  <div class="container site-header__inner">
    <a class="logo" href="/{{ lang }}/" aria-label="{{ t('site.home') }}">{{ t("site.name") }}</a>
    <nav class="site-nav" aria-label="{{ t('nav.label') }}">
      <ul class="site-nav__list" role="list">
        {% for item in nav %}
        <li><a href="{{ item.href }}" class="site-nav__link"{% if item.current %} aria-current="page"{% endif %}>{{ item.label }}</a></li>
        {% endfor %}
      </ul>
    </nav>
    {#- Языки без JS: <details> раскрывает список. Видна только метка «RU», полное имя языка —
        для экранного диктора. Ссылки ведут на ту же страницу (lang_links в app.py). #}
    <details class="lang-switch">
      <summary class="lang-switch__summary">
        {#- Для украинского «UA», а не «UK»: «UK» читается как Великобритания -#}
        <span class="lang-switch__code">{{ {"uk": "UA"}.get(lang, lang | upper) }}</span>
        <span class="visually-hidden">{{ t("nav.language") }}: {{ lang_name }}</span>
        {{ icon("caret-down", "lang-switch__caret") }}
      </summary>
      <ul class="lang-switch__list" role="list">
        {% for item in langs %}
        <li><a class="lang-switch__link" href="{{ item.href }}" hreflang="{{ item.code }}" lang="{{ item.code }}"{% if item.current %} aria-current="true"{% endif %}>{{ item.name }}</a></li>
        {% endfor %}
      </ul>
    </details>
    <button class="icon-button bg-toggle" type="button" data-bg-toggle hidden
            aria-label="{{ t('video.pause') }}" title="{{ t('video.pause') }}"
            data-label-pause="{{ t('video.pause') }}" data-label-play="{{ t('video.play') }}">
      {{ icon("pause", "bg-toggle__pause") }}
      {{ icon("play", "bg-toggle__play") }}
    </button>
  </div>
</header>