<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  props: ['budgetid', 'accountid'],
})
</script>

<template>
  <span class="text-xl">
    <router-link to="/dashboard">⌂</router-link>
    {{$store.getters.CurrentBudget.Name}}
  </span>
  <div class="flex flex-col">
    <span class="bg-orange-200 rounded-lg m-1 p-1 px-3"><router-link :to="'/budget/'+budgetid">Budget</router-link></span>
    <li class="bg-orange-200 rounded-lg m-1 p-1 px-3">Reports (Coming Soon)</li>
    <!--<li><router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/all-accounts'">All Accounts</router-link></li>-->
    <li class="bg-orange-200 rounded-lg m-1 p-1 px-3">
      On-Budget Accounts
      <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between px-3">
        <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
        <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{(account.Balance.Int / 100).toLocaleString(undefined, {minimumFractionDigits: 2,})}} €</span>
      </div>
    </li>
    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
      Off-Budget Accounts
      <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between px-3">
            <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
            <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span>
      </div>
    </li>
    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
      Closed Accounts
    </li>
    <!--<li>
      <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/accounts'">Edit accounts</router-link>
    </li>-->
    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
      + Add Account
    </li>
    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
      <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/settings'">Budget-Settings</router-link>
    </li>
    <!--<li><router-link to="/admin">Admin</router-link></li>-->
  </div>        
</template>