{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace zab=Zab\ZabSite\ViewHelpers}

<header class="header js-header-top">
  <div class="header-mask"></div>
  
  <f:if condition="{headerBarVisible}">
    <div class="header-notice-bar" data-ref="jsBar" data-start-date="{headerBarStartDate}" data-end-date="{headerBarEndDate}">
      <span class="txt"><f:format.html>{headerBarText}</f:format.html></span>
      <button class="close" data-ref="jsCloseBar" aria-label="close"></button>
    </div>
  </f:if>

  <div class="header-content">
    <!-- logo -->
    <div class="header__logo">
      <a class="logo" href="/" title="{f:translate(key: 'header.aria.homepage', extensionName: 'zab_site')}">
        <f:if condition="{siteLogo}">
          <f:then>
            <f:variable name="logoPath">{f:uri.image(src: siteLogo)}</f:variable>
            <f:if condition="{v:format.substring(content: logoPath, start: '-4')} == '.svg'">
              <f:then>
                <zab:inlineSvg path="{logoPath}" ariaLabel="Logo ZAB" />
              </f:then>
              <f:else>
                <f:image src="{logoPath}" alt="Logo ZAB" />
              </f:else>
            </f:if>
          </f:then>
          <f:else>
            {siteName}
          </f:else>
        </f:if>
      </a>

      <a class="skip-nav" href="#main-content">
        <f:translate key="header.aria.skipNavigation" extensionName="zab_site" />
      </a>
    </div>

    <!-- box options -->
    <div class="header__opt">
      <!-- lang -->
      <nav class="header__opt-langs" data-ref="jsLangsList">
        <button
            aria-expanded="false"
            data-label-open="{f:translate(key: 'header.aria.openLanguages', extensionName: 'zab_site')}"
            data-label-close="{f:translate(key: 'header.aria.closeLanguages', extensionName: 'zab_site')}"
            data-ref="jsBtnLangs">
          <f:for each="{languageMenu}" as="lang">
            <f:variable name="langCode" value="{f:if(condition: lang.hreflangRaw, then: lang.hreflangRaw, else: lang.twoLetterIsoCode)}" />
            <f:if condition="{lang.active}">
              {langCode -> f:format.case(mode: 'upper')}
            </f:if>
          </f:for>
        </button>
        <f:render partial="Language" arguments="{languageMenu: languageMenu, class: 'header__opt-langs-list', extensible: true}" />
      </nav>
      <!-- search -->
      <button class="header__opt-search"
        aria-label="{f:translate(key: 'header.aria.openSearch', extensionName: 'zab_site')}"
        aria-expanded="false"
        aria-controls="box-search"
        data-label-open="{f:translate(key: 'header.aria.openSearch', extensionName: 'zab_site')}"
        data-label-close="{f:translate(key: 'header.aria.closeSearch', extensionName: 'zab_site')}"
        data-ref="jsBtnSearch">
        <span class="screen-reader"><f:translate key="header.aria.search" extensionName="zab_site" /></span>
      </button>
      <!-- btn -->
      <f:if condition="{headerLoginLink}">
        <f:if condition="!{data.disable_header_button_link}">
          <f:link.typolink parameter="{headerLoginLink}" class="header__opt-login" target="_blank"><zab:typolinkTitle parameter="{headerLoginLink}" /></f:link.typolink>
        </f:if>
      </f:if>
      <!-- menu -->
      <button class="header__opt-burger"
        aria-label="{f:translate(key: 'header.aria.openMenu', extensionName: 'zab_site')}"
        aria-expanded="false"
        aria-controls="main-navigation"
        data-label-open="{f:translate(key: 'header.aria.openMenu', extensionName: 'zab_site')}"
        data-label-close="{f:translate(key: 'header.aria.closeMenu', extensionName: 'zab_site')}"
        data-ref="jsBtnBurger">
        <span class="screen-reader"><f:translate key="header.aria.menu" extensionName="zab_site" /></span>
      </button>
    </div>
    <!-- menu box -->
    <div id="main-navigation" class="header__nav" data-ref="jsMainNavPanel" inert>
      <div class="header__nav-wrap">
        <f:render partial="Navigation" arguments="{_all}" />
      </div>
    </div>
    <!-- search box -->
    <div id="box-search" class="header__search" data-ref="jsSearchPanel" inert>
      <div class="header__search-wrap">
        <f:render partial="SearchBox" arguments="{_all}" />
      </div>
    </div>
  </div>
</header>