---
import config from 'virtual:starlight/user-config';
import { Image } from 'astro:assets';
// @ts-ignore
import Search from 'virtual:starlight/components/Search';

import HeadphonesIcon from '@assets/headset-icon.svg';
import PipelineIcon from '@assets/pipelines.svg';
import TerragruntLogo from '@assets/horizontal-logo-light.svg';
import TerragruntIcon from '@assets/logo-dark-2.svg';
import ThemeToggle from '@components/ThemeToggle.astro';
import ButtonLink from '@components/ui/ButtonLink.astro';
import { getGitHubRepo, formatStarCount } from '@lib/github';

import '@styles/global.css';

/**
 * Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
 */
const shouldRenderSearch =
	config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';

// This will switch between dark and light mode.
// Some pages do not have a dark mode, so this allows us to show or hide the switch.
interface Props {
	showThemeToggle?: boolean;
}

const { showThemeToggle = true } = Astro.props;

// Github Stars
let starCountDisplay = process.env.GITHUB_STARS || '9.2k';

if (!process.env.GITHUB_STARS) {
    const repoData = await getGitHubRepo('gruntwork-io', 'terragrunt');
    if (repoData && typeof repoData.stargazers_count === 'number') {
        starCountDisplay = formatStarCount(repoData.stargazers_count);
    }
}
---

<!--
  This component is inheriting `data-theme="dark"` or `data-theme="light"` from the root element.
  But the problem is that based on the design, we always want this header to behave as if it's in dark mode.
  But that's tricky because dark mode colors are set in the CSS "theme" layer, which is then inherited by this component,
  and this component can't change those variables directly.

  To solve this, we override the variables causing us trouble.
-->
<style>
  .header-dark-theme {
    --sl-color-gray-1: #e8eefc;
    --sl-color-gray-2: #bbc2d4;
    --sl-color-gray-3: #7e8bac;
    --sl-color-gray-4: #4c5776;
    --sl-color-gray-5: #2d3754;
    --sl-color-gray-6: #1c2541;
    --sl-color-gray-7: #0f1731;
    --sl-color-gray-8: #0f0934;
    --sl-color-white: #ffffff;
  }

  :global(body.has-banner) .navbar {
    top: 2.5rem;
  }
</style>

