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

<th>
  <select
    on:input={() => {
      setTimeout(() => {
        if (`${selected}`.trim()) {
          if (selected === "all") {
            handler.filter("", "enabled");
          } else {
            handler.filter(selected, "enabled");
          }
        }
      }, 50);
    }}
    bind:value={selected}
    name="statusfilter"
    id="statusfilter"
  >
    <option value="all">{$_("all")}</option>
    <option value="true">{$_("enabled")}</option>
    <option value="false">{$_("disabled")}</option>
  </select>
</th>

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