<script>
  import { flexRender } from "@tanstack/svelte-table";
  export let header;
</script>

<th class="cursor-pointer min-w-[5rem]">
  {#if !header.isPlaceholder}
    <button
      class="w-full"
      tabindex="0"
      on:click={header.column.getToggleSortingHandler()}
    >
      <svelte:component
        this={flexRender(header.column.columnDef.header, header.getContext())}
      />
      {#if header.column
        .getIsSorted()
        .toString() == "asc" && header.column.getCanSort()}
        🔼
      {:else if header.column
        .getIsSorted()
        .toString() == "desc" && header.column.getCanSort()}
        🔽
      {/if}
    </button>
  {/if}
  {#if header.column.getCanFilter()}
    <div class="relative max-w-xs">
      <input
        title="name-search"
        value={header.column.getFilterValue() || ""}
        on:keyup={(e) => {
          header.column.setFilterValue(e.target.value);
        }}
        type="text"
        class="block w-full rounded-md border-gray-200 py-2 pl-8 text-xs focus:border-blue-500 focus:ring-blue-500"
        placeholder=""
      />
      <div
        class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
      >
        <svg
          class="h-3.5 w-3.5 text-gray-400"
          xmlns="http://www.w3.org/2000/svg"
          width={16}
          height={16}
          fill="currentColor"
          viewBox="0 0 16 16"
        >
          <path
            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
          />
        </svg>
      </div>
    </div>
  {/if}
</th>
