<script>
export default {
  props: ['budgetid'],
  mounted () {
    this.$store.dispatch("setCurrentBudget", this.budgetid)
  }
}

</script>

<template>
  <h1>Budget</h1>
  <h1>
    <router-link to="/dashboard">⌂</router-link>
    {{$store.getters.CurrentBudget.Name}}
  </h1>
  <ul>
    <li><router-link :to="'/budget/'+$store.getters.CurrentBudget.ID">Budget</router-link></li>
    <li>Reports (Coming Soon)</li>
    <li><router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/all-accounts'">All Accounts</router-link></li>
    <li>
      On-Budget Accounts
      <ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued">
          <li>
            <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/account/'+$store.getters.CurrentBudget.ID">{{account.Name}}</router-link>
            <span>{{account.Balance.Int / 100}}</span>
          </li>
      </ul>
    </li>
    <li>
      Off-Budget Accounts
      <ul v-for="account in $store.getters.OffBudgetAccounts" class="two-valued">
          <li>
            <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/account/'+$store.getters.CurrentBudget.ID">{{account.Name}}</router-link>
            <span>{{account.Balance.Int / 100}}</span>
          </li>
      </ul>
    </li>
    <li>
      Closed Accounts
    </li>
    <li>
      <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/accounts'">Edit accounts</router-link>
    </li>
    <li>
      + Add Account
    </li>
    <li>
      <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/settings'">Budget-Settings</router-link>
    </li>
    <li>
      <router-link to="/admin">Admin</router-link>
    </li>
</ul>        
</template>