{% set dropdown_menu =
  html_cva(
    base: ['navbar--dropdown-menu', 'flex max-h-full flex-col items-stretch justify-start gap-2 md:flex-row', 'overflow-auto md:overflow-visible'],
    variants: {
      menuAlign: {
        left: 'md:justify-start',
        center: 'md:justify-center',
        right: 'md:justify-end'
      }
    }
  )
%}

{% set dropdown_menu_classes =
  dropdown_menu.apply({
    menuAlign: menu_align|default('center')
  })
%}

<div class="container mx-auto px-4 pt-4 md:px-12 md:pt-12">
  <div
    class="navbar @container/navbar relative z-[500] container mx-auto flex justify-between gap-x-8 rounded-lg bg-white px-4 py-2 md:rounded-2xl md:px-6 md:pt-2 md:pb-2"
  >
    <div class="navbar--logo self-center [&>div]:flex [&>div]:flex-col [&>div]:justify-center">
      {% block logo %}
        {{ include('@haven_theme/templates/block/block--system-branding-block.html.twig') }}
      {% endblock %}
    </div>

    <div
      class="navbar--menu fixed inset-0 top-[calc(var(--drupal-displace-offset-top,0px)+var(--gin-toolbar-height,0px)-var(--navbar-scroll-top,0px))] grid shrink grow grid-cols-[1fr] grid-rows-[auto_1fr_auto] flex-col items-stretch justify-start gap-x-6 bg-background pb-8 md:static md:flex md:h-auto md:flex-row md:items-center md:bg-transparent md:pb-0"
    >
      <div
        class="navbar--modal-top relative z-500 col-span-1 col-start-1 row-span-1 row-start-1 container mx-auto flex w-full justify-between p-2 md:hidden"
      >
        <div
          class="navbar--modal-logo flex min-h-11 flex-1 flex-col items-start justify-center md:hidden [&>div]:flex [&>div]:flex-col [&>div]:justify-center"
        >
          {{ block('logo') }}
        </div>

        <button
          class="navbar--hide-menu flex h-11 w-11 flex-0 cursor-pointer items-center justify-center p-2 md:hidden"
          aria-label="{{ 'Hide menu'|t }}"
        >
          {{
            include(
              '@haven_theme/components/icon/icon.twig',
              {
                icon: 'x',
                icon_size: 'medium'
              }
            )
          }}
        </button>
      </div>

      <div
        class="navbar--dropdown-menu-wrapper relative col-span-1 col-start-1 row-span-1 row-start-2 container mx-auto min-h-0 w-full flex-1 p-2 px-4 after:pointer-events-none after:absolute after:bottom-0 after:z-3 after:h-24 after:w-full after:bg-linear-to-b after:from-transparent after:to-background after:content-[''] md:p-0 md:after:content-none"
      >
        <div class="{{ dropdown_menu_classes }}">
          {% block navigation %}

          {% endblock %}
        </div>
      </div>

      <div
        class="navbar--links col-span-1 col-start-1 row-span-1 row-start-3 ml-auto flex w-full flex-initial shrink-0 grow-0 flex-col items-center justify-end gap-3 md:w-auto md:flex-row"
      >
        {% block links %}
          {{
            include(
              'haven_theme:button',
              {
                variant: 'primary',
                label: 'Button'|t,
                icon: 'arrow-right',
                href: 'https://example.com',
                size: 'medium'
              }
            )
          }}

          {{
            include(
              'haven_theme:button',
              {
                variant: 'secondary',
                label: 'Another'|t,
                icon: 'arrow-right',
                href: 'https://example.com',
                size: 'medium'
              }
            )
          }}
        {% endblock %}
      </div>
    </div>

    <div class="navbar--hamburger-container flex min-h-8 min-w-8 shrink-0 grow-0 items-center justify-center md:hidden">
      <button class="navbar--hamburger flex items-center justify-center" aria-label="{{ 'Show menu'|t }}">
        {{
          include(
            '@haven_theme/components/icon/icon.twig',
            {
              icon: 'list',
              icon_size: 'medium'
            }
          )
        }}
      </button>
    </div>
  </div>
</div>
