<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <!-- Mobile sidebar -->
    <AppCmsSidebar :open="cms.sidebarOpen" @close="cms.toggleSidebar()" />
    <!-- Topbar + Slots -->
    <div class="lg:pl-72">
      <!-- Topbar -->
      <AppCmsTopbar @toggle-sidebar="cms.toggleSidebar()" />
      <!-- Main Slots-->
      <main class="py-10">
        <div class="px-4 sm:px-6 lg:px-8">
          <slot />
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import AppCmsSidebar from '@/components/header/CmsSidebar.vue';
import AppCmsTopbar from '@/components/header/CmsTopbar.vue';
import { useCmsStore } from '@/stores/useCmsStore';

const cms = useCmsStore();
// populate your actions once (maybe on mount)
cms.setActions({
  actions: [
    { id: 'publish', label: 'Publish Now' },
    { id: 'draft', label: 'Save Draft' },
    { id: 'queue', label: 'Queue Upload' },
  ],
  mainId: 'publish',
});
</script>
