<template>
  <div>
    <main class="container mx-auto px-4 py-16">
      <TemplatePageCategorySelection 
        v-if="!selectedCategory" 
        @category-selected="handleCategorySelect" 
      />

      <TemplatePageTemplateGrid 
        v-else 
        :id_category="selectedCategory.id"
        :category="selectedCategory.nama" 
        @back="goBack" 
      />
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 1. Impor komponen anak yang Anda gunakan
import TemplatePageCategorySelection from '~/components/template-page/CategorySelection.vue'; // Pastikan path ini benar
import TemplatePageTemplateGrid from '~/components/template-page/TemplateGrid.vue';       // Pastikan path ini benar

// 2. State untuk menyimpan SELURUH OBJEK kategori yang dipilih
const selectedCategory = ref(null);

// Fungsi ini sekarang akan menerima seluruh objek { id, nama }
const handleCategorySelect = (categoryObject) => {
  selectedCategory.value = categoryObject;
};

// Fungsi ini akan menangkap event 'back' dari TemplateGrid
const goBack = () => {
  selectedCategory.value = null;
};
</script>