<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="w-[95vw] max-w-[95vw] max-h-[90dvh] overflow-y-auto p-4 sm:max-w-fit sm:p-6">
                <DialogHeader>
                    <DialogTitle>Post LOA</DialogTitle>
                    <DialogDescription>
                        Post an LOA on behalf of a member.
                    </DialogDescription>
                </DialogHeader>
                <LoaForm :admin-mode="true"></LoaForm>
                <DialogFooter>
                    <Button variant="outline" @click="showLOADialog = false">Cancel</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
        <div class="mx-auto max-w-5xl px-3 pt-10 sm:px-4 lg:px-0">
            <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>