<template>
  <div class="min-h-screen bg-slate-950 text-slate-100 flex flex-col md:flex-row">
    <!-- Navigation Sidebar / Mobile Bar -->
    <Navbar v-if="authStore.isAuthenticated" />

    <!-- Main Content Area -->
    <main
      class="flex-1 p-4 md:p-8 mb-16 md:mb-0 transition-all"
      :class="authStore.isAuthenticated ? 'md:ml-64' : ''"
    >
      <div class="max-w-7xl mx-auto">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useAuthStore } from './stores/auth';
import Navbar from './components/Navbar.vue';

const authStore = useAuthStore();

onMounted(async () => {
  if (authStore.token) {
    await authStore.fetchCurrentUser();
  }
});
</script>
