<script setup lang="ts">
import LoaForm from '@/components/loa/loaForm.vue';
import { useUserStore } from '@/stores/user';
import { Member } from '@shared/types/member';
import LoaList from '@/components/loa/loaList.vue';
import { ref } from 'vue';

const userStore = useUserStore();

const mode = ref<'submit' | 'view'>('submit')
</script>

<template>
    <div class="max-w-5xl mx-auto flex w-full flex-col mt-4 mb-10">
        <div class="mb-8">
            <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Leave of Absence</p>
            <div class="pt-3">
                <div class="flex w-min *:px-10 pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
                    <label :class="mode === 'submit' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
                        @click="mode = 'submit'">Submit</label>
                    <label :class="mode === 'view' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
                        @click="mode = 'view'">History</label>
                </div>
            </div>
        </div>
        <LoaForm v-if="mode === 'submit'" :member="userStore.user.member"></LoaForm>
        <LoaList v-if="mode === 'view'" :admin-mode="false"></LoaList>
    </div>
</template>