<header class="flex items-center gap-5 mt-4 sm:py-3 lg:gap-20">
  <div>
    <a href="/">
      <img src="{{ option.brand.logo_dark ?? '/assets/logo-light.svg' }}"
        alt="{{ option.site.name ?? 'Logo'  }}"
        class="hidden group-data-[mode=dark]/html:block max-w-[140px]">

      <img src="{{ option.brand.logo ?? '/assets/logo-dark.svg' }}"
        alt="{{ option.site.name ?? 'Logo'  }}"
        class="block group-data-[mode=dark]/html:hidden  max-w-[140px]">
    </a>
  </div>

  <nav class="hidden font-medium lg:block">
    <ul class="flex items-center gap-4">
      <li>
        <a href="/#product"
          class="block px-2 py-1 bg-transparent rounded-lg hover:bg-line-tertiary hover:no-underline">
          {{ dp__('theme', 'button', 'Product')  }}
        </a>
      </li>

      <li>
        <a href="/#features"
          class="block px-2 py-1 bg-transparent rounded-lg hover:bg-line-tertiary hover:no-underline">
          {{ dp__('theme', 'button', 'Featured')  }}
        </a>
      </li>

      <li>
        <a href="/#pricing"
          class="block px-2 py-1 bg-transparent rounded-lg hover:bg-line-tertiary hover:no-underline">
          {{ dp__('theme', 'button', 'Pricing')  }}
        </a>
      </li>
    </ul>
  </nav>

  <div class="flex items-center gap-2 ml-auto sm:gap-4">
    {% if option.color_scheme.modes is not defined or option.color_scheme.modes|length > 1 %}
    <mode-switcher>
      <button
        class="flex items-center justify-center w-10 h-10 text-2xl rounded-full bg-line-tertiary hover:bg-contrast-accent hover:text-accent"
        aria-label="Dark/Light mode toggle">
        <i class="ti ti-moon group-data-[mode=dark]/html:hidden"></i>
        <i class="ti ti-sun hidden group-data-[mode=dark]/html:block"></i>
      </button>
    </mode-switcher>
    {% endif %}

    {% if user is defined %}
    <div class="relative flex items-center group" x-ref="usermenu"
      @click.outside="$el.removeAttribute('data-open')">

      <div
        class="w-0 h-6 border-l border-l-line-tertiary group-hover:opacity-0 group-data-[open]:opacity-0">
      </div>

      <button
        class="flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-contrast-secondary group-data-[open]:bg-contrast-secondary"
        @click="$refs.usermenu.hasAttribute('data-open') ? $refs.usermenu.removeAttribute('data-open') : $refs.usermenu.setAttribute('data-open', '')">

        {% set full_name = user.first_name ~ " " ~ user.last_name %}
        <div
          class="relative flex items-center justify-center w-10 h-10 text-xs font-bold uppercase rounded-full bg-contrast-accent text-accent shrink-0">
          <span
            x-text="`{{ full_name }}`.match(/(\b\S)?/g).join('').slice(0, 2)">{{ full_name[0:2]}}</span>

          {% if user.avatar %}
          <img src="{{ user.avatar }}" alt="{{ full_name }}"
            class="absolute top-0 left-0 object-cover w-full h-full rounded-full">
          {% endif %}
        </div>

        <span class="hidden text-sm sm:inline">
          {{ full_name }}
        </span>

        <i class="text-xl ti ti-chevron-down"></i>
      </button>

      <div class="context-menu w-60 max-h-max"
        @click="$refs.usermenu.removeAttribute('data-open')">

        <a href="/app/account"
          class="flex items-center w-full gap-3 p-4 text-left hover:bg-contrast-secondary hover:no-underline">
          <div
            class="relative flex items-center justify-center w-10 h-10 text-xs font-bold uppercase rounded-full bg-contrast-accent text-accent shrink-0">
            <span
              x-text="`{{ full_name }}`.match(/(\b\S)?/g).join('').slice(0, 2)">{{ full_name[0:2]}}</span>

            {% if user.avatar %}
            <img src="{{ user.avatar }}" alt="{{ full_name }}"
              class="absolute top-0 left-0 object-cover w-full h-full rounded-full">
            {% endif %}
          </div>

          <div class="max-w-[154px]">
            <div class="font-bold truncate">{{ full_name }}</div>
            <div class="mt-1 text-sm truncate text-tertiary">
              {{ user.email }}</div>
          </div>
        </a>

        <hr class="border-t border-line-tertiary">
        <ul>
          <li>
            <a href="/app"
              class="flex items-center gap-2 px-4 py-2 hover:bg-contrast-secondary hover:no-underline">
              <i class="text-2xl ti ti-sparkles"></i>
              {{ dp__('theme', 'button', 'Go to app')  }}
            </a>
          </li>
        </ul>

        <hr class="border-t border-line-tertiary">

        <ul>
          <li>
            <a href="/app/library"
              class="flex items-center gap-2 px-4 py-2 hover:bg-contrast-secondary hover:no-underline">
              <i class="text-2xl ti ti-files"></i>
              {{ dp__('theme', 'button', 'Library')  }}
            </a>
          </li>

          <li>
            <a href="/app/billing"
              class="flex items-center gap-2 px-4 py-2 hover:bg-contrast-secondary hover:no-underline">
              <i class="text-2xl ti ti-credit-card"></i>
              {{ dp__('theme', 'button', 'Billing')  }}
            </a>
          </li>
        </ul>

        <hr class="border-t border-line-tertiary">

        <ul>
          <li>
            <a href="/app/account"
              class="flex items-center gap-2 px-4 py-2 hover:bg-contrast-secondary hover:no-underline">
              <i class="text-2xl ti ti-user-circle"></i>
              {{ dp__('theme', 'button', 'Account')  }}
            </a>
          </li>

          <li>
            <a href="/logout"
              class="flex items-center gap-2 px-4 py-2 hover:bg-contrast-secondary hover:no-underline">
              <i class="text-2xl ti ti-logout"></i>
              {{ dp__('theme', 'button', 'Logout')  }}
            </a>
          </li>
        </ul>
      </div>
    </div>
    {% else %}
    <div class="relative flex items-center group" x-ref="locale"
      @click.outside="$el.removeAttribute('data-open')">

      <button
        class="flex items-center justify-center w-10 h-10 text-2xl rounded-full bg-line-tertiary hover:bg-contrast-accent hover:text-accent"
        @click="$refs.locale.hasAttribute('data-open') ? $refs.locale.removeAttribute('data-open') : $refs.locale.setAttribute('data-open', '')"
        aria-label="Language selector">
        <i class="ti ti-world"></i>
      </button>

      <div class="w-auto translate-x-1/2 context-menu max-h-max right-1/2"
        @click="$refs.locale.removeAttribute('data-open')">

        <ul>
          {% for locale in locales %}
          {% if locale.enabled %}
          <li>
            <a href="/{{ locale.code ?? 'en-US' }}"
              class="block w-full px-4 py-2 text-left hover:bg-contrast-secondary hover:no-underline"
              @click="document.cookie = `locale={{ locale.code ?? 'en-US' }}; expires=${new Date(new Date().getTime()+1000*60*60*24*365).toGMTString()}; path=/`;">
              {{ locale.label ?? 'English' }}
            </a>
          </li>
          {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>

    <div class="w-0 h-6 border-l border-l-line-tertiary"></div>

    <a href="/login"
      class="hidden button button-outline button-sm sm:inline-flex">
      {{ dp__('theme', 'button', 'Login')  }}
    </a>

    <a href="/signup"
      class="h-8 px-2 text-sm button button-sm whitespace-nowrap sm:text-base sm:h-10 sm:px-4">
      {{ dp__('theme', 'button', 'Get started')  }}
    </a>
    {% endif %}
  </div>
</header>