
<script setup lang="ts">

import { onMounted } from "vue"
import { useRoute, useRouter } from "vue-router";
import { useItemsStore } from "../stores/ItemsStore.ts"
import * as authApi from "../api/AuthApi";

const store = useItemsStore()
const router = useRouter();

onMounted(() => {
  store.fetchItems()
})

function logout() {
    authApi.logout();
    router.push("/login");
}

</script>

<template>
    <div>
        <h1>Items</h1>

        <router-link to="/item/new">Create Item</router-link>

        <table>
            <tr v-for="item in store.items" :key="item.id">
                <td>{{ item.name }}</td>
                <td>

                    <router-link :to="`/item/${item.id}`" custom v-slot="{ navigate }">
                        <button @click="navigate" role="link">Edit</button>
                    </router-link>

                    <button @click="store.removeItem(item.id)">Delete</button>
                </td>
            </tr>
        </table>
        <button @click="logout()">Logout</button>
    </div>
</template>
