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') }}