Copy

<script setup lang="ts">
import {
  IconArrowsMaximize,
  IconArrowsMinimize,
  IconSortAscending,
  IconSortDescending,
} from "@tabler/icons-vue";
import type { FilterState } from "src/store";

const props = defineProps<{
  columns: string[];
  filterState: FilterState;
}>();

function sortByTime() {
  props.filterState.order_direction =
    props.filterState.order_direction === "asc" ? "desc" : "asc";
}
</script>

<template>
  <thead
    class="bg-card sticky top-0"
    style="box-shadow: 0 1px var(--color-stone-800)"
  >
    <tr>
      <th
        v-if="columns.includes('time')"
        class="w-48 max-w-48 cursor-pointer"
        @click="sortByTime"
      >
        <span class="flex items-center gap-1">
          Timestamp
          <Component
            :is="
              filterState.order_direction === 'asc'
                ? IconSortAscending
                : IconSortDescending
            "
            size="16"
          />
        </span>
      </th>
      <th v-if="columns.includes('event')" class="w-36 min-w-36">Event</th>
      <th
        v-if="columns.includes('remote_addr')"
        class="min-w-64"
        :class="{
          'w-64': !filterState.resolve_ips,
        }"
      >
        Source
      </th>
      <th v-if="columns.includes('details')" class="min-w-full">
        <span class="flex items-center gap-2">
          Details
          <button
            @click="filterState.expand_details = !filterState.expand_details"
            class="text-muted"
          >
            <component
              :is="
                filterState.expand_details
                  ? IconArrowsMinimize
                  : IconArrowsMaximize
              "
              size="16"
            />
          </button>
        </span>
      </th>
    </tr>
  </thead>
</template>