<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="/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>
    </footer>
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n()
</script>
