<template>
  <v-container class="pt-3 pb-8">
    <h1 class="fc-h1 mb-4">{{ title }}</h1>
    <v-alert type="info" variant="tonal" icon="mdi-toolbox">
      This surface is a placeholder. It will be implemented in
      <strong>{{ surfaceOwner }}</strong>.
    </v-alert>
  </v-container>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const title = computed(() => route.meta.title ?? 'FabledCurator')

const surfaceOwner = computed(() => {
  const fc2 = new Set(['gallery', 'showcase', 'tags', 'settings'])
  const fc3 = new Set(['subscriptions', 'credentials', 'downloads'])
  if (fc2.has(route.name)) return 'FC-2 (image backbone)'
  if (fc3.has(route.name)) return 'FC-3 (subscription backbone)'
  return 'a future sub-project'
})
</script>

<style scoped>
.fc-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  color: rgb(var(--v-theme-on-surface));
}
</style>
