<script setup lang="ts">
import {RouterLink, RouterView} from 'vue-router';
import {LedgerLabel, useLedgerParam} from "@/ledger";
import {routeNames} from "@/routes.ts";
import {IskLabel} from "@/market";

const {ledger} = useLedgerParam();

</script>

<template>
  <div v-if="ledger" class="mt-4">
    <div class="flex">
      <div class="flex w-full">
        <LedgerLabel :ledger="ledger" :link="false" />
      </div>
      <div class="flex justify-end w-full">
        <IskLabel class="mb-2" :amount="ledger.balance" />
      </div>
    </div>
    <div class="flex border-b-2 border-emerald-500 mt-4">
      <RouterLink :to="{name: routeNames.viewLedgerBalance}" class="tab">
        <span>Balance</span>
      </RouterLink>
      <RouterLink :to="{name: routeNames.listLedgerTransactions}" class="tab">
        <span>Transactions</span>
      </RouterLink>
      <RouterLink :to="{name: routeNames.listLedgerAcquisitions}" class="tab">
        <span>Acquisitions</span>
      </RouterLink>
    </div>
    <RouterView />
  </div>
</template>
