{{ $registry := .Site.Data.registry -}}

{{ $languageNames := newScratch -}}
{{ $languageNames.Set "cpp" "C++" -}}
{{ $languageNames.Set "dotnet" ".NET" -}}
{{ $languageNames.Set "js" "JavaScript" -}}
{{ $languageNames.Set "php" "PHP" -}}

{{ $langs := slice -}}
{{ range $registry -}}
  {{ $language := .language -}}
  {{ $langs = $langs | append $language -}}
  {{ if ne $language (lower $language) -}}
    {{ errorf "Language keys must be in lowercase. Registry entry '%s' has the following invalid key: %s" .title $language -}}
  {{ end -}}
{{ end -}}
{{ $langs = $langs | uniq | sort -}}

{{ $types := slice -}}
{{ range $registry -}}
  {{ $type := .registryType -}}
  {{ $types = $types | append $type -}}
  {{ if ne $type (lower $type) -}}
    {{ errorf "Component-type keys must be in lowercase. Registry entry '%s' has the following invalid key: %s" .title $type -}}
  {{ end -}}
{{ end -}}
{{ $types = $types | uniq | sort -}}

<div class="pb-4">
  <form action="/ecosystem/registry" id="searchForm">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1" title="{{ len $registry }} entries">Search</span>
      <input class="form-control w-auto" id="search-query" type="text" name="s"
        aria-label="Registry search input field">

      <input type="hidden" name="component" id="input-component" value="" />
      <input type="hidden" name="language" id="input-language" value="" />

      <button type="button" class="btn btn-outline-success"
        onclick="document.getElementById('searchForm').submit();">Submit</button>
      <button type="button" class="btn btn-outline-danger"
        onclick="document.getElementById('search-query').value = ''; document.getElementById('input-language').value = 'all';document.getElementById('input-component').value = 'all';document.getElementById('searchForm').submit();">Reset</button>

      <button class="btn btn-outline-secondary dropdown-toggle" id="languageDropdown" type="button"
        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</button>
      <div class="dropdown-menu" id="languageFilter">
        <a value="all" class="dropdown-item">Any Language</a>
        {{ range $langs -}}
        <a value="{{ . }}" id="language-item-{{ . }}" class="dropdown-item">{{ $languageNames.Get . | default (humanize
          .) }}</a>
        {{ end -}}
      </div>

      <button class="btn btn-outline-secondary dropdown-toggle" id="componentDropdown" type="button"
        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Type</button>
      <div class="dropdown-menu" id="componentFilter">
        <a value="all" class="dropdown-item">Any Component</a>
        {{ range $types -}}
        <a value="{{ . }}" id="component-item-{{ . }}" class="dropdown-item">{{ humanize . }}</a>
        {{ end -}}
      </div>

    </div>
  </form>
</div>

<div class="mx-auto">
  <ul class="list-unstyled" id="search-results"></ul>
  <ul class="list-unstyled" id="default-body">
    {{ range $registry -}}
      {{ template "registry-entry" . }}
    {{ end -}}
  </ul>
</div>

{{-
  $fuseVar := (dict
    "description" "${description}"
    "language" "${language}"
    "registryType" "${registryType}"
    "repo" "${repo}"
    "title" "${title}"
  )
-}}
<script id="search-result-template" type="text/x-js-template">
  {{ template "registry-entry" $fuseVar }}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
{{ partial "script.html" (dict "src" "js/registrySearch.js") -}}

{{- define "registry-entry" -}}
{{ $href := printf "href=%q" .repo | safeHTMLAttr -}}
<li class="registry-entry" data-registrytype="{{ .registryType }}" data-registrylanguage="{{ .language }}">
  <div class="registry-entry-body">
    <div class="h5">
      <a {{ $href }} target="_blank" rel="noopener">
        {{- .title | markdownify -}}
      </a>
    </div>
    <span class="me-auto">
      {{- .description | markdownify -}}
    </span>
    <div class="float-end">
      {{ with .language -}}
        <span class="badge badge-{{ . }}">{{ . }}</span>
      {{- end }}
      {{ with .registryType -}}
        <span class="badge badge-{{ . }} me-1">{{ . }}</span>
      {{- end -}}
    </div>
  </div>
</li>
{{- end -}}
