<template>
  <v-app theme="dark">
    <v-main>
      <v-container max-width="900">
        <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 mdiUnoAliases } from '@/iconsets/mdi-unocss'
  import { aliases as phAliases } from '@/iconsets/ph'
  import { aliases as tablerAliases } from '@/iconsets/tabler'
  import { aliases as lucideAliases } from '@/iconsets/lucide'
  import { aliases as fa6Aliases } from '@/iconsets/fa6'
  import { aliases as carbonAliases } from '@/iconsets/carbon'
  import { aliases as bxAliases } from '@/iconsets/bx'
  import { aliases as riAliases } from '@/iconsets/ri'

  const iconSets = [
    { name: 'MDI (SVG)', aliases: mdiAliases },
    { name: 'MDI (UnoCSS)', aliases: mdiUnoAliases },
    { name: 'Phosphor', aliases: phAliases },
    { name: 'Tabler', aliases: tablerAliases },
    { name: 'Lucide', aliases: lucideAliases },
    { name: 'Font Awesome 6', aliases: fa6Aliases },
    { name: 'Carbon', aliases: carbonAliases },
    { name: 'Box Icons', aliases: bxAliases },
    { name: 'Remix Icons', aliases: riAliases },
  ]

  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-icon[class*='i-fa6-'] {
  width: 0.8em;
  height: 0.8em;
}

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