<template lang="pug">
#app
  nav.frame-nav(v-if="showHeader")
    router-link(to="/") Home
    router-link(to="/about") About
    
  main.frame-main
    router-view
    
  footer.frame-footer(v-if="showFooter")
    p Powered by 
      strong Frame
      |  🚀
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const routerReady = ref(false);

// Computed properties to control header/footer visibility
// Only show after router is ready and check meta flags
const showHeader = computed(() => routerReady.value && !route.meta.hideHeader);
const showFooter = computed(() => routerReady.value && !route.meta.hideFooter);

onMounted(async () => {
  // Wait for router to be ready before showing header/footer
  // This prevents a flash of header/footer on pages that should hide them
  await router.isReady();
  routerReady.value = true;
});
</script>

<style scoped>
.frame-nav {
  padding: 1rem;
  background: #f5f5f5;
  display: flex;
  gap: 1rem;
}

.frame-nav a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.frame-nav a:hover {
  text-decoration: underline;
}

.frame-nav a.router-link-active {
  color: #dc2626;
}

.frame-main {
  padding: 2rem;
  min-height: 50vh;
}

.frame-footer {
  padding: 1rem;
  background: #f9fafb;
  text-align: center;
  color: #6b7280;
  border-top: 1px solid #e5e7eb;
}
</style> 