<script lang="ts" setup>
import NewBudget from '../dialogs/NewBudget.vue';
import RowCard from '../components/RowCard.vue';
import { useSessionStore } from '../stores/session';

const BudgetsList = useSessionStore().BudgetsList;
</script>

<template>
  <h1>Budgets</h1>
  <div class="grid md:grid-cols-2 gap-6">
    <RowCard
      v-for="budget in BudgetsList"
      :key="budget.ID"
    >
      <router-link
        :to="'/budget/'+budget.ID+'/budgeting'"
        class="contents"
      >
        <!--<svg class="w-24"></svg>-->
        <p class="w-24 text-center text-6xl" />
        <span class="text-lg">{{ budget.Name
        }}</span>
      </router-link>
    </RowCard>
    <NewBudget />
  </div>
</template>
