{{define "search"}}

<form method="get" id="search-form">
  <input type="hidden" name="q" value="{{.Search}}" />
  <label for="search">
    <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
      stroke="currentColor" class="size-6">
      <path stroke-linecap="round" stroke-linejoin="round"
        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
    </svg>
    <input tabindex="-1" type="search" id="search" placeholder="Search" name="search" />
  </label>

  <script>
    const searchInput = document.querySelector("input[name=search]");
    const searchParams = new URLSearchParams(window.location.search);
    if (searchParams.has("search")) {
      searchInput.value = searchParams.get("search");
    }
  </script>
</form>

{{end}}