<script lang="ts" setup>
import Card from '../components/Card.vue';
import { ref } from "vue";
import { useBudgetsStore } from '../stores/budget';

const dialog = ref(false);
const budgetName = ref("");
function saveBudget() {
  useBudgetsStore().NewBudget(budgetName.value);
  dialog.value = false;
};
function newBudget() {
  dialog.value = true;
};
</script>

<template>
  <Card>
    <p class="w-24 text-center text-6xl">+</p>
    <button class="text-lg" dark @click="newBudget">New Budget</button>
  </Card>
  <div v-if="dialog" justify="center">
    <div>
      <div>
        <span class="text-h5">New Budget</span>
      </div>
      <div>
        <input type="text" v-model="budgetName" label="Budget name" required />
      </div>
      <div>
        <button @click="dialog = false">Close</button>
        <button @click="saveBudget">Save</button>
      </div>
    </div>
  </div>
</template>