<!-- Determine base classes -->
{% set class = "md-header" %}
{% if "navigation.tabs.sticky" in features %}
  {% set class = class ~ " md-header--lifted" %}
{% endif %}

<!-- Header -->
<header class="{{ class }}" data-md-component="header">

  <nav
    class="md-header__inner md-grid"
    aria-label="{{ lang.t('header.title') }}"
  >

    <!-- Link to home -->
    <a
      href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
      title="{{ config.site_name | e }}"
      class="md-header__button md-logo"
      aria-label="{{ config.site_name }}"
      data-md-component="logo"
    >
      {% include "partials/logo.html" %}
    </a>

    <!-- Button to open drawer -->
    <label class="md-header__button md-icon" for="__drawer">
      {% include ".icons/material/menu" ~ ".svg" %}
    </label>

    <!-- Header title -->
		<!-- n8n CUSTOM: remove the page title section. This pairs with custom CSS to keep the site
		title in place on scroll -->
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            {{ config.site_name }}
          </span>
        </div>
        </div>
      </div>
    </div>

    <!-- Color palette -->
    {% if not config.theme.palette is mapping %}
      <form class="md-header__option" data-md-component="palette">
        {% for option in config.theme.palette %}
          {% set scheme  = option.scheme | d("default", true) %}
          {% set primary = option.primary %}
          {% set accent  = option.accent %}
          <input
            class="md-option"
            data-md-color-media="{{ option.media }}"
            data-md-color-scheme="{{ scheme | replace(' ', '-') }}"
            data-md-color-primary="{{ primary | replace(' ', '-') }}"
            data-md-color-accent="{{ accent | replace(' ', '-') }}"
            {% if option.toggle %}
              aria-label="{{ option.toggle.name }}"
            {% else  %}
              aria-hidden="true"
            {% endif %}
            type="radio"
            name="__palette"
            id="__palette_{{ loop.index0 }}"
          />
          {% if option.toggle %}
            <label
              class="md-header__button md-icon"
              title="{{ option.toggle.name }}"
              for="__palette_{{ loop.index % loop.length }}"
              hidden
            >
              {% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
            </label>
          {% endif %}
        {% endfor %}
      </form>
    {% endif %}

    <!-- User preference: color palette -->
    {% if not config.theme.palette is mapping %}
      {% include "partials/javascripts/palette.html" %}
    {% endif %}

    <!-- Site language selector -->
    {% if config.extra.alternate %}
      <div class="md-header__option"></form>
        <div class="md-select">
          {% set icon = config.theme.icon.alternate or "material/translate" %}
          <button
            class="md-header__button md-icon"
            aria-label="{{ lang.t('select.language.title') }}"
          >
            {% include ".icons/" ~ icon ~ ".svg" %}
          </button>
          <div class="md-select__inner">
            <ul class="md-select__list">
              {% for alt in config.extra.alternate %}
                <li class="md-select__item">
                  <a
                    href="{{ alt.link | url }}"
                    hreflang="{{ alt.lang }}"
                    class="md-select__link"
                  >
                    {{ alt.name }}
                  </a>
                </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
    {% endif %}
    
  <!-- n8n CUSTOM: Kapa -->
  {% include "partials/kapaButton.html" %}  

  <!-- Button to open search modal -->
    {% if "material/search" in config.plugins %}
      {% set search = config.plugins["material/search"] | attr("config") %}

      <!-- Check if search is actually enabled - see https://t.ly/DT_0V -->
      {% if search.enabled %}
        <label class="md-header__button md-icon" for="__search">
          {% set icon = config.theme.icon.search or "material/magnify" %}
          {% include ".icons/" ~ icon ~ ".svg" %}
        </label>

        <!-- Search interface -->
        {% include "partials/search.html" %}
      {% endif %}
    {% endif %}

    <!-- Repository information -->
	  <!-- n8n CUSTOM: don't show GitHub link -->
  </nav>

  <!-- Navigation tabs (sticky) -->
  {% if "navigation.tabs.sticky" in features %}
    {% if "navigation.tabs" in features %}
      {% include "partials/tabs.html" %}
    {% endif %}
  {% endif %}
</header>
