<script
    setup
    lang="ts"
>
    import { date } from 'quasar';
    import { onMounted } from 'vue';
    import { useAuthStore } from 'src/stores/auth-store';
    import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
    import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';

    const { user } = useAuthStore();
    const timesheet_store = useTimesheetStore();
    const timesheet_api = useTimesheetApi();

    onMounted(async () => {
        await timesheet_api.getTimesheetsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
    });
</script>


<template>
    <q-page
        padding
        class="column q-pa-md bg-secondary items-center"
    >
        <PageHeaderTemplate
            :title="'timesheet.page_header'"
            :start-date="timesheet_store.pay_period?.period_start ?? ''"
            :end-date="timesheet_store.pay_period?.period_end ?? ''"
            class="col-auto"
        />

        <div
            class="col"
            :style="$q.screen.gt.sm ? 'width: 90vw' : ''"
        >
            <TimesheetWrapper :employee-email="user?.email ?? ''" />
        </div>

    </q-page>
</template>