<script
    setup
    lang="ts"
>
    import { useExpensesStore } from 'src/stores/expense-store';

    const expense_store = useExpensesStore();
</script>

<template>
    <q-item class="row justify-between">
        <q-item-label
            header
            class="text-h6 col-auto"
        >
            {{ $t('timesheet.expense.title') }}
        </q-item-label>
        <q-item-section class="items-center col-auto">
            <q-badge
                lines="1"
                class="q-pa-sm q-px-md"
                :label="$t('timesheet.expense.total_amount') + ': ' + expense_store.pay_period_expenses_totals.amount.toFixed(2)"
            />

            <q-separator spaced />

            <q-badge
                lines="2"
                class="q-pa-sm q-px-md"
                :label="$t('timesheet.expense.total_mileage') + ': ' + expense_store.pay_period_expenses_totals.mileage.toFixed(1)"
            />
        </q-item-section>
    </q-item>
</template>