<script setup lang="ts">
import {storeToRefs} from "pinia";
import {PencilSquareIcon, TrashIcon} from "@heroicons/vue/24/outline";
import {useRuleBooksStore} from "@/rules";
import {routeNames} from "@/routes";

const {ruleBooks} = storeToRefs(useRuleBooksStore());

</script>

<template>
  <div class="grid mb-2 mt-4">
    <div class="flex justify-end border-b-1">
      <RouterLink class="button mb-2 ms-2" :to="{ name: routeNames.newRuleBook}">New Rule Book</RouterLink>
    </div>
    <div v-for="ruleBook in ruleBooks" :key="ruleBook.ruleBookId" class="flex items-center mt-2">
      <span class="flex grow me-2">{{ruleBook.name}}</span>
      <RouterLink class="btn-icon me-1" :to="{ name: routeNames.editRuleBook, params: { ruleBookId: ruleBook.ruleBookId } }"><PencilSquareIcon /></RouterLink>
      <button class="btn-icon"><TrashIcon /></button>
    </div>
  </div>
</template>