<template>
  <mainLayout>
    <div class="p-6">
      <p class="font-serif italic text-[25px] text-D">BRANKAS</p>
      <div class="mb-4">
        <ul class="flex flex-wrap text-center" role="tablist">
          <li v-for="tab in tabs" class="mr-2" role="presentation">
            <button :class="[
              'inline-block p-2 border-b-2 rounded-t-lg',
              activeTab === tab.id
                ? 'border-D text-D'
                : 'border-transparent text-D hover:text-D/50 hover:border-D',
            ]" @click="activeTab = tab.id" type="button" role="tab" aria-controls="ringkasan-content"
              :aria-selected="activeTab === tab.id">
              {{ tab.name }}
            </button>
          </li>
        </ul>
      </div>
      <div class="flex justify-end">
        <div class="w-full md:w-80 my-3 mb-9">
          <searchbar v-model:search="searchQuery" placeholder="Cari nama atau scan barcode item"/>
        </div>
        </div>
      <template v-if="activeTab == 'tabel'">
        <BrankasTabel :search="searchQuery" />
      </template>
      <template v-if="activeTab == 'card'">
        <BrankasList :search="searchQuery" />
      </template>
    </div>
  </mainLayout>
</template>

<script setup>
import { ref } from 'vue';
import mainLayout from '../layouts/mainLayout.vue'
import searchbar from '../components/Searchbar.vue';
import BrankasList from '../components/BrankasList.vue';
import BrankasTabel from '../components/BrankasTabel.vue';
const searchQuery = ref("");

const activeTab = ref('tabel');

const tabs = [
  { name: 'Tabel', id: 'tabel' },
  { name: 'Kartu', id: 'card' },
];
</script>
