<script setup>

import { Button } from '@/components/ui/button/index.js'
import { CirclePlus, Pencil, Trash } from 'lucide-vue-next'
import { useAdminPostsStore } from '@/stores/adminPosts.js'
import { onMounted } from 'vue'
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from '@/components/ui/table/index.js'

const adminPostsStore = useAdminPostsStore();

onMounted(() => {
  adminPostsStore.fetchPosts();
})
</script>

<template>
  <div class="grid grid-cols-3 grid-rows-1 mt-28 sm:mt-20 w-full justify-center items-center gap-4">
    <div class="col-span-3 col-start-1 lg:col-span-1 lg:col-start-2 mx-5 lg:mx-0">
      <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-6">
        Admin
      </h1>
      <RouterLink to="/admin/post/create">
        <Button class="mb-6">
          <CirclePlus class="mr-2" />
          Créer
        </Button>
      </RouterLink>
      <Table>
        <TableCaption>List of posts</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead>ID</TableHead>
            <TableHead>Date</TableHead>
            <TableHead>City</TableHead>
            <TableHead>Country</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-for="post in adminPostsStore.posts" :key="post.id">
            <TableCell>{{ post.id }}</TableCell>
            <TableCell>{{ post.date }}</TableCell>
            <TableCell>{{ post.city }}</TableCell>
            <TableCell>{{ post.country }}</TableCell>
            <TableCell>
              <div class="flex gap-2">
                <Button>
                  <Pencil size="16"/>
                </Button>
                <Button>
                  <Trash size="16"/>
                </Button>
              </div>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  </div>
</template>

<style scoped>

</style>