<script setup lang="ts">
import DefaultPage from '../components/DefaultPage.vue';
import ItemList from '../components/ItemList.vue';
import { useShoppingListStore } from '../store/shoppingList';

const store = useShoppingListStore();

const tabs = [
  { name: 'open items' },
  { name: 'bought items' },
];
</script>

<template>
  <DefaultPage :tabs="tabs" v-slot="slot" title="Shopping List">
    <v-container>
      <v-window v-model="slot.tab">
        <v-window-item value="open-items">
          <ItemList :items="store.openItems"></ItemList>
        </v-window-item>
        <v-window-item value="bought-items">
          <ItemList :items="store.boughtItems"></ItemList>
        </v-window-item>
      </v-window>
    </v-container>
    <v-card-text style="display: flex; justify-content: end">
      <v-btn
        icon="mdi-plus"
        color="red"
        to="/add-item"
        elevation="8"
        size="large"
      />
    </v-card-text>
  </DefaultPage>
</template>
