<script setup lang="ts">
    import TimesheetApprovalEmployeeOverviewList from '../components/timesheet-approval-employee-overview-list.vue';
    import { computed } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { useTimesheetStore } from 'src/stores/timesheet-store';

    const { d } = useI18n();
    const timesheet_store = useTimesheetStore();

    const pay_period_label = computed(() => {
        const dates = timesheet_store.current_pay_period.label.split('.');
        
        if ( dates.length < 2 ) {
            return { start_date: '—', end_date: '—' }
        }

        const start_date = d(new Date(dates[0] as string), { day: 'numeric', month: 'long', year: 'numeric', });
        const end_date = d(new Date(dates[1] as string), { day: 'numeric', month: 'long', year: 'numeric', });

        return { start_date, end_date };
    });
</script>

<template>
    <q-page 
        padding 
        class="q-pa-md bg-secondary "
    >
        <div class="column q-mt-lg text-uppercase text-center text-weight-bolder text-h4">
            {{ $t('timesheet_approvals.page_title') }}
            <div class="col row items-center justify-center full-width q-py-none q-my-none">
                <div class="text-primary text-weight-bold text-h6">
                    {{ pay_period_label.start_date }}
                </div>
                <div class="text-body2 q-mx-md text-weight-medium">
                    {{ $t('shared.misc.to') }}
                </div>
                <div class="text-primary text-weight-bold text-h6">
                    {{ pay_period_label.end_date }}
                </div>
            </div>
        </div>

        <TimesheetApprovalEmployeeOverviewList />
    </q-page>
</template>