mixin boops()
    el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="sendBoopDialog" :visible.sync="sendBoopDialog.visible" :title="$t('dialog.boop_dialog.header')" width="450px")
        div(v-if="sendBoopDialog.visible")
            el-select(v-model="sendBoopDialog.userId" :placeholder="$t('dialog.new_instance.instance_creator_placeholder')" filterable style="width:100%")
                el-option-group(v-if="vipFriends.length" :label="$t('side_panel.favorite')")
                    el-option.x-friend-item(v-for="friend in vipFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                        template(v-if="friend.ref")
                            .avatar(:class="userStatusClass(friend.ref)")
                                img(v-lazy="userImage(friend.ref)")
                            .detail
                                span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                        span(v-else v-text="friend.id")
                el-option-group(v-if="onlineFriends.length" :label="$t('side_panel.online')")
                    el-option.x-friend-item(v-for="friend in onlineFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                        template(v-if="friend.ref")
                            .avatar(:class="userStatusClass(friend.ref)")
                                img(v-lazy="userImage(friend.ref)")
                            .detail
                                span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                        span(v-else v-text="friend.id")
                el-option-group(v-if="activeFriends.length" :label="$t('side_panel.active')")
                    el-option.x-friend-item(v-for="friend in activeFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                        template(v-if="friend.ref")
                            .avatar
                                img(v-lazy="userImage(friend.ref)")
                            .detail
                                span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                        span(v-else v-text="friend.id")
                el-option-group(v-if="offlineFriends.length" :label="$t('side_panel.offline')")
                    el-option.x-friend-item(v-for="friend in offlineFriends" :key="friend.id" :label="friend.name" :value="friend.id" style="height:auto")
                        template(v-if="friend.ref")
                            .avatar
                                img(v-lazy="userImage(friend.ref)")
                            .detail
                                span.name(v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                        span(v-else v-text="friend.id")
            br
            br
            el-select(v-model="sendBoopDialog.fileId" clearable :placeholder="$t('dialog.boop_dialog.select_emoji')" size="small" style="width:100%" popper-class="max-height-el-select")
                el-option-group(:label="$t('dialog.boop_dialog.my_emojis')")
                    el-option(v-if="image.versions && image.versions.length > 0" v-for="image in emojiTable" :key="image.id" :value="image.id" style="width:100%;height:100%")
                        .vrcplus-icon(v-if="image.versions[image.versions.length - 1].file.url" style="overflow:hidden;width:200px;height:200px;padding:10px") 
                            template(v-if="image.frames")
                                .avatar(:style="generateEmojiStyle(image.versions[image.versions.length - 1].file.url, image.framesOverTime, image.frames, image.loopStyle)")
                            template(v-else)
                                img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url" style="width:200px;height:200px")
                el-option-group(:label="$t('dialog.boop_dialog.default_emojis')")
                    el-option(v-for="emojiName in photonEmojis" :key="emojiName" :value="getEmojiValue(emojiName)" style="width:100%;height:100%")
                        span(v-text="emojiName")
        template(#footer)
            el-button(size="small" @click="showGalleryDialog(2)") {{ $t('dialog.boop_dialog.emoji_manager') }}
            el-button(size="small" @click="sendBoopDialog.visible = false") {{ $t('dialog.boop_dialog.cancel') }}
            el-button(size="small" @click="sendBoop" :disabled="!sendBoopDialog.userId") {{ $t('dialog.boop_dialog.send') }}
