<template>
    <div class="w-full items-center flex flex-col">
        <div class="container max-w-screen-lg flex flex-col p-6">
            <div class="flex justify-between items-center">
                <div class="flex items-center text-xl gap-2">
                    <UIcon name="i-heroicons-rectangle-stack-20-solid" />
                    <div>收藏夹</div>
                </div>
                <div class="flex">
                    <UInput
                        v-model="searchQuery"
                        icon="i-heroicons-magnifying-glass-20-solid"
                        placeholder="搜索你的帖子..."
                        size="md"
                    />
                </div>
            </div>
        </div>
        <UDivider />
        <div class="container max-w-screen-lg flex flex-col p-6">
            <div class="flex gap-10">
                <div class="flex flex-col flex-grow">
                    <div class="flex items-center text-lg gap-2">
                        <UIcon name="i-heroicons-square-3-stack-3d" />
                        <div>帖子</div>
                    </div>
                    <div class="flex flex-col gap-4 mt-4">
                        <ILibraryThread />
                        <ILibraryThread />
                        <ILibraryThread />
                        <ILibraryThread />
                        <ILibraryThread />
                    </div>
                </div>
                <div class="flex flex-col flex-shrink-0 w-56">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center text-lg gap-2">
                            <UIcon name="i-heroicons-squares-2x2" />
                            <div>集合</div>
                        </div>
                        <UButton
                            icon="i-heroicons-plus-20-solid"
                            variant="soft"
                            @click="handleOpenCreateLibrary"
                        />
                    </div>
                    <div class="flex flex-col gap-4 mt-4">
                        <ILibraryCollect />
                        <ILibraryCollect />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ILibraryCreate ref="refCreate" />
    <ILibrarySelect ref="refSelect" />
</template>
<script setup>
const searchQuery = ref('')
const refCreate = ref(null)
function handleOpenCreateLibrary () {
    refCreate.value.handleOpen()
}
const refSelect = ref(null)
function handleOpenSelect (id) {
    refSelect.value.handleOpen(id)
}
provide('Library', {
    handleOpenSelect,
    handleOpenCreateLibrary
})
</script>
