{# Same locale caveat as the sidebar in base.html. #}
{%- set has_sidebar = config.theme.include_sidebar and nav and (page or not config.plugins.get('i18n')) %}
<header class="primer-header">
  {#
    Edge to edge, like the layout below it — not a centred container. The class
    tells the stylesheet there is a navigation column for the title to stand
    over; without one the header is the plain row it always was.
  #}
  <div class="primer-header-inner d-flex flex-items-center{{ ' primer-header-inner-with-sidebar' if has_sidebar }}">
    {%- if has_sidebar %}
      {# The mobile hamburger comes first, matching the usual left-edge placement. #}
      <details class="primer-nav-toggle">
        <summary class="btn btn-octicon" aria-label="{% trans %}Toggle navigation{% endtrans %}">
          {%- if config.theme.icon == 'lucide' %}
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg>
          {%- else %}
          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" width="16" fill="currentColor">
            <path d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z"></path>
          </svg>
          {%- endif %}
        </summary>
        <div class="primer-nav-toggle-panel">
          {% include "partials/nav.html" %}
        </div>
      </details>
    {%- endif %}

    {#
      `nav` belongs to whichever locale mkdocs-static-i18n happened to build
      last, and a static template (404.html) is rendered once, outside any
      locale. Using its homepage there sends an English visitor to, say, the
      French home page; base_url is locale-agnostic and always right.
    #}
    <a class="primer-header-title" href="{{ nav.homepage.url | url if nav.homepage and page else base_url }}">
      {%- if config.theme.logo %}
        <img src="{{ config.theme.logo | url }}" alt="" class="primer-header-logo">
      {%- endif %}
      {{ config.site_name }}
    </a>

    {#
      One spacer either side of the search field, so it sits in the middle of
      the header rather than against the controls on the right. The trailing one
      is dropped on a narrow window, where the field is a popover and what is
      left in the row is the button that opens it — that belongs with the
      controls at the right edge, in the same order as the field it replaces.
    #}
    <div class="flex-auto"></div>

    {%- if 'search' in config.plugins %}
      {% include "partials/search-box.html" %}
    {%- endif %}

    <div class="flex-auto primer-header-spacer-end"></div>

    {% include "partials/language.html" %}
    {% include "partials/color-mode.html" %}
  </div>
</header>