<script setup lang="ts">
import { useNuxtApp } from 'nuxt/app';

import { PermissionAreas } from '#shared/helpers.ts';
import useSimpleHead from '~/composables/useSimpleHead.ts';

const { $translator: translator } = useNuxtApp();
useSimpleHead({
    title: `${translator.translate('admin.header')} • Expenses`,
}, translator);

const { data: moderation } = await useFetch('/api/admin/moderation', { pick: ['expenses'] });
</script>

<template>
    <Page>
        <NotFound v-if="!$isGranted(PermissionAreas.Panel)" />
        <div v-else>
            <p class="d-flex justify-content-between">
                <nuxt-link to="/admin">
                    <Icon v="user-cog" />
                    <T>admin.header</T>
                </nuxt-link>
                <span>
                    <nuxt-link to="/admin/timesheets">
                        <Icon v="file-spreadsheet" />
                        Fill out your timesheet
                    </nuxt-link>
                    <nuxt-link to="/admin/timesheets/overview">
                        <Icon v="file-spreadsheet" />
                        Overview
                    </nuxt-link>
                </span>
            </p>
            <div v-html="moderation?.expenses"></div>
        </div>
    </Page>
</template>
