
mixin avatarDialog()
    el-dialog.x-dialog.x-avatar-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="avatarDialog" :visible.sync="avatarDialog.visible" :show-close="false" width="600px")
        div(v-loading="avatarDialog.loading")
            div(style="display:flex")
                el-popover(placement="right" width="500px" trigger="click")
                    img.x-link(slot="reference" v-lazy="avatarDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:12px")
                    img.x-link(v-lazy="avatarDialog.ref.imageUrl" style="width:500px;height:375px" @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)")
                div(style="flex:1;display:flex;align-items:center;margin-left:15px")
                    div(style="flex:1")
                        div
                            span.dialog-title(v-text="avatarDialog.ref.name")
                        div(style="margin-top:5px")
                            span.x-link.x-grey(v-text="avatarDialog.ref.authorName" @click="showUserDialog(avatarDialog.ref.authorId)" style="font-family:monospace")
                        div
                            el-tag(v-if="avatarDialog.ref.releaseStatus === 'public'" type="success" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.avatar.tags.public') }}
                            el-tag(v-else type="danger" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.avatar.tags.private') }}
                            el-tag.x-tag-platform-pc(v-if="avatarDialog.isPC" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") PC
                                span.x-grey(v-if="avatarDialog.platformInfo.pc" style=";margin-left:5px;border-left:inherit;padding-left:5px") {{ avatarDialog.platformInfo.pc.performanceRating }}
                                span.x-grey(v-if="avatarDialog.bundleSizes['standalonewindows']" style=";margin-left:5px;border-left:inherit;padding-left:5px") {{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}
                            el-tag.x-tag-platform-quest(v-if="avatarDialog.isQuest" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") Android
                                span.x-grey(v-if="avatarDialog.platformInfo.android" style=";margin-left:5px;border-left:inherit;padding-left:5px") {{ avatarDialog.platformInfo.android.performanceRating }}
                                span.x-grey(v-if="avatarDialog.bundleSizes['android']" style="margin-left:5px;border-left:inherit;padding-left:5px") {{ avatarDialog.bundleSizes['android'].fileSize }}
                            el-tag.x-tag-platform-ios(v-if="avatarDialog.isIos" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") iOS
                                span.x-grey(v-if="avatarDialog.platformInfo.ios" style=";margin-left:5px;border-left:inherit;padding-left:5px") {{ avatarDialog.platformInfo.ios.performanceRating }}
                                span.x-grey(v-if="avatarDialog.bundleSizes['ios']" style="margin-left:5px;border-left:inherit;padding-left:5px") {{ avatarDialog.bundleSizes['ios'].fileSize }}
                            el-tag.x-link(v-if="avatarDialog.inCache" type="info" effect="plain" size="mini" @click="openFolderGeneric(avatarDialog.cachePath)" style="margin-right:5px;margin-top:5px")
                                span(v-text="avatarDialog.cacheSize")
                                |  {{ $t('dialog.avatar.tags.cache') }}
                            el-tag(v-if="avatarDialog.isQuestFallback" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.avatar.tags.fallback') }}
                            el-tag(v-if="avatarDialog.hasImposter" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.avatar.tags.impostor') }}
                                span.x-grey(v-if="avatarDialog.imposterVersion" style="margin-left:5px;border-left:inherit;padding-left:5px") v{{ avatarDialog.imposterVersion }}
                            el-tag(v-if="avatarDialog.ref.unityPackageUrl" type="success" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.avatar.tags.future_proofing') }}
                            div
                                template(v-for="tag in avatarDialog.ref.tags")
                                    el-tag(v-if="tag.startsWith('content_')" :key="tag" effect="plain" size="mini" style="margin-right:5px;margin-top:5px")
                                        template(v-if="tag === 'content_horror'") {{ $t('dialog.avatar.tags.content_horror') }}
                                        template(v-else-if="tag === 'content_gore'") {{ $t('dialog.avatar.tags.content_gore') }}
                                        template(v-else-if="tag === 'content_violence'") {{ $t('dialog.avatar.tags.content_violence') }}
                                        template(v-else-if="tag === 'content_adult'") {{ $t('dialog.avatar.tags.content_adult') }}
                                        template(v-else-if="tag === 'content_sex'") {{ $t('dialog.avatar.tags.content_sex') }}
                                        template(v-else) {{ tag.replace('content_', '') }}
                        div(style="margin-top:5px")
                            span(v-show="avatarDialog.ref.name !== avatarDialog.ref.description" v-text="avatarDialog.ref.description" style="font-size:12px")
                    div(style="flex:none;margin-left:10px")
                        el-tooltip(v-if="avatarDialog.inCache" placement="top" :content="$t('dialog.avatar.actions.delete_cache_tooltip')" :disabled="hideTooltips")
                            el-button(icon="el-icon-delete" circle @click="deleteVRChatCache(avatarDialog.ref)" :disabled="isGameRunning && avatarDialog.cacheLocked")
                        el-tooltip(v-if="avatarDialog.isFavorite" placement="top" :content="$t('dialog.avatar.actions.favorite_tooltip')" :disabled="hideTooltips")
                            el-button(type="warning" icon="el-icon-star-on" circle @click="avatarDialogCommand('Add Favorite')" style="margin-left:5px")
                        el-tooltip(v-else placement="top" :content="$t('dialog.avatar.actions.favorite_tooltip')" :disabled="hideTooltips")
                            el-button(type="default" icon="el-icon-star-off" circle @click="avatarDialogCommand('Add Favorite')" style="margin-left:5px")
                        el-dropdown(trigger="click" @command="avatarDialogCommand" size="small" style="margin-left:5px")
                            el-button(:type="avatarDialog.isBlocked ? 'danger' : 'default'" icon="el-icon-more" circle)
                            el-dropdown-menu(#default="dropdown")
                                el-dropdown-item(icon="el-icon-refresh" command="Refresh") {{ $t('dialog.avatar.actions.refresh') }}
                                el-dropdown-item(icon="el-icon-check" :disabled="API.currentUser.currentAvatar === avatarDialog.id" command="Select Avatar") {{ $t('dialog.avatar.actions.select') }}
                                el-dropdown-item(v-if="/quest/.test(avatarDialog.ref.tags)" icon="el-icon-check" command="Select Fallback Avatar") {{ $t('dialog.avatar.actions.select_fallback') }}
                                el-dropdown-item(v-if="avatarDialog.isBlocked" icon="el-icon-circle-check" command="Unblock Avatar" style="color:#F56C6C") {{ $t('dialog.avatar.actions.unblock') }}
                                el-dropdown-item(v-else icon="el-icon-circle-close" command="Block Avatar") {{ $t('dialog.avatar.actions.block') }}
                                el-dropdown-item(v-if="avatarDialog.ref.authorId !== API.currentUser.id" icon="el-icon-picture-outline" command="Previous Images") {{ $t('dialog.avatar.actions.show_previous_images') }}
                                template(v-if="avatarDialog.ref.authorId === API.currentUser.id")
                                    el-dropdown-item(v-if="avatarDialog.ref.releaseStatus === 'public'" icon="el-icon-user-solid" command="Make Private" divided) {{ $t('dialog.avatar.actions.make_private') }}
                                    el-dropdown-item(v-else icon="el-icon-user" command="Make Public" divided) {{ $t('dialog.avatar.actions.make_public') }}
                                    el-dropdown-item(icon="el-icon-edit" command="Rename") {{ $t('dialog.avatar.actions.rename') }}
                                    el-dropdown-item(icon="el-icon-edit" command="Change Description") {{ $t('dialog.avatar.actions.change_description') }}
                                    el-dropdown-item(icon="el-icon-edit" command="Change Content Tags") {{ $t('dialog.avatar.actions.change_content_tags') }}
                                    el-dropdown-item(icon="el-icon-picture-outline" command="Change Image") {{ $t('dialog.avatar.actions.change_image') }}
                                    el-dropdown-item(v-if="avatarDialog.ref.unityPackageUrl" icon="el-icon-download" command="Download Unity Package") {{ $t('dialog.avatar.actions.download_package') }}
                                    el-dropdown-item(v-if="avatarDialog.hasImposter" icon="el-icon-delete" command="Delete Imposter" style="color:#F56C6C") {{ $t('dialog.avatar.actions.delete_impostor') }}
                                    el-dropdown-item(v-else icon="el-icon-user" command="Create Imposter") {{ $t('dialog.avatar.actions.create_impostor') }}
                                    el-dropdown-item(icon="el-icon-delete" command="Delete" style="color:#F56C6C" divided) {{ $t('dialog.avatar.actions.delete') }}
            el-tabs
                el-tab-pane(:label="$t('dialog.avatar.info.header')")
                    .x-friend-list
                        .x-friend-item(style="width:100%;cursor:default")
                            .detail 
                                span.name {{ $t('dialog.avatar.info.memo') }}
                                el-input.extra(v-model="avatarDialog.memo" @change="onAvatarMemoChange" size="mini" type="textarea" :rows="2" :autosize="{minRows: 1, maxRows: 20}" :placeholder="$t('dialog.avatar.info.memo_placeholder')" resize="none")
                        .x-friend-item(style="width:100%;cursor:default")
                            .detail
                                span.name {{ $t('dialog.avatar.info.id') }}
                                span.extra {{ avatarDialog.id }}
                                    el-tooltip(placement="top" :content="$t('dialog.avatar.info.id_tooltip')" :disabled="hideTooltips")
                                        el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:5px")
                                            el-button(type="default" icon="el-icon-s-order" size="mini" circle)
                                            el-dropdown-menu(#default="dropdown")
                                                el-dropdown-item(@click.native="copyAvatarId(avatarDialog.id)") {{ $t('dialog.avatar.info.copy_id') }}
                                                el-dropdown-item(@click.native="copyAvatarUrl(avatarDialog.id)") {{ $t('dialog.avatar.info.copy_url') }}
                        .x-friend-item(style="cursor:default")
                            .detail
                                span.name {{ $t('dialog.avatar.info.created_at') }}
                                span.extra {{ avatarDialog.ref.created_at | formatDate('long') }}
                        .x-friend-item(style="cursor:default")
                            .detail
                                span.name {{ $t('dialog.avatar.info.last_updated') }}
                                span.extra(v-if="avatarDialog.lastUpdated") {{ avatarDialog.lastUpdated | formatDate('long') }}
                                span.extra(v-else) {{ avatarDialog.ref.updated_at | formatDate('long') }}
                        .x-friend-item(style="cursor:default")
                            .detail
                                span.name {{ $t('dialog.avatar.info.version') }}
                                span.extra(v-if="avatarDialog.ref.version !== 0" v-text="avatarDialog.ref.version")
                                span.extra(v-else) -
                        .x-friend-item(style="width:100%;cursor:default")
                            .detail
                                span.name {{ $t('dialog.avatar.info.platform') }}
                                span.extra(v-if="avatarDialogPlatform" v-text="avatarDialogPlatform")
                                span.extra(v-else) -
                el-tab-pane(:label="$t('dialog.avatar.json.header')")
                    el-button(type="default" @click="refreshAvatarDialogTreeData()" size="mini" icon="el-icon-refresh" circle)
                    el-tooltip(placement="top" :content="$t('dialog.avatar.json.file_analysis')" :disabled="hideTooltips")
                        el-button(type="default" @click="getAvatarFileAnalysis" size="mini" icon="el-icon-s-data" circle style="margin-left:5px")
                    el-button(type="default" @click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)" size="mini" icon="el-icon-download" circle style="margin-left:5px")
                    el-tree(v-if="Object.keys(avatarDialog.fileAnalysis).length > 0" :data="avatarDialog.fileAnalysis" style="margin-top:5px;font-size:12px")
                        template(#default="scope")
                            span
                                span(v-text="scope.data.key" style="font-weight:bold;margin-right:5px")
                                span(v-if="!scope.data.children" v-text="scope.data.value")
                    el-tree(:data="avatarDialog.treeData" style="margin-top:5px;font-size:12px")
                        template(#default="scope")
                            span
                                span(v-text="scope.data.key" style="font-weight:bold;margin-right:5px")
                                span(v-if="!scope.data.children" v-text="scope.data.value")
