<template>
  <v-card>
    <v-card-title>Tag aliases ({{ store.rows.length }})</v-card-title>
    <v-data-table-virtual
      :headers="headers" :items="store.rows" :loading="store.loading"
      height="360" density="compact"
      no-data-text="No aliases yet — create one from a suggestion's ⋮ menu."
    >
      <template #item.mapping="{ item }">
        <code>{{ item.alias_string }}</code>
        <span class="mx-2">→</span>
        <strong>{{ item.canonical_tag_name }}</strong>
      </template>
      <template #item.actions="{ item }">
        <v-btn
          icon="mdi-delete" size="x-small" variant="text" color="error"
          @click="store.remove(item.alias_string, item.alias_category)"
        />
      </template>
    </v-data-table-virtual>
  </v-card>
</template>

<script setup>
import { onMounted } from 'vue'
import { useAliasesStore } from '../../stores/aliases.js'

const store = useAliasesStore()
const headers = [
  { title: 'Mapping', key: 'mapping', sortable: false },
  { title: 'Category', key: 'alias_category', sortable: true, width: 130 },
  { title: '', key: 'actions', sortable: false, width: 60 }
]
onMounted(() => store.load())
</script>

<style scoped>
code {
  background: rgb(var(--v-theme-surface-light));
  padding: 1px 6px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}
</style>
