{{ $id   := .Id   }}
{{ $href := .Href }}

<nav>
  <icon-button>
    <a
      id="{{ or $id "top" }}"
      href="{{ or $href "#" }}"
     >
      {{ with .Icon }}
        {{ safeHTML (readFile (print (partial "function-paths.html" "static") "/icons/feather/" . ".svg")) }}
      {{ else }}
        {{ safeHTML (readFile (print (partial "function-paths.html" "static") "/icons/feather/arrow-up.svg")) }}
      {{ end }}
      {{ with .IconLabel }}
        <small>{{ . }}</small>
      {{ else }}
        <small>Top</small>
      {{ end }}
    </a>
  </icon-button>

  <section>
    {{ with .Title }}
      <h2>{{ . }}</h2>
    {{ end }}
    {{ with .Subtitle }}
      <small>{{ . }}</small>
    {{ end }}
  </section>

  {{ if .Context.Site.Menus.main }}
    {{ range .Context.Site.Menus.main }}
    <icon-navigator hidden>
      <icon-button>
          <a id="nav-middle-{{ path.Base .Identifier }}" href="{{ .URL | absURL }}">
            {{ with .Identifier }}
              {{ $icon := print (partial "function-paths.html" "static") "/icons/" . ".svg" }}
              {{ safeHTML (readFile $icon) }}
            {{ end }}
            <small>{{ delimit (first 1 (split .Name " ")) " " }}</small>
          </a>
      </icon-button>
    </icon-navigator>
    {{ end }}
  {{ end }}

  <search-entry id="search-frame">
    <form
      id="search-form"
      action="https://lite.duckduckgo.com/lite/">
      <input required
        id="search-input"
        name="q"
        value=""
        type="search"
        autocomplete="off"
        spellcheck="false"
        aria-autocomplete="list"
        aria-label="search input"
      />
      <button id="search-submit">
        {{ safeHTML (readFile (print (partial "function-paths.html" "static") "/icons/feather/search.svg")) }}
        <small>Search</small>
      </button>
      <ul hidden id="search-results"></ul>
    </form>
   </search-entry>
 </nav>

<navigation-separator><hr hidden></navigation-separator>