@php
  $locale = app()->getLocale();
  $isHome = request()->routeIs('home');
  $mobileMenuItems = $menuLeft->concat($menuRight);
@endphp
<header class="header {{ $isHome ? 'header--hero' : '' }}" id="header">
  <div class="header__mobile-bar">
    <button
      type="button"
      class="header__toggle"
      id="headerToggle"
      aria-expanded="false"
      aria-controls="headerDrawer"
      aria-label="{{ __('site.nav.openMenu') }}"
    >
      <span class="header__toggle-line" aria-hidden="true"></span>
      <span class="header__toggle-line" aria-hidden="true"></span>
      <span class="header__toggle-line" aria-hidden="true"></span>
    </button>
    <a href="{{ menu_route('home', $locale) }}" class="header__logo" aria-label="Çisa Salotti">
      <img class="header__logo-img" src="{{ asset('images/logo.png') }}" alt="ÇİSA" width="140" height="77">
    </a>
    <div class="header__mobile-lang" role="group" aria-label="Language">
      @foreach($languages as $language)
        @if(!$loop->first)
          <span class="header__lang-sep">|</span>
        @endif
        <a
          href="{{ \App\Support\LocaleUrl::switch($language->code) }}"
          class="header__lang-btn {{ $locale === $language->code ? 'header__lang-btn--active' : '' }}"
          aria-pressed="{{ $locale === $language->code ? 'true' : 'false' }}"
        >{{ strtoupper($language->code) }}</a>
      @endforeach
    </div>
  </div>

  <div class="header__inner header__inner--desktop">
    <nav class="header__nav header__nav--left" aria-label="Ana menü">
      <ul class="header__nav-list">
        @foreach($menuLeft as $item)
          <li>
            <a
              href="{{ $item->url($locale) }}"
              class="header__nav-link {{ menu_active($item) ? 'header__nav-link--active' : '' }}"
              @if($item->open_new_tab) target="_blank" rel="noopener noreferrer" @endif
            >{{ $item->localizedLabel($locale) }}</a>
          </li>
        @endforeach
      </ul>
    </nav>
    <a href="{{ menu_route('home', $locale) }}" class="header__logo" aria-label="Çisa Salotti">
      <img class="header__logo-img" src="{{ asset('images/logo.png') }}" alt="ÇİSA" width="140" height="77">
    </a>
    <div class="header__end">
      <nav class="header__nav header__nav--right" aria-label="Kurumsal menü">
        <ul class="header__nav-list">
          @foreach($menuRight as $item)
            <li>
              <a
                href="{{ $item->url($locale) }}"
                class="header__nav-link {{ menu_active($item) ? 'header__nav-link--active' : '' }}"
                @if($item->open_new_tab) target="_blank" rel="noopener noreferrer" @endif
              >{{ $item->localizedLabel($locale) }}</a>
            </li>
          @endforeach
        </ul>
      </nav>
      <div class="header__actions">
        <div class="header__lang" role="group" aria-label="Language">
          @foreach($languages as $language)
            @if(!$loop->first)
              <span class="header__lang-sep">|</span>
            @endif
            <a
              href="{{ \App\Support\LocaleUrl::switch($language->code) }}"
              class="header__lang-btn {{ $locale === $language->code ? 'header__lang-btn--active' : '' }}"
              aria-pressed="{{ $locale === $language->code ? 'true' : 'false' }}"
            >{{ strtoupper($language->code) }}</a>
          @endforeach
        </div>
        <div class="header__social social-links" aria-label="Social media">
          @include('partials.header-social')
        </div>
      </div>
    </div>
  </div>

  <div class="header__backdrop" id="headerBackdrop" hidden></div>
  <aside class="header__drawer" id="headerDrawer" aria-hidden="true" aria-label="{{ __('site.nav.menu') }}">
    <div class="header__drawer-head">
      <span class="header__drawer-title">{{ __('site.nav.menu') }}</span>
      <button
        type="button"
        class="header__drawer-close"
        id="headerClose"
        aria-label="{{ __('site.nav.closeMenu') }}"
      >
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </button>
    </div>
    <nav class="header__drawer-nav">
      <ul class="header__drawer-list">
        @foreach($mobileMenuItems as $item)
          <li>
            <a
              href="{{ $item->url($locale) }}"
              class="header__drawer-link {{ menu_active($item) ? 'header__drawer-link--active' : '' }}"
              @if($item->open_new_tab) target="_blank" rel="noopener noreferrer" @endif
            >{{ $item->localizedLabel($locale) }}</a>
          </li>
        @endforeach
      </ul>
    </nav>
    <div class="header__drawer-footer">
      <div class="header__drawer-lang" role="group" aria-label="Language">
        @foreach($languages as $language)
          @if(!$loop->first)
            <span class="header__lang-sep">|</span>
          @endif
          <a
            href="{{ \App\Support\LocaleUrl::switch($language->code) }}"
            class="header__lang-btn {{ $locale === $language->code ? 'header__lang-btn--active' : '' }}"
            aria-pressed="{{ $locale === $language->code ? 'true' : 'false' }}"
          >{{ strtoupper($language->code) }}</a>
        @endforeach
      </div>
      <div class="header__social social-links" aria-label="Social media">
        @include('partials.header-social')
      </div>
    </div>
  </aside>
</header>