<script
    setup
    lang="ts"
>
    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
    import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
    
    import { useTimesheetStore } from 'src/stores/timesheet-store';

    const timesheet_store = useTimesheetStore();
</script>

<template>
    <q-page class="column bg-secondary items-center">
        <div
            class="col column fit"
            :style="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? '' : 'width: 90vw'"
        >
            <PageHeaderTemplate
                :title="'timesheet.page_header'"
                :start-date="timesheet_store.pay_period?.period_start ?? ''"
                :end-date="timesheet_store.pay_period?.period_end ?? ''"
                class="col-auto"
            />

            <TimesheetWrapper class="col" />
        </div>
    </q-page>
</template>