<template>
  <v-bottom-sheet class="max-w-[480px]" v-model="channels.show.editor">
    <channel-editor @relist="channels.list" />
  </v-bottom-sheet>
  <v-bottom-sheet class="max-w-[480px]" v-model="channels.show.members">
    <channel-members :item="channels.related.manage_to" @relist="channels.list" />
  </v-bottom-sheet>
  <v-bottom-sheet class="max-w-[480px]" v-model="channels.show.delete">
    <channel-deletion @relist="channels.list" />
  </v-bottom-sheet>

  <v-bottom-sheet class="max-w-[480px]" v-model="channels.show.messages.delete">
    <message-deletion />
  </v-bottom-sheet>
</template>

<script setup lang="ts">
import { useChannels } from "@/stores/channels"
import ChannelEditor from "@/components/chat/channels/ChannelEditor.vue"
import ChannelMembers from "@/components/chat/channels/ChannelMembers.vue"
import ChannelDeletion from "@/components/chat/channels/ChannelDeletion.vue"
import MessageDeletion from "@/components/chat/MessageDeletion.vue"

const channels = useChannels()
</script>
