{{ define "head" }}
  <script src='{{ relURL "js/integrations-filters.js" }}' defer></script>
{{ end }}

{{ define "main" }}
  {{ partial "path-scratch.html" }}
  <main class="docs w-full max-w-[1920px] mx-auto px-5 flex flex-col md:flex-row overflow-hidden">
    {{ partial "docs-nav-collapsed.html" . }}
    <div class="py-12 md:px-4 xl:px-16 overflow-hidden">
      {{ partial "breadcrumbs" . }}
      <section class="prose w-full py-12 max-w-none">
        <h1>{{ .Title }}</h1>
      </section>
      <form id="integration-filter" class="text-center flex flex-col sm:grid grid-cols-2 gap-4 mt-6 mb-8">
        <label class="relative flex items-center">
          <span class="sr-only">Search libraries and tools&hellip;</span>
          <svg class="text-redis-ink-900 absolute left-4 w-5 h-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
            <circle cx="10" cy="10" r="7" />
            <line x1="21" y1="21" x2="15" y2="15" />
          </svg>
          <input class="transition appearance-none block w-full pl-12 pr-4 py-3 rounded-md bg-clip-padding bg-white hover:bg-red-50/50 focus:bg-red-50/50 border border-redis-ink-900 ring-red-200 focus:ring-red-200 focus:ring-[3px] focus:outline-none text-redis-ink-900 placeholder:text-redis-ink-900/70" id="name-filter" type="search" autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="Search libraries and tools&hellip;" spellcheck="false">
        </label>
        <select id="group-filter" class="cursor-pointer transition appearance-none block w-full pl-4 pr-12 py-3 rounded-md bg-clip-padding bg-white hover:bg-red-50/50 focus:bg-red-50/50 border border-redis-ink-900  ring-red-200 focus:ring-red-200 focus:ring-[3px] focus:outline-none text-redis-ink-900/70">
          <option value>Filter by type&hellip;</option>
          <optgroup label="Development">
            <option value="library" data-kind="dev">Library</option>
            <option value="framework" data-kind="dev">Framework</option>
          </optgroup>
          <optgroup label="Operations">
            <option value="observability" data-kind="ops">Observability</option>
            <option value="provisioning" data-kind="ops">Provisioning</option>
         </optgroup>
          <optgroup label="Data">
            <option value="mig" data-kind="data">Data migration</option>
            <option value="di" data-kind="data">Data integration</option>
          </optgroup>
          <optgroup label="Cloud">
             <option value="cloud-service" data-kind="cloud">Cloud service</option>
          </optgroup>

        </select>
      </form>
            
      <div id="commands-grid" class="flex flex-col md:grid grid-cols-[repeat(auto-fit,minmax(18rem,1fr))] gap-4 text-slate-500 mx-auto">
        {{ $labelColors := (dict "library" "bg-redis-yellow-500" "framework" "bg-violet-300" "observability" "bg-blue-300" "provisioning" "bg-redis-red-500" "mig" "bg-pink-300" "di" "bg-teal-300" "cloud-service" "bg-rose-300") }}
        {{ $labelText := (dict "mig" "data migration" "di" "data integration" "cloud-service" "cloud service") }}
        {{ range .CurrentSection.Sections }}
          <article
            class="flex flex-col gap-2 relative transition h-full text-redis-ink-900 hover:text-red-900 focus-within:text-red-900 bg-white hover:bg-red-50/50 focus-within:bg-red-50/50 border border-redis-pen-800 focus-within:ring-red-200 focus-within:ring-[3px] focus-within:outline-none bg-clip-padding rounded-md group"
            data-name="{{ .Title }}"
            data-summary="{{ .Params.summary }}"
            data-group="{{ .Params.group }}"
            data-version
            data-top
          >
            <div class="flex flex-row items-center gap-1 uppercase font-mono text-xs border-b border-redis-pen-800 px-6 py-2">
              <div class='h-3 w-3 rounded-md border border-redis-pen-600 {{ index $labelColors .Params.group | default "bg-green-300" }}'></div>
              {{ index $labelText .Params.group | default .Params.group }}
            </div>
            <h1 class="text-xl leading-tight px-6 py-4">
              {{ .Title }}
            </h1>
            <p class="text-base px-6">
              {{ .Params.summary }}
            </p>
            <div class="grow"></div>
            <div class="text-sm font-mono group-hover:underline px-6 pb-4">Learn more →</div>
            <a class="absolute inset-0 outline-0" href="{{ .RelPermalink }}">
              <span class="sr-only">Read more</span>
            </a>
          </article>
        {{ end }}
      </div>
    </div>
    {{ partial "commands-nav.html" . }}
    {{ partial "scripts.html" . }}
  </main>
{{ end }}