<script
    setup
    lang="ts"
>
    import { useExpensesStore } from 'src/stores/expense-store';
    import ExpenseCrudDialogList from 'src/modules/timesheets/components/expense-crud-dialog-list.vue';
    import ExpenseCrudDialogForm from 'src/modules/timesheets/components/expense-crud-dialog-form.vue';
    import ExpenseCrudDialogHeader from 'src/modules/timesheets/components/expense-crud-dialog-header.vue';

    const expense_store = useExpensesStore();
</script>

<template>
    <q-dialog
        v-model="expense_store.is_open"
        persistent
    >
        <q-card
            class="q-pa-md"
            style=" min-width: 70vw;"
        >
            <q-inner-loading :showing="expense_store.is_loading">
                <q-spinner size="32px" />
            </q-inner-loading>

            <q-card-section>
                <!-- <q-banner 
                    v-if="expenses_error"
                    dense
                    class="bg-red-2 col-auto text-negative q-mt-sm"
                >
                    {{ expenses_error }}
                </q-banner> -->

                <ExpenseCrudDialogHeader />

                <ExpenseCrudDialogList />

                <ExpenseCrudDialogForm />

                <q-separator spaced />

            </q-card-section>

            <q-card-actions align="right">
                <!-- close btn -->
                <q-btn
                    flat
                    class="col-auto q-mr-sm"
                    color="primary"
                    :label="$t('shared.label.close')"
                    @click="expense_store.close"
                />
            </q-card-actions>

        </q-card>
    </q-dialog>
</template>