<template>
  <div>
    <header class="app-header">
      <div class="container header-content">
        <NuxtLink class="brand" to="/">MatosBox</NuxtLink>
        <nav class="nav-links">
          <NuxtLink to="/objets">{{ t('nav.objets') }}</NuxtLink>
          <NuxtLink to="/emplacements">{{ t('nav.emplacements') }}</NuxtLink>
          <NuxtLink to="/categories">{{ t('nav.categories') }}</NuxtLink>
          <NuxtLink to="/achats">{{ t('nav.achats') }}</NuxtLink>
          <NuxtLink to="/analyse">{{ t('nav.analyse') }}</NuxtLink>
          <NuxtLink to="/settings">{{ t('nav.settings') }}</NuxtLink>
          <NuxtLink to="/debug">{{ t('nav.debug') }}</NuxtLink>
        </nav>
      </div>
    </header>

    <main>
      <NuxtPage />
    </main>

    <footer class="app-footer">
      <div class="container">
        <small>{{ t('footer.text') }}</small>
        <div style="margin-top: 6px;">
          <small>{{ t('footer.versions', versions) }}</small>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n()
const versions = ref({ frontend: '0.1.0', backend: 'unknown' })

onMounted(async () => {
  const data = await useVersions()
  versions.value = data
})
</script>
