<script>
  export let handler;
  let filterValue = "";
</script>

<th>
  <input
    on:input={() => {
      setTimeout(() => {
        const v = filterValue.toLowerCase();
        handler.filter(v, (c) => {
          // if (v === "") {
          //   return c;
          // }

          if (!c.runner && v === "blanko") {
            return "blanko";
          }

          if (v.startsWith("#")) {
            return `#${c.runner?.id}`;
          }
          if (c.runner) {
            let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
            if (c.runner.middlename) {
              runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
            }
            runnerName = runnerName.toLowerCase();
            return runnerName;
          }
          return "";
        });
      }, 150);
    }}
    bind:value={filterValue}
    type="text"
    name="runnerfilter"
    id="runnerfilter"
  />
</th>

<style>
  th {
    border-bottom: 1px solid #e0e0e0;
  }
  input {
    margin: -1px 0 0 0;
    padding: 0;
    width: 100%;
    height: 24px;
    border: none;
    text-align: center;
    background: inherit;
    outline: 0;
    font-size: 14px;
  }
</style>
