<script setup lang="ts">
import LoaForm from '@/components/loa/loaForm.vue';
import LoaList from '@/components/loa/loaList.vue';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import Button from '@/components/ui/button/Button.vue';
import { ref } from 'vue';

const showLOADialog = ref(false);
</script>

<template>
    <div>
        <Dialog v-model:open="showLOADialog" v-on:update:open="showLOADialog = false">
            <DialogContent class="sm:max-w-fit">
                <DialogHeader>
                    <DialogTitle>Post LOA</DialogTitle>
                    <DialogDescription>
                        Post an LOA on behalf of a member.
                    </DialogDescription>
                </DialogHeader>
                <LoaForm :admin-mode="true" class="my-3"></LoaForm>
            </DialogContent>
        </Dialog>
        <div class="max-w-5xl mx-auto pt-10">
            <div class="flex justify-between mb-4">
                <h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">LOA Log</h1>
                <div>
                    <Button @click="showLOADialog = true">Post LOA</Button>
                </div>
            </div>
            <LoaList :admin-mode="true"></LoaList>
        </div>
    </div>
</template>