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

const props = defineProps<{
    budgetid: string,
}>();

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

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