<template>
  <v-app theme="dark">
    <v-main>
      <v-container max-width="400">
        <v-table density="compact" height="calc(100vh - 32px)" fixed-header>
          <thead>
            <tr>
              <th class="text-left">Alias</th>
              <th v-for="set in iconSets" :key="set.name" class="text-center">{{ set.name }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="alias in allAliases" :key="alias">
              <td><code>${{ alias }}</code></td>
              <td v-for="set in iconSets" :key="set.name" class="text-center">
                <v-tooltip v-if="set.aliases[alias]" location="bottom">
                  <template #activator="{ props }">
                    <v-icon v-bind="props" :icon="set.aliases[alias]" />
                  </template>
                  <code>{{ set.aliases[alias] }}</code>
                </v-tooltip>
                <span v-else class="text-disabled">—</span>
              </td>
            </tr>
          </tbody>
        </v-table>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
  import { computed } from 'vue'
  import { aliases as mdiAliases } from '@/iconsets/mdi-svg'
  import { aliases as msAliases } from '@/iconsets/ms'

  const iconSets = [
    { name: 'MDI (SVG)', aliases: mdiAliases },
    { name: 'Material Symbols', aliases: msAliases },
  ]

  const allAliases = computed(() => {
    const keys = new Set()
    for (const set of iconSets) {
      for (const key of Object.keys(set.aliases)) {
        keys.add(key)
      }
    }
    return [...keys]
  })
</script>

<style>
.v-table thead th:not(:first-child) {
  writing-mode: sideways-lr;
  height: 200px;
}
</style>