<script lang="ts">
  import { onMount } from "svelte";

  let searchTerm = "";
  let staticContainer: HTMLElement | null;

  onMount(async () => {
    staticContainer = document.getElementById("resource-list-static");
  });

  function search() {
    if (!staticContainer) return;

    const lowerCaseSearchTerm = searchTerm.toLowerCase().trim();

    if (!lowerCaseSearchTerm) {
      [...staticContainer?.children].forEach((element: HTMLElement) => {
        element.style.display = "";
      });
      return;
    }

    for (const element of staticContainer?.children) {
      const el = element as HTMLElement;
      const isMatch = el.dataset.searchTerm?.includes(lowerCaseSearchTerm);
      if (isMatch) {
        el.style.display = "";
      } else {
        el.style.display = "none";
      }
    }
  }

  $: search();
</script>

<div class="search-wrapper my-4 noise relative">
  <input
    type="text"
    bind:value={searchTerm}
    placeholder={`Search...`}
    class="w-full p-2 gradient border-1 border-neutral rounded noise" />
</div>