<div class="navbar header-dark-theme fixed top-0 w-full h-(--sl-nav-height) p-0 z-50 border-b border-stroke-dark bg-bg-dark">
  <div class="flex flex-row justify-between px-4 py-2.5 md:py-6 xl:h-full xl:mt-1">

    <!-- Logo -->
    <a href="https://terragrunt.com" class="flex flex-row items-center hover:cursor-pointer mr-2">
      <Image
        alt="Terragrunt Logo"
        class="shrink h-auto max-w-[145px] md:max-w-[180px] xl:max-w-[200px]"
        loading="eager"
        src={TerragruntLogo}
      />
    </a>

    <!-- Right Menu -->
    <div class="flex items-center xl:gap-4">
      <div class="flex items-center gap-2 xl:gap-4">

        <!-- Docs / Ambassadors -->
        <div class="flex items-center gap-4 xl:gap-4 mr-2">

          <!-- Docs -->
          <!--
          <a href="/" class="flex items-center gap-2 text-gray-1 text-sm font-sans no-underline hover:underline hover:decoration-[var(--sl-color-gray-1)] hover:text-[var(--sl-color-gray-1)]" aria-label="Terragrunt Documentation">
            <svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.1" d="M17.8284 6.82843C18.4065 7.40649 18.6955 7.69552 18.8478 8.06306C19 8.4306 19 8.83935 19 9.65685L19 17C19 18.8856 19 19.8284 18.4142 20.4142C17.8284 21 16.8856 21 15 21H9C7.11438 21 6.17157 21 5.58579 20.4142C5 19.8284 5 18.8856 5 17L5 7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H12.3431C13.1606 3 13.5694 3 13.9369 3.15224C14.3045 3.30448 14.5935 3.59351 15.1716 4.17157L17.8284 6.82843Z" fill="currentColor"/>
              <path d="M17.8284 6.82843C18.4065 7.40649 18.6955 7.69552 18.8478 8.06306C19 8.4306 19 8.83935 19 9.65685L19 17C19 18.8856 19 19.8284 18.4142 20.4142C17.8284 21 16.8856 21 15 21H9C7.11438 21 6.17157 21 5.58579 20.4142C5 19.8284 5 18.8856 5 17L5 7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H12.3431C13.1606 3 13.5694 3 13.9369 3.15224C14.3045 3.30448 14.5935 3.59351 15.1716 4.17157L17.8284 6.82843Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              <path d="M9 12H15" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M9 15H15" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="hidden sm:block">Docs</span>
          </a>
          -->

          <!-- Ambassadors -->
          <a href="/terragrunt-ambassador" class="flex items-center gap-2 text-gray-1 text-sm font-sans no-underline hover:underline hover:decoration-(--sl-color-gray-1) hover:text-(--sl-color-gray-1)" aria-label="Learn more about the Terragrunt Ambassador Program">
            <svg class="" width="24" height="24" viewBox="0 0 615 615" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M379.128 40.1797L461.25 41.1973L503.191 111.809L573.803 153.75L574.82 235.872L615 307.5L574.82 379.128L573.803 461.25L503.191 503.191L461.25 573.803L379.128 574.82L307.5 615L235.872 574.82L153.75 573.803L111.809 503.191L41.1973 461.25L40.1797 379.128L0 307.5L40.1797 235.872L41.1973 153.75L111.809 111.809L153.75 41.1973L235.872 40.1797L307.5 0L379.128 40.1797ZM139.792 211V404L307.417 500.5L475.042 404V211L307.417 114.5L139.792 211Z" fill="currentColor"/>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M306.931 457.048V382.116V307.184L372.005 269.718L437.079 232.252V307.184V382.116L306.931 457.048Z" fill="currentColor"/>
              <path d="M241.858 194.786L306.931 157.32L372.005 194.786L437.079 232.252L372.005 269.718L306.931 232.252L241.858 269.718L176.784 232.252L241.858 194.786Z" fill="currentColor"/>
              <path d="M306.931 307.184L241.858 269.718L306.931 232.252L372.005 269.718L306.931 307.184Z" fill="currentColor"/>
            </svg>
            <span class="hidden sm:block">Ambassadors</span>
          </a>
        </div>

        <!-- Socials -->
        <div class="flex xl:border-r border-stroke-dark items-center gap-4 xl:gap-4 pr-4">

          <!-- Github -->
          <a
            aria-label="Visit the Terragrunt GitHub Repository"
            class="social-icon flex items-center gap-3 transition duration-250 ease-in-out no-underline"
            href="https://github.com/gruntwork-io/terragrunt"
            rel="noopener noreferrer"
            target="_blank"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16" aria-hidden="true">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
            </svg>
            <span class="hidden xl:block text-sm font-sans">{starCountDisplay}</span>
          </a>

          <!-- Discord -->
          <a
            aria-label="Join the Terragrunt Discord"
            class="social-icon flex items-center gap-3 transition duration-250 ease-in-out"
            href="/community/invite"
            rel="noopener noreferrer"
            target="_blank"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16" aria-hidden="true">
              <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
            </svg>
          </a>

          {showThemeToggle && <ThemeToggle className="p-0" />}
        </div>
      </div>

      <div id="search-and-buttons" class="flex items-center w-full absolute bottom-4 xl:bottom-0 left-0 xl:relative gap-2 xl:gap-4 px-4 xl:px-0 h-[46px]">

        <!-- SearchBar -->
        <div class="search-container bg-bg-dark w-full h-full xl:w-[200px]">
          {shouldRenderSearch && <Search {...Astro.props} />}
        </div>

        <!-- Buttons -->
        <ButtonLink
          className="hidden md:flex whitespace-nowrap"
          href="https://www.gruntwork.io/services/terragrunt"
          size={'lg'}
          variant="secondary"
        >
          Enterprise Support
        </ButtonLink>

        <ButtonLink
          href="/terragrunt-scale"
          variant="secondary"
          size="icon"
          className="md:hidden"
        >
          <Image
            alt="Pipelines Icon"
            height={20}
            src={PipelineIcon}
            width={20}
          />
        </ButtonLink>


        <ButtonLink
          buttonClassName="flex items-center justify-center gap-2"
          className="hidden md:flex whitespace-nowrap"
          href="https://terragrunt.com/terragrunt-scale"
          size={'lg'}
          variant="primary"
        >
          Terragrunt Scale
            <Image
              alt="Terragrunt Scale Icon"
              height={16}
              src={TerragruntIcon}
              quality="max"
              width={16}
            />
        </ButtonLink>

        <ButtonLink
          href="https://terragrunt.com/terragrunt-scale"
          variant="primary"
          size="icon"
          className="md:hidden"
          isExternalLink={true}
        >
          <Image
            alt="Headphones Icon"
            height={20}
            src={HeadphonesIcon}
            width={20}
          />
        </ButtonLink>
      </div>

    </div>
  </div>
</div>

<!-- Google Tag Manager -->
<script type="text/partytown">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-T5LHK9JM');</script>
<!-- End Google Tag Manager -->
