<script>
  import { _ } from "svelte-i18n";
  export let groups;
  export let handler;
  let selected = "all";
</script>

<th>
  <select
    on:input={() => {
      setTimeout(() => {
        if (`${selected}`.trim()) {
          const value = selected;
          handler.filter(value, (runner) => {
            if (
              runner.group.id === value ||
              runner?.group?.parentGroup?.id === value ||
              value === "all"
            )
              return runner;
            return "";
          });
        }
      }, 50);
    }}
    bind:value={selected}
    name="groupfilter"
    id="groupfilter"
  >
    <option value="all">{$_('all')}</option>
    {#each groups as g}
      <option value={g.value}>{g.label}</option>
    {/each}
  </select>
</th>
