doctype html
html
    head
        meta(http-equiv="Content-Type" content="text/html;charset=utf-8")
        meta(http-equiv="Cache-Control" content="no-cache")
        meta(http-equiv="referrer" content="no-referrer")
        meta(http-equiv="viewport" content="width=device-width,initial-scale=1,user-scalable=no")
        title VRCX
        link(rel="preconnect" href="https://api.vrchat.cloud")
        link(rel="preconnect" href="https://d348imysud55la.cloudfront.net")
        link(rel="stylesheet" href="app.css")
        link(rel="stylesheet" href="flags.css")
    body
        .x-app#x-app(style="display:none" @dragenter.prevent @dragover.prevent @drop.prevent)
            //- login
            include ./mixins/loginPage.pug
            +loginPage()

            //- menu
            .x-menu-container
                //- download progress, update pending
                .pending-update(v-if="downloadInProgress" @click="showDownloadDialog")
                    el-progress(type="circle" width="50" stroke-width="3" :percentage="downloadProgress" :format="downloadProgressText")
                .pending-update(v-else-if="pendingVRCXUpdate || pendingVRCXInstall")
                    el-button(type="default" @click="showVRCXUpdateDialog" size="mini" icon="el-icon-download" circle style="font-size:14px;height:50px;width:50px")

                el-menu(ref="menu" collapse @select="selectMenu")
                    mixin menuitem(index, name, icon)
                        el-menu-item(index=index)
                            i(class=icon)
                            template(#title)
                                span= name
                    +menuitem('feed', "{{ $t('nav_tooltip.feed') }}", 'el-icon-news')
                    +menuitem('gameLog', "{{ $t('nav_tooltip.game_log') }}", 'el-icon-s-data')
                    +menuitem('playerList', "{{ $t('nav_tooltip.player_list') }}", 'el-icon-tickets')
                    +menuitem('search', "{{ $t('nav_tooltip.search') }}", 'el-icon-search')
                    +menuitem('favorite', "{{ $t('nav_tooltip.favorites') }}", 'el-icon-star-off')
                    +menuitem('friendLog', "{{ $t('nav_tooltip.friend_log') }}", 'el-icon-notebook-2')
                    +menuitem('moderation', "{{ $t('nav_tooltip.moderation') }}", 'el-icon-finished')
                    +menuitem('notification', "{{ $t('nav_tooltip.notification') }}", 'el-icon-bell')
                    +menuitem('friendsList', "{{ $t('nav_tooltip.friend_list') }}", 'el-icon-s-management')
                    +menuitem('profile', "{{ $t('nav_tooltip.profile') }}", 'el-icon-user')
                    +menuitem('settings', "{{ $t('nav_tooltip.settings') }}", 'el-icon-s-tools')

            //- ### Tabs ##

            //- feed
            include ./mixins/tabs/feed.pug
            +feedTab()

            //- gameLog
            include ./mixins/tabs/gameLog.pug
            +gameLogTab()

            //- playerList
            include ./mixins/tabs/playerList.pug
            +playerListTab()

            //- search
            include ./mixins/tabs/search.pug
            +searchTab()

            //- favorite
            include ./mixins/tabs/favorites.pug
            +favoritesTab()

            //- friendLog
            include ./mixins/tabs/friendLog.pug
            +friendLogTab()

            //- moderation
            include ./mixins/tabs/moderation.pug
            +moderationTab()

            //- notification
            include ./mixins/tabs/notifications.pug
            +notificationsTab()

            //- profile
            include ./mixins/tabs/profile.pug
            +profileTab()

            //- friends list
            include ./mixins/tabs/friendsList.pug
            +friendsListTab()

            //- settings
            include ./mixins/tabs/settings.pug
            +settingsTab()

            //- friends list sidebar
            .x-aside-container(v-show="$refs.menu && $refs.menu.activeIndex !== 'friendsList'" id="aside")
                div(style="display:flex;align-items:baseline")
                    el-select(v-model="quickSearch" clearable :placeholder="$t('side_panel.search_placeholder')" filterable remote :remote-method="quickSearchRemoteMethod" popper-class="x-quick-search" @change="quickSearchChange" @visible-change="quickSearchVisibleChange" style="flex:1;padding:10px")
                        el-option(v-for="item in quickSearchItems" :key="item.value" :value="item.value" :label="item.label")
                            .x-friend-item
                                template(v-if="item.ref")
                                    .detail
                                        span.name(v-text="item.ref.displayName" :style="{'color':item.ref.$userColour}")
                                        span.extra(v-if="item.ref.state === 'offline'") {{ $t('side_panel.search_result_offline') }}
                                        span.extra(v-else-if="item.ref.state === 'active'") {{ $t('side_panel.search_result_active') }}
                                        location.extra(v-else :location="item.ref.location" :traveling="item.ref.travelingToLocation" :link="false")
                                    img.avatar(v-lazy="userImage(item.ref)")
                                span(v-else) {{ $t('side_panel.search_result_more') }} #[span(v-text="item.label" style="font-weight:bold")]
                    el-tooltip(placement="bottom" :content="$t('side_panel.direct_access_tooltip')" :disabled="hideTooltips")
                        el-button(type="default" @click="directAccessPaste" size="mini" icon="el-icon-discover" circle)
                    el-tooltip(placement="bottom" :content="$t('side_panel.refresh_tooltip')" :disabled="hideTooltips")
                        el-button(type="default" @click="refreshFriendsList" :loading="API.isRefreshFriendsLoading" size="mini" icon="el-icon-refresh" circle style="margin-right:10px")
                el-tabs.zero-margin-tabs(stretch="true" style="height:calc(100% - 60px;margin-top:5px")
                    el-tab-pane
                        template(#label)
                            span {{ $t('side_panel.friends') }} ({{ onlineFriendCount }}/{{ friends.size }})
                        .x-friend-list(style="padding:10px 5px")
                            .x-friend-group.x-link(@click="isFriendsGroupMe = !isFriendsGroupMe" style="padding:0px 0px 5px")
                                i.el-icon-arrow-right(:class="{ rotate: isFriendsGroupMe }")
                                span(style="margin-left:5px") {{ $t('side_panel.me') }}
                            div(v-show="isFriendsGroupMe")
                                .x-friend-item(:key="API.currentUser.id" @click="showUserDialog(API.currentUser.id)")
                                    .avatar(:class="userStatusClass(API.currentUser)")
                                        img(v-lazy="userImage(API.currentUser)")
                                    .detail
                                        span.name(v-text="API.currentUser.displayName" :style="{'color':API.currentUser.$userColour}")
                                        location.extra(v-if="isGameRunning" :location="lastLocation.location" :traveling="lastLocationDestination" :link="false")
                                        location.extra(v-else-if="isRealInstance(API.currentUser.$locationTag) || isRealInstance(API.currentUser.$travelingToLocation)" :location="API.currentUser.$locationTag" :traveling="API.currentUser.$travelingToLocation" :link="false")
                                        span.extra(v-else v-text="API.currentUser.statusDescription")
                            .x-friend-group.x-link(@click="isFriendsGroup0 = !isFriendsGroup0" v-show="friendsGroup0.length")
                                i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup0 }")
                                span(style="margin-left:5px") {{ $t('side_panel.favorite') }} &horbar; {{ friendsGroup0.length }}
                            div(v-show="isFriendsGroup0")
                                .x-friend-item(v-for="friend in friendsGroup0" :key="friend.id" @click="showUserDialog(friend.id)")
                                    template(v-if="friend.ref")
                                        .avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
                                            img(v-lazy="userImage(friend.ref)")
                                        .detail
                                            span.name(v-if="!hideUserMemos && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
                                            span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                            span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
                                            location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
                                    template(v-else)
                                        span(v-text="friend.name || friend.id")
                                        el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
                            .x-friend-group.x-link(@click="isFriendsGroup1 = !isFriendsGroup1" v-show="friendsGroup1.length")
                                i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup1 }")
                                span(style="margin-left:5px") {{ $t('side_panel.online') }} &horbar; {{ friendsGroup1.length }}
                            div(v-show="isFriendsGroup1")
                                .x-friend-item(v-for="friend in friendsGroup1" :key="friend.id" @click="showUserDialog(friend.id)")
                                    template(v-if="friend.ref")
                                        .avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
                                            img(v-lazy="userImage(friend.ref)")
                                        .detail
                                            span.name(v-if="!hideUserMemos && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
                                            span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                            span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
                                            location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
                                    template(v-else)
                                        span(v-text="friend.name || friend.id")
                                        el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
                            .x-friend-group.x-link(@click="isFriendsGroup2 = !isFriendsGroup2" v-show="friendsGroup2.length")
                                i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup2 }")
                                span(style="margin-left:5px") {{ $t('side_panel.active') }} &horbar; {{ friendsGroup2.length }}
                            div(v-show="isFriendsGroup2")
                                .x-friend-item(v-for="friend in friendsGroup2" :key="friend.id" @click="showUserDialog(friend.id)")
                                    template(v-if="friend.ref")
                                        .avatar
                                            img(v-lazy="userImage(friend.ref)")
                                        .detail
                                            span.name(v-if="!hideUserMemos && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
                                            span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                            span.extra(v-text="friend.ref.statusDescription" :link="false")
                                    template(v-else)
                                        span(v-text="friend.name || friend.id")
                                        el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
                            .x-friend-group.x-link(@click="isFriendsGroup3 = !isFriendsGroup3" v-show="friendsGroup3.length")
                                i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup3 }")
                                span(style="margin-left:5px") {{ $t('side_panel.offline') }} &horbar; {{ friendsGroup3.length }}
                            div(v-show="isFriendsGroup3")
                                .x-friend-item(v-for="friend in friendsGroup3" :key="friend.id" @click="showUserDialog(friend.id)")
                                    template(v-if="friend.ref")
                                        .avatar
                                            img(v-lazy="userImage(friend.ref)")
                                        .detail
                                            span.name(v-if="!hideUserMemos && friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
                                            span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
                                            span.extra(v-text="friend.ref.statusDescription")
                                    template(v-else)
                                        span(v-text="friend.name || friend.id")
                                        el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
                    el-tab-pane
                        template(#label)
                            span {{ $t('side_panel.groups') }} ({{ groupInstances.length }})
                        .x-friend-list(style="padding:10px 5px")
                            .x-friend-item(v-for="instance in groupInstances" :key="instance.id" @click="showGroupDialog(instance.ownerId)")
                                .avatar
                                    img(v-lazy="instance.$group.iconUrl")
                                .detail
                                    span.name
                                        span(v-text="instance.$group.name")
                                        span(style="font-weight:normal;margin-left:5px") ({{ instance.userCount }}/{{ instance.capacity }})
                                    location.extra(:location="instance.location" :link="false")


            //- ## Dialogs ## -\\

            //- dialog: user
            el-dialog.x-dialog.x-user-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="userDialog" :visible.sync="userDialog.visible" :show-close="false" width="770px")
                div(v-loading="userDialog.loading")
                    div(style="display:flex")
                        el-popover(v-if="userDialog.ref.profilePicOverride" placement="right" width="500px" trigger="click")
                            img.x-link(slot="reference" v-lazy="userDialog.ref.profilePicOverride" style="flex:none;height:120px;width:213.33px;border-radius:4px;object-fit:cover")
                            img.x-link(v-lazy="userDialog.ref.profilePicOverride" style="height:400px" @click="downloadAndSaveImage(userDialog.ref.profilePicOverride)")
                        el-popover(v-else placement="right" width="500px" trigger="click")
                            img.x-link(slot="reference" v-lazy="userDialog.ref.currentAvatarThumbnailImageUrl" style="flex:none;height:120px;width:160px;border-radius:4px;object-fit:cover")
                            img.x-link(v-lazy="userDialog.ref.currentAvatarImageUrl" style="height:500px" @click="downloadAndSaveImage(userDialog.ref.currentAvatarImageUrl)")
                        div(style="flex:1;display:flex;align-items:center;margin-left:15px")
                            div(style="flex:1")
                                div
                                    el-tooltip(v-if="userDialog.ref.status" placement="top")
                                        template(#content)
                                            span(v-if="userDialog.ref.state === 'active'") {{ $t('dialog.user.status.active') }}
                                            span(v-else-if="userDialog.ref.state === 'offline'") {{ $t('dialog.user.status.offline') }}
                                            span(v-else-if="userDialog.ref.status === 'active'") {{ $t('dialog.user.status.online') }}
                                            span(v-else-if="userDialog.ref.status === 'join me'") {{ $t('dialog.user.status.join_me') }}
                                            span(v-else-if="userDialog.ref.status === 'ask me'") {{ $t('dialog.user.status.ask_me') }}
                                            span(v-else-if="userDialog.ref.status === 'busy'") {{ $t('dialog.user.status.busy') }}
                                            span(v-else) {{ $t('dialog.user.status.offline') }}
                                        i.x-user-status(:class="userStatusClass(userDialog.ref)")
                                    template(v-if="userDialog.previousDisplayNames.length > 0")
                                        el-tooltip(placement="bottom")
                                            template(#content)
                                                span {{ $t('dialog.user.previous_display_names') }}
                                                div(v-for="displayName in userDialog.previousDisplayNames" placement="top")
                                                    span(v-text="displayName")
                                            i.el-icon-caret-bottom
                                    span.dialog-title(v-text="userDialog.ref.displayName" style="margin-left:5px;margin-right:5px")
                                    template(v-if="userDialog.ref.id === API.currentUser.id")
                                        el-popover(placement="top" trigger="click")
                                            span(slot="reference" v-text="API.currentUser.username" style="margin-right:5px;color:#909399;font-family:monospace;font-size:12px;cursor:pointer")
                                            span(style="display:block;text-align:center;font-family:monospace") {{ API.currentUser.username | textToHex }}
                                    el-tooltip(v-for="item in userDialog.ref.$languages" :key="item.key" placement="top")
                                        template(#content)
                                            span {{ item.value }} ({{ item.key }})
                                        span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
                                div
                                    el-tag.name(type="info" effect="plain" size="mini" :class="userDialog.ref.$trustClass" v-text="userDialog.ref.$trustLevel" style="margin-right:5px;margin-top:5px")
                                    el-tag.x-tag-friend(v-if="userDialog.isFriend && userDialog.friend" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.user.tags.friend_no', { number: userDialog.friend.no }) }}
                                    el-tag.x-tag-troll(v-if="userDialog.ref.$isTroll" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") Nuisance
                                    el-tag.x-tag-troll(v-if="userDialog.ref.$isProbableTroll" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") Almost Nuisance
                                    el-tag.x-tag-vip(v-if="userDialog.ref.$isModerator" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px")  {{ $t('dialog.user.tags.vrchat_team') }}
                                    el-tag.x-tag-vrcplus(v-if="userDialog.ref.$isVRCPlus" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") VRC+
                                    el-tag.x-tag-platform-pc(v-if="userDialog.ref.last_platform === 'standalonewindows'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") PC
                                    el-tag.x-tag-platform-quest(v-else-if="userDialog.ref.last_platform === 'android'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") Quest
                                    el-tag.x-tag-platform-ios(v-else-if="userDialog.ref.last_platform === 'ios'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") iOS
                                    el-tag.x-tag-platform-other(v-else-if="userDialog.ref.last_platform" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ userDialog.ref.last_platform }}
                                    el-tag.name(v-if="userDialog.ref.$customTag" type="info" effect="plain" size="mini" v-text="userDialog.ref.$customTag" :style="{'color':userDialog.ref.$customTagColour, 'border-color':userDialog.ref.$customTagColour}" style="margin-right:5px;margin-top:5px")
                                div(style="margin-top:5px")
                                    span(v-text="userDialog.ref.statusDescription" style="font-size:12px")
                            div(v-if="userDialog.ref.userIcon" style="flex:none;margin-right:10px")
                                el-popover(placement="right" width="500px" trigger="click")
                                    img.x-link(slot="reference" v-lazy="userDialog.ref.userIcon" style="flex:none;width:120px;height:120px;border-radius:4px;object-fit:cover")
                                    img.x-link(v-lazy="userDialog.ref.userIcon" style="height:500px" @click="downloadAndSaveImage(userDialog.ref.userIcon)")
                            div(style="flex:none")
                                template(v-if="(API.currentUser.id !== userDialog.ref.id && userDialog.isFriend) || userDialog.isFavorite")
                                    el-tooltip(v-if="userDialog.isFavorite" placement="top" :content="$t('dialog.user.actions.unfavorite_tooltip')" :disabled="hideTooltips")
                                        el-button(@click="userDialogCommand('Delete Favorite')" type="warning" icon="el-icon-star-on" circle)
                                    el-tooltip(v-else placement="top" :content="$t('dialog.user.actions.favorite_tooltip')" :disabled="hideTooltips")
                                        el-button(type="default" @click="userDialogCommand('Add Favorite')" icon="el-icon-star-off" circle)
                                el-dropdown(trigger="click" @command="userDialogCommand" size="small")
                                    el-button(:type="(userDialog.incomingRequest || userDialog.outgoingRequest) ? 'success' : (userDialog.isBlock || userDialog.isMute) ? 'danger' : 'default'" icon="el-icon-more" circle style="margin-left:5px")
                                    el-dropdown-menu(#default="dropdown")
                                        el-dropdown-item(icon="el-icon-refresh" command="Refresh") {{ $t('dialog.user.actions.refresh') }}
                                        el-dropdown-item(icon="el-icon-s-order" command="Copy User") {{ $t('dialog.user.actions.copy_url') }}
                                        template(v-if="userDialog.ref.id === API.currentUser.id")
                                            el-dropdown-item(icon="el-icon-picture-outline" command="Manage Gallery" divided) {{ $t('dialog.user.actions.manage_gallery_icon') }}
                                            el-dropdown-item(icon="el-icon-s-custom" command="Show Avatar Author") {{ $t('dialog.user.actions.show_avatar_author') }}
                                            el-dropdown-item(icon="el-icon-s-custom" command="Show Fallback Avatar Details") {{ $t('dialog.user.actions.show_fallback_avatar') }}
                                            el-dropdown-item(icon="el-icon-edit" command="Edit Social Status" divided) {{ $t('dialog.user.actions.edit_status') }}
                                            el-dropdown-item(icon="el-icon-edit" command="Edit Language") {{ $t('dialog.user.actions.edit_language') }}
                                            el-dropdown-item(icon="el-icon-edit" command="Edit Bio") {{ $t('dialog.user.actions.edit_bio') }}
                                            el-dropdown-item(icon="el-icon-switch-button" command="Logout" divided) {{ $t('dialog.user.actions.logout') }}
                                        template(v-else)
                                            template(v-if="userDialog.isFriend")
                                                el-dropdown-item(icon="el-icon-postcard" command="Request Invite" divided) {{ $t('dialog.user.actions.request_invite') }}
                                                el-dropdown-item(icon="el-icon-postcard" command="Request Invite Message") {{ $t('dialog.user.actions.request_invite_with_message') }}
                                                template(v-if="lastLocation.location && isGameRunning && checkCanInvite(lastLocation.location)")
                                                    el-dropdown-item(icon="el-icon-message" command="Invite") {{ $t('dialog.user.actions.invite') }}
                                                    el-dropdown-item(icon="el-icon-message" command="Invite Message") {{ $t('dialog.user.actions.invite_with_message') }}
                                            template(v-else-if="userDialog.incomingRequest")
                                                el-dropdown-item(icon="el-icon-check" command="Accept Friend Request") {{ $t('dialog.user.actions.accept_friend_request') }}
                                                el-dropdown-item(icon="el-icon-close" command="Decline Friend Request") {{ $t('dialog.user.actions.decline_friend_request') }}
                                            el-dropdown-item(v-else-if="userDialog.outgoingRequest" icon="el-icon-close" command="Cancel Friend Request") {{ $t('dialog.user.actions.cancel_friend_request') }}
                                            el-dropdown-item(v-else icon="el-icon-plus" command="Send Friend Request") {{ $t('dialog.user.actions.send_friend_request') }}
                                            el-dropdown-item(icon="el-icon-message" command="Invite To Group") {{ $t('dialog.user.actions.invite_to_group') }}
                                            el-dropdown-item(icon="el-icon-s-custom" command="Show Avatar Author" divided) {{ $t('dialog.user.actions.show_avatar_author') }}
                                            el-dropdown-item(icon="el-icon-s-custom" command="Show Fallback Avatar Details") {{ $t('dialog.user.actions.show_fallback_avatar') }}
                                            el-dropdown-item(icon="el-icon-tickets" command="Previous Instances") {{ $t('dialog.user.actions.show_previous_instances') }}
                                            el-dropdown-item(v-if="userDialog.ref.currentAvatarImageUrl" icon="el-icon-picture-outline" command="Previous Images") {{ $t('dialog.user.actions.show_previous_images') }}
                                            el-dropdown-item(v-if="userDialog.isBlock" icon="el-icon-circle-check" command="Unblock" divided style="color:#F56C6C") {{ $t('dialog.user.actions.moderation_unblock') }}
                                            el-dropdown-item(v-else icon="el-icon-circle-close" command="Block" divided :disabled="userDialog.ref.$isModerator") {{ $t('dialog.user.actions.moderation_block') }}
                                            el-dropdown-item(v-if="userDialog.isMute" icon="el-icon-microphone" command="Unmute" style="color:#F56C6C") {{ $t('dialog.user.actions.moderation_unmute') }}
                                            el-dropdown-item(v-else icon="el-icon-turn-off-microphone" command="Mute" :disabled="userDialog.ref.$isModerator") {{ $t('dialog.user.actions.moderation_mute') }}
                                            el-dropdown-item(icon="el-icon-user-solid" command="Show Avatar")
                                                i.el-icon-check.el-icon--left(v-if="userDialog.isShowAvatar")
                                                span {{ $t('dialog.user.actions.moderation_show_avatar') }}
                                            el-dropdown-item(icon="el-icon-user" command="Hide Avatar")
                                                i.el-icon-check.el-icon--left(v-if="userDialog.isHideAvatar")
                                                span {{ $t('dialog.user.actions.moderation_hide_avatar') }}
                                            el-dropdown-item(v-if="userDialog.isInteractOff" icon="el-icon-thumb" command="Enable Avatar Interaction" style="color:#F56C6C") {{ $t('dialog.user.actions.moderation_enable_avatar_interaction') }}
                                            el-dropdown-item(v-else icon="el-icon-circle-close" command="Disable Avatar Interaction") {{ $t('dialog.user.actions.moderation_disable_avatar_interaction') }}
                                            el-dropdown-item(icon="el-icon-s-flag" command="Report Hacking" :disabled="userDialog.ref.$isModerator") {{ $t('dialog.user.actions.report_hacking') }}
                                            template(v-if="userDialog.isFriend")
                                                el-dropdown-item(icon="el-icon-delete" command="Unfriend" divided style="color:#F56C6C") {{ $t('dialog.user.actions.unfriend') }}
                    el-tabs(ref="userDialogTabs" @tab-click="userDialogTabClick")
                        el-tab-pane(:label="$t('dialog.user.info.header')")
                            template(v-if="isFriendOnline(userDialog.friend) || API.currentUser.id === userDialog.id")
                                div(v-if="userDialog.ref.location" style="display:flex;flex-direction:column;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #e4e7ed14")
                                    div(style="flex:none")
                                        location(:location="userDialog.ref.location" :traveling="userDialog.ref.travelingToLocation")
                                        template(v-if="isRealInstance(userDialog.$location.tag)")
                                            el-tooltip(placement="top" :content="$t('dialog.user.info.launch_invite_tooltip')" :disabled="hideTooltips")
                                                launch(:location="userDialog.$location.tag" style="margin-left:5px")
                                            el-tooltip(placement="top" :content="$t('dialog.user.info.self_invite_tooltip')" :disabled="hideTooltips")
                                                invite-yourself(:location="userDialog.$location.tag" :shortname="userDialog.$location.shortName" style="margin-left:5px" :disabled="typeof userDialog.instance.json.canRequestInvite !== 'undefined' && !userDialog.instance.json.canRequestInvite")
                                            el-tooltip(placement="top" :content="$t('dialog.user.info.refresh_user_count_tooltip')" :disabled="hideTooltips")
                                                el-button(v-if="userDialog.$location.tag !== lastLocation.location" @click="refreshInstancePlayerCount(userDialog.$location.tag)" size="mini" icon="el-icon-refresh" style="margin-left:5px" circle)
                                            span(v-if="userDialog.instance.occupants" style="margin-left:5px") {{ userDialog.instance.occupants }}  #[template(v-if="userDialog.instance.friendCount > 0") ({{ userDialog.instance.friendCount }})]
                                            span(v-if="userDialog.instance.full" style="margin-left:5px;color:lightcoral") {{ $t('dialog.user.info.instance_full') }}
                                    .x-friend-list(style="flex:1;margin-top:10px;max-height:150px")
                                        .x-friend-item(v-if="userDialog.$location.userId" @click="showUserDialog(userDialog.$location.userId)" class="x-friend-item-border")
                                            template(v-if="userDialog.$location.user")
                                                .avatar(:class="userStatusClass(userDialog.$location.user)")
                                                    img(v-lazy="userImage(userDialog.$location.user)")
                                                .detail
                                                    span.name(v-text="userDialog.$location.user.displayName" :style="{'color':userDialog.$location.user.$userColour}")
                                                    span.extra {{ $t('dialog.user.info.instance_creator') }}
                                            span(v-else v-text="userDialog.$location.userId")
                                        .x-friend-item(v-for="user in userDialog.users" :key="user.id" @click="showUserDialog(user.id)" class="x-friend-item-border")
                                            .avatar(:class="userStatusClass(user)")
                                                img(v-lazy="userImage(user)")
                                            .detail
                                                span.name(v-text="user.displayName" :style="{'color':user.$userColour}")
                                                span.extra(v-if="user.location === 'traveling'")
                                                    i.el-icon-loading(style="margin-right:5px")
                                                    timer(:epoch="user.$travelingToTime")
                                                span.extra(v-else)
                                                    timer(:epoch="user.$location_at")
                            .x-friend-list(style="max-height:none")
                                .x-friend-item(v-if="!hideUserNotes" style="width:100%;cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.user.info.note') }}
                                        el-input(v-model="userDialog.note" type="textarea" maxlength="256" show-word-limit :rows="2" :autosize="{ minRows: 1, maxRows: 20 }" @change="checkNote(userDialog.ref, userDialog.note)" @input="cleanNote(userDialog.note)" :placeholder="$t('dialog.user.info.note_placeholder')" size="mini" resize="none")
                                        div(style="float:right")
                                            i.el-icon-loading(v-if="userDialog.noteSaving" style="margin-left:5px")
                                            i.el-icon-more-outline(v-else-if="userDialog.note !== userDialog.ref.note" style="margin-left:5px")
                                            el-button(v-if="userDialog.note" type="text" icon="el-icon-delete" size="mini" @click="deleteNote(userDialog.id)" style="margin-left:5px")
                                .x-friend-item(v-if="!hideUserMemos" style="width:100%;cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.user.info.memo') }}
                                        el-input.extra(v-model="userDialog.memo" type="textarea" :rows="2" :autosize="{ minRows: 1, maxRows: 20 }" :placeholder="$t('dialog.user.info.memo_placeholder')" size="mini" resize="none")
                                .x-friend-item(style="width:100%;cursor:default")
                                    .detail
                                        span.name(v-if="userDialog.id !== API.currentUser.id && userDialog.ref.profilePicOverride && userDialog.ref.currentAvatarImageUrl") {{ $t('dialog.user.info.avatar_info_last_seen') }}
                                        span.name(v-else) {{ $t('dialog.user.info.avatar_info') }}
                                        .extra
                                            avatar-info(:imageurl="userDialog.ref.currentAvatarImageUrl" :userid="userDialog.id")
                                .x-friend-item(style="width:100%;cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.user.info.represented_group') }}
                                        .extra(v-if="userDialog.representedGroup.isRepresenting")
                                            div(style="display:inline-block;flex:none;margin-right:5px")
                                                el-popover(placement="right" width="500px" trigger="click")
                                                    img.x-link(slot="reference" v-lazy="userDialog.representedGroup.iconUrl" style="flex:none;width:60px;height:60px;border-radius:4px;object-fit:cover")
                                                    img.x-link(v-lazy="userDialog.representedGroup.iconUrl" style="height:500px" @click="downloadAndSaveImage(userDialog.representedGroup.iconUrl)")
                                            span(style="vertical-align:top;cursor:pointer" @click="showGroupDialog(userDialog.representedGroup.groupId)")
                                                span(v-if="userDialog.representedGroup.ownerId === userDialog.id" style="margin-right:5px") 👑
                                                span(v-text="userDialog.representedGroup.name" style="margin-right:5px")
                                                span ({{ userDialog.representedGroup.memberCount }})
                                        .extra(v-else) -
                                .x-friend-item(style="width:100%;cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.user.info.bio') }}
                                        pre.extra(style="font-family:inherit;font-size:12px;white-space:pre-wrap;margin:0 0.5em 0 0") {{ userDialog.ref.bio || '-' }}
                                        div(v-if="userDialog.id === API.currentUser.id" style="float:right")
                                            el-button(type="text" icon="el-icon-edit" size="mini" @click="showBioDialog" style="margin-left:5px")
                                        div(style="margin-top:5px")
                                            el-tooltip(v-if="link" v-for="(link, index) in userDialog.ref.bioLinks" :key="index")
                                                template(#content)
                                                    span(v-text="link")
                                                img(:src="getFaviconUrl(link)" style="width:16px;height:16px;vertical-align:middle;margin-right:5px;cursor:pointer" @click.stop="openExternalLink(link)")
                                template(v-if="API.currentUser.id !== userDialog.id")
                                    .x-friend-item(style="cursor:default")
                                        .detail
                                            span.name {{ $t('dialog.user.info.last_seen') }}
                                                el-tooltip(v-if="!hideTooltips" placement="top" style="margin-left:5px" :content="$t('dialog.user.info.accuracy_notice')")
                                                    i.el-icon-warning
                                            span.extra {{ userDialog.lastSeen | formatDate('long') }}
                                    .x-friend-item(@click="showPreviousInstancesUserDialog(userDialog.ref)")
                                        .detail
                                            span.name {{ $t('dialog.user.info.join_count') }}
                                                el-tooltip(v-if="!hideTooltips" placement="top" style="margin-left:5px" :content="$t('dialog.user.info.accuracy_notice')")
                                                    i.el-icon-warning
                                            span.extra(v-if="userDialog.joinCount === 0") -
                                            span.extra(v-else v-text="userDialog.joinCount")
                                    .x-friend-item(style="cursor:default")
                                        .detail
                                            span.name {{ $t('dialog.user.info.time_together') }}
                                                el-tooltip(v-if="!hideTooltips" placement="top" style="margin-left:5px" :content="$t('dialog.user.info.accuracy_notice')")
                                                    i.el-icon-warning
                                            span.extra(v-if="userDialog.timeSpent === 0") -
                                            span.extra(v-else) {{ userDialog.timeSpent | timeToText }}
                                .x-friend-item(style="cursor:default")
                                    el-tooltip(placement="top")
                                        template(#content)
                                            span {{ userOnlineForTimestamp(userDialog) | formatDate('short') }}
                                        .detail
                                            span.name(v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for") {{ $t('dialog.user.info.online_for') }}
                                                el-tooltip(v-if="!hideTooltips" placement="top" style="margin-left:5px" :content="$t('dialog.user.info.accuracy_notice')")
                                                    i.el-icon-warning
                                            span.name(v-else) {{ $t('dialog.user.info.offline_for') }}
                                                el-tooltip(v-if="!hideTooltips" placement="top" style="margin-left:5px" :content="$t('dialog.user.info.accuracy_notice')")
                                                    i.el-icon-warning
                                            span.extra {{ userOnlineFor(userDialog) | timeToText }}
                                .x-friend-item(style="cursor:default")
                                    el-tooltip(placement="top")
                                        template(#content)
                                            span {{ $t('dialog.user.info.last_login') }} {{ userDialog.ref.last_login | formatDate('short') }}
                                        .detail
                                            span.name {{ $t('dialog.user.info.last_activity') }}
                                            span.extra {{ userDialog.ref.last_activity | formatDate('long') }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.user.info.date_joined') }}
                                        span.extra(v-text="userDialog.ref.date_joined")
                                .x-friend-item(v-if="API.currentUser.id !== userDialog.id" style="cursor:default")
                                    .detail
                                        span.name(v-if="userDialog.unFriended") {{ $t('dialog.user.info.unfriended') }}
                                            el-tooltip(v-if="!hideTooltips" placement="top" style="margin-left:5px" :content="$t('dialog.user.info.accuracy_notice')")
                                                i.el-icon-warning
                                        span.name(v-else) {{ $t('dialog.user.info.friended') }}
                                            el-tooltip(v-if="!hideTooltips" placement="top" style="margin-left:5px" :content="$t('dialog.user.info.accuracy_notice')")
                                                i.el-icon-warning
                                        span.extra {{ userDialog.dateFriended | formatDate('long') }}
                                template(v-if="API.currentUser.id === userDialog.id")
                                    .x-friend-item(@click="toggleAvatarCopying")
                                        .detail
                                            span.name {{ $t('dialog.user.info.avatar_cloning') }}
                                            span.extra(v-if="userDialog.ref.allowAvatarCopying" style="color:#67C23A") {{ $t('dialog.user.info.avatar_cloning_allow') }}
                                            span.extra(v-else style="color:#F56C6C") {{ $t('dialog.user.info.avatar_cloning_deny') }}
                                template(v-else)
                                    .x-friend-item(style="cursor:default")
                                        .detail
                                            span.name {{ $t('dialog.user.info.avatar_cloning') }}
                                            span.extra(v-if="userDialog.ref.allowAvatarCopying" style="color:#67C23A") {{ $t('dialog.user.info.avatar_cloning_allow') }}
                                            span.extra(v-else style="color:#F56C6C") {{ $t('dialog.user.info.avatar_cloning_deny') }}
                                .x-friend-item(v-if="userDialog.ref.id === API.currentUser.id && API.currentUser.homeLocation" @click="showWorldDialog(API.currentUser.homeLocation)" style="width:100%")
                                    .detail
                                        span.name {{ $t('dialog.user.info.home_location') }}
                                        span.extra
                                            span(v-text="userDialog.$homeLocationName")
                                            el-button(@click.stop="resetHome()" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
                        el-tab-pane(:label="$t('dialog.user.groups.header')")
                            el-button(type="default" :loading="userDialog.isGroupsLoading" @click="getUserGroups(userDialog.id)" size="mini" icon="el-icon-refresh" circle)
                            span(style="margin-left:5px") {{ $t('dialog.user.groups.total_count', { count: userGroups.groups.length }) }}
                            div(v-loading="userDialog.isGroupsLoading" style="margin-top:10px")
                                template(v-if="userGroups.ownGroups.length > 0")
                                    span(style="font-weight:bold;font-size:16px") {{ $t('dialog.user.groups.own_groups') }}
                                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.ownGroups.length }}
                                    .x-friend-list(style="margin-top:10px;margin-bottom:15px;min-height:60px")
                                        .x-friend-item(v-for="group in userGroups.ownGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border")
                                            .avatar
                                                img(v-lazy="group.iconUrl")
                                            .detail
                                                span.name(v-text="group.name")
                                                span.extra ({{ group.memberCount }})
                                template(v-if="userGroups.mutualGroups.length > 0")
                                    span(style="font-weight:bold;font-size:16px") {{ $t('dialog.user.groups.mutual_groups') }}
                                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.mutualGroups.length }}
                                    .x-friend-list(style="margin-top:10px;margin-bottom:15px;min-height:60px")
                                        .x-friend-item(v-for="group in userGroups.mutualGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border")
                                            .avatar
                                                img(v-lazy="group.iconUrl")
                                            .detail
                                                span.name(v-text="group.name")
                                                span.extra ({{ group.memberCount }})
                                template(v-if="userGroups.remainingGroups.length > 0")
                                    span(style="font-weight:bold;font-size:16px") {{ $t('dialog.user.groups.groups') }}
                                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.remainingGroups.length }}
                                    .x-friend-list(style="margin-top:10px;margin-bottom:15px;min-height:60px")
                                        .x-friend-item(v-for="group in userGroups.remainingGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border")
                                            .avatar
                                                img(v-lazy="group.iconUrl")
                                            .detail
                                                span.name(v-text="group.name")
                                                span.extra ({{ group.memberCount }})
                        el-tab-pane(:label="$t('dialog.user.worlds.header')")
                            el-button(type="default" :loading="userDialog.isWorldsLoading" @click="refreshUserDialogWorlds()" size="mini" icon="el-icon-refresh" circle)
                            span(style="margin-left:5px") {{ $t('dialog.user.worlds.total_count', { count: userDialog.worlds.length }) }}
                            el-radio-group(v-model="userDialog.worldSorting" size="mini" style="margin-left:30px" @change="changeUserDialogWorldSorting")
                                el-radio(label="name") {{ $t('dialog.user.worlds.sort_by_name') }}
                                el-radio(label="update") {{ $t('dialog.user.worlds.sort_by_update') }}
                            .x-friend-list(v-loading="userDialog.isWorldsLoading" style="margin-top:10px;min-height:60px")
                                .x-friend-item(v-for="world in userDialog.worlds" :key="world.id" @click="showWorldDialog(world.id)" class="x-friend-item-border")
                                    .avatar
                                        img(v-lazy="world.thumbnailImageUrl")
                                    .detail
                                        span.name(v-text="world.name")
                                        span.extra(v-if="world.occupants") ({{ world.occupants }})
                        el-tab-pane(:label="$t('dialog.user.favorite_worlds.header')")
                            el-button(type="default" :loading="userDialog.isFavoriteWorldsLoading" @click="getUserFavoriteWorlds(userDialog.id)" size="mini" icon="el-icon-refresh" circle)
                            el-tabs.zero-margin-tabs(type="card" ref="favoriteWorlds" v-loading="userDialog.isFavoriteWorldsLoading" style="margin-top:10px")
                                template(v-for="(list, index) in userFavoriteWorlds" v-if="list")
                                    el-tab-pane
                                        span(slot="label")
                                            span(v-text="list[0]" style="font-weight:bold;font-size:16px")
                                            i.x-user-status(style="margin-left:5px" :class="userFavoriteWorldsStatus(list[1])")
                                            span(style="color:#909399;font-size:12px;margin-left:5px") {{ list[2].length }}/{{ API.favoriteLimits.maxFavoritesPerGroup.world }}
                                        .x-friend-list(style="margin-top:10px;margin-bottom:15px;min-height:60px")
                                            .x-friend-item(v-for="world in list[2]" :key="world.id" @click="showWorldDialog(world.id)" class="x-friend-item-border")
                                                .avatar
                                                    img(v-lazy="world.thumbnailImageUrl")
                                                .detail
                                                    span.name(v-text="world.name")
                                                    span.extra(v-if="world.occupants") ({{ world.occupants }})
                        el-tab-pane(:label="$t('dialog.user.avatars.header')")
                            template(v-if="userDialog.ref.id === API.currentUser.id")
                                el-button(type="default" :loading="userDialog.isAvatarsLoading" @click="refreshUserDialogAvatars()" size="mini" icon="el-icon-refresh" circle)
                            span(style="margin-left:5px") {{ $t('dialog.user.avatars.total_count', { count: userDialogAvatars.length }) }}
                            el-radio-group(v-if="userDialog.ref.id === API.currentUser.id" v-model="userDialog.avatarSorting" size="mini" style="margin-left:30px;margin-right:30px" @change="changeUserDialogAvatarSorting")
                                el-radio(label="name") {{ $t('dialog.user.avatars.sort_by_name') }}
                                el-radio(label="update") {{ $t('dialog.user.avatars.sort_by_update') }}
                            el-radio-group(v-if="userDialog.ref.id === API.currentUser.id" v-model="userDialog.avatarReleaseStatus" size="mini" style="margin-left:30px")
                                el-radio(label="all") {{ $t('dialog.user.avatars.all') }}
                                el-radio(label="public") {{ $t('dialog.user.avatars.public') }}
                                el-radio(label="private") {{ $t('dialog.user.avatars.private') }}
                            .x-friend-list(style="margin-top:10px;min-height:60px")
                                .x-friend-item(v-for="avatar in userDialogAvatars" @click="showAvatarDialog(avatar.id)" class="x-friend-item-border")
                                    .avatar
                                        img(v-if="avatar.thumbnailImageUrl" v-lazy="avatar.thumbnailImageUrl")
                                    .detail
                                        span.name(v-text="avatar.name")
                                        span.extra(v-text="avatar.releaseStatus" v-if="avatar.releaseStatus === 'public'" style="color: #67c23a;")
                                        span.extra(v-text="avatar.releaseStatus" v-else-if="avatar.releaseStatus === 'private'" style="color: #f56c6c;")
                                        span.extra(v-text="avatar.releaseStatus" v-else)
                        el-tab-pane(:label="$t('dialog.user.json.header')")
                            el-button(type="default" @click="refreshUserDialogTreeData()" size="mini" icon="el-icon-refresh" circle)
                            el-button(type="default" @click="downloadAndSaveJson(userDialog.id, userDialog.ref)" size="mini" icon="el-icon-download" circle style="margin-left:5px")
                            el-tree(:data="userDialog.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")

            //- dialog: world
            el-dialog.x-dialog.x-world-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="worldDialog" :visible.sync="worldDialog.visible" :show-close="false" width="770px")
                div(v-loading="worldDialog.loading")
                    div(style="display:flex")
                        el-popover(placement="right" width="500px" trigger="click")
                            img.x-link(slot="reference" v-lazy="worldDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:4px")
                            img.x-link(v-lazy="worldDialog.ref.imageUrl" style="width:500px;height:375px" @click="downloadAndSaveImage(worldDialog.ref.imageUrl)")
                        div(style="flex:1;display:flex;align-items:center;margin-left:15px")
                            div(style="flex:1")
                                div
                                    i.el-icon-s-home(v-show="API.currentUser.$homeLocation && API.currentUser.$homeLocation.worldId === worldDialog.id" style="margin-right:5px")
                                    span.dialog-title(v-text="worldDialog.ref.name")
                                div(style="margin-top:5px")
                                    span.x-link(v-text="worldDialog.ref.authorName" @click="showUserDialog(worldDialog.ref.authorId)" style="color:#909399;font-family:monospace")
                                div
                                    el-tag(v-if="worldDialog.ref.$isLabs" type="primary" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.world.tags.labs') }}
                                    el-tag(v-else-if="worldDialog.ref.releaseStatus === 'public'" type="success" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.world.tags.public') }}
                                    el-tag(v-else type="danger" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.world.tags.private') }}
                                    el-tag.x-tag-platform-pc(v-if="worldDialog.isPC" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") PC
                                    el-tag.x-tag-platform-quest(v-if="worldDialog.isQuest" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") Quest
                                    el-tag.x-tag-platform-ios(v-if="worldDialog.isIos" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") iOS
                                    el-tag(type="info" effect="plain" size="mini" v-text="worldDialog.fileSize" style="margin-right:5px;margin-top:5px")
                                    el-tag(v-if="worldDialog.inCache" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px")
                                        span(v-text="worldDialog.cacheSize")
                                        |  {{ $t('dialog.world.tags.cache')}}
                                div(style="margin-top:5px")
                                    span(v-show="worldDialog.ref.name !== worldDialog.ref.description" v-text="worldDialog.ref.description" style="font-size:12px")
                            div(style="flex:none;margin-left:10px")
                                el-tooltip(v-if="worldDialog.inCache" placement="top" :content="$t('dialog.world.actions.delete_cache_tooltip')" :disabled="hideTooltips")
                                    el-button(icon="el-icon-delete" circle @click="deleteVRChatCache(worldDialog.ref)" :disabled="isGameRunning && worldDialog.cacheLocked")
                                el-tooltip(v-if="worldDialog.isFavorite" placement="top" :content="$t('dialog.world.actions.favorites_tooltip')" :disabled="hideTooltips")
                                    el-button(type="default" icon="el-icon-star-on" circle @click="worldDialogCommand('Add Favorite')" style="margin-left:5px")
                                el-tooltip(v-else placement="top" :content="$t('dialog.world.actions.favorites_tooltip')" :disabled="hideTooltips")
                                    el-button(type="default" icon="el-icon-star-off" circle @click="worldDialogCommand('Add Favorite')" style="margin-left:5px")
                                el-dropdown(trigger="click" @command="worldDialogCommand" size="small" style="margin-left:5px")
                                    el-button(type="default" icon="el-icon-more" circle)
                                    el-dropdown-menu(#default="dropdown")
                                        el-dropdown-item(icon="el-icon-refresh" command="Refresh") {{ $t('dialog.world.actions.refresh') }}
                                        el-dropdown-item(icon="el-icon-s-flag" command="New Instance" divided) {{ $t('dialog.world.actions.new_instance') }}
                                        el-dropdown-item(v-if="API.currentUser.$homeLocation && API.currentUser.$homeLocation.worldId === worldDialog.id" icon="el-icon-magic-stick" command="Reset Home" divided) {{ $t('dialog.world.actions.reset_home') }}
                                        el-dropdown-item(v-else icon="el-icon-s-home" command="Make Home" divided) {{ $t('dialog.world.actions.make_home') }}
                                        el-dropdown-item(icon="el-icon-tickets" command="Previous Instances") {{ $t('dialog.world.actions.show_previous_instances') }}
                                        template(v-if="API.currentUser.id !== worldDialog.ref.authorId")
                                            el-dropdown-item(icon="el-icon-picture-outline" command="Previous Images") {{ $t('dialog.world.actions.show_previous_images') }}
                                        template(v-else)
                                            el-dropdown-item(icon="el-icon-edit" command="Rename") {{ $t('dialog.world.actions.rename') }}
                                            el-dropdown-item(icon="el-icon-edit" command="Change Description") {{ $t('dialog.world.actions.change_description') }}
                                            el-dropdown-item(icon="el-icon-edit" command="Change Capacity") {{ $t('dialog.world.actions.change_capacity') }}
                                            el-dropdown-item(icon="el-icon-edit" command="Change YouTube Preview") {{ $t('dialog.world.actions.change_preview') }}
                                            el-dropdown-item(icon="el-icon-edit" command="Change Tags") {{ $t('dialog.world.actions.change_tags') }}
                                            el-dropdown-item(icon="el-icon-picture-outline" command="Change Image") {{ $t('dialog.world.actions.change_image') }}
                                            el-dropdown-item(v-if="worldDialog.ref.unityPackageUrl" icon="el-icon-download" command="Download Unity Package") {{ $t('dialog.world.actions.download_package') }}
                                            el-dropdown-item(v-if="worldDialog.ref.tags.includes('system_approved') || worldDialog.ref.tags.includes('system_labs')" icon="el-icon-view" command="Unpublish" divided) {{ $t('dialog.world.actions.unpublish') }}
                                            el-dropdown-item(v-else icon="el-icon-view" command="Publish" divided) {{ $t('dialog.world.actions.publish_to_labs') }}
                                            el-dropdown-item(icon="el-icon-delete" command="Delete" style="color:#F56C6C") {{ $t('dialog.world.actions.delete') }}
                    el-tabs
                        el-tab-pane(:label="$t('dialog.world.instances.header')")
                            div.
                                #[i.el-icon-user] {{ $t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
                                #[i.el-icon-user-solid(style="margin-left:10px")] {{ $t('dialog.world.instances.private_count', { count: worldDialog.ref.privateOccupants })  }}
                                #[i.el-icon-check(style="margin-left:10px")] {{ $t('dialog.world.instances.capacity_count', { count: worldDialog.ref.capacity, max: worldDialog.ref.capacity * 2 }) }}
                            div(v-for="room in worldDialog.rooms" :key="room.id")
                                div(style="margin:5px 0")
                                    location-world(:locationobject="room.$location" :currentuserid="API.currentUser.id" :worlddialogshortname="worldDialog.$location.shortName")
                                    el-tooltip(placement="top" :content="$t('dialog.world.instances.self_invite_tooltip')" :disabled="hideTooltips")
                                        invite-yourself(:location="room.$location.tag" :shortname="room.$location.shortName" style="margin-left:5px" :disabled="typeof room.json.canRequestInvite !== 'undefined' && !room.json.canRequestInvite")
                                    el-tooltip(placement="top" :content="$t('dialog.world.instances.refresh_user_count_tooltip')" :disabled="hideTooltips")
                                        el-button(v-if="room.tag !== lastLocation.location" @click="refreshInstancePlayerCount(room.tag)" size="mini" icon="el-icon-refresh" style="margin-left:5px" circle)
                                    span(v-if="room.occupants" style="margin-left:5px") {{ room.occupants }}  #[template(v-if="room.friendCount > 0") ({{ room.friendCount }})]
                                    span(v-if="room.full" style="margin-left:5px;color:lightcoral") {{ $t('dialog.world.instances.instance_full') }}
                                .x-friend-list(style="margin:10px 0;max-height:unset" v-if="room.$location.userId || room.users.length")
                                    .x-friend-item(v-if="room.$location.userId" @click="showUserDialog(room.$location.userId)" class="x-friend-item-border")
                                        template(v-if="room.$location.user")
                                            .avatar(:class="userStatusClass(room.$location.user)")
                                                img(v-lazy="userImage(room.$location.user)")
                                            .detail
                                                span.name(v-text="room.$location.user.displayName" :style="{'color':room.$location.user.$userColour}")
                                                span.extra {{ $t('dialog.world.instances.instance_creator') }}
                                        span(v-else v-text="room.$location.userId")
                                    .x-friend-item(v-for="user in room.users" :key="user.id" @click="showUserDialog(user.id)" class="x-friend-item-border")
                                        .avatar(:class="userStatusClass(user)")
                                            img(v-lazy="userImage(user)")
                                        .detail
                                            span.name(v-text="user.displayName" :style="{'color':user.$userColour}")
                                            span.extra(v-if="user.location === 'traveling'")
                                                i.el-icon-loading(style="margin-right:5px")
                                                timer(:epoch="user.$travelingToTime")
                                            span.extra(v-else)
                                                timer(:epoch="user.$location_at")
                        el-tab-pane(:label="$t('dialog.world.info.header')")
                            .x-friend-list(style="max-height:none")
                                div(style="width:100%;display:flex")
                                    .x-friend-item(style="width:350px;cursor:default")
                                        .detail
                                            span.name {{ $t('dialog.world.info.id') }}
                                            span.extra {{ worldDialog.id }}
                                                el-tooltip(placement="top" :content="$t('dialog.world.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="copyWorldId(worldDialog.id)") {{ $t('dialog.world.info.copy_id') }}
                                                            el-dropdown-item(@click.native="copyWorldUrl(worldDialog.id)") {{ $t('dialog.world.info.copy_url') }}
                                                            el-dropdown-item(@click.native="copyWorldName(worldDialog.ref.name)") {{ $t('dialog.world.info.copy_name') }}
                                    .x-friend-item(v-if="worldDialog.ref.previewYoutubeId" style="width:350px" @click="openExternalLink(`https://www.youtube.com/watch?v=${worldDialog.ref.previewYoutubeId}`)")
                                        .detail
                                            span.name {{ $t('dialog.world.info.youtube_preview') }}
                                            span.extra https://www.youtube.com/watch?v={{ worldDialog.ref.previewYoutubeId }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.players') }}
                                        span.extra {{ worldDialog.ref.occupants | commaNumber }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.favorites') }}
                                        span.extra {{ worldDialog.ref.favorites | commaNumber }}
                                            | #[template(v-if="worldDialog.ref.favorites > 0 && worldDialog.ref.visits > 0")  ({{ Math.round(((worldDialog.ref.favorites - worldDialog.ref.visits) / worldDialog.ref.visits * 100 + 100) * 100) / 100 }}%)]
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.visits') }}
                                        span.extra {{ worldDialog.ref.visits | commaNumber }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.capacity') }}
                                        span.extra {{ worldDialog.ref.capacity | commaNumber }} ({{ worldDialog.ref.capacity * 2 | commaNumber }})
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.heat') }}
                                        span.extra {{ worldDialog.ref.heat | commaNumber }} {{ '🔥'.repeat(worldDialog.ref.heat) }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.popularity') }}
                                        span.extra {{ worldDialog.ref.popularity | commaNumber }} {{ '💖'.repeat(worldDialog.ref.popularity) }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.created_at') }}
                                        span.extra {{ worldDialog.ref.created_at | formatDate('long') }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.last_updated') }}
                                        span.extra {{ worldDialog.fileCreatedAt | formatDate('long') }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.version') }}
                                        span.extra(v-text="worldDialog.ref.version")
                                .x-friend-item(style="width:525px;cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.platform') }}
                                        span.extra(v-text="worldDialogPlatform")
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.last_visited') }}
                                            el-tooltip(v-if="!hideTooltips" placement="top" style="margin-left:5px" :content="$t('dialog.world.info.accuracy_notice')")
                                                i.el-icon-warning
                                        span.extra {{ worldDialog.lastVisit | formatDate('long') }}
                                .x-friend-item(@click="showPreviousInstancesWorldDialog(worldDialog.ref)")
                                    .detail
                                        span.name {{ $t('dialog.world.info.visit_count') }}
                                            el-tooltip(v-if="!hideTooltips" placement="top" style="margin-left:5px" :content="$t('dialog.world.info.accuracy_notice')")
                                                i.el-icon-warning
                                        span.extra(v-text="worldDialog.visitCount")
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.world.info.time_spent') }}
                                            el-tooltip(v-if="!hideTooltips" placement="top" style="margin-left:5px" :content="$t('dialog.world.info.accuracy_notice')")
                                                i.el-icon-warning
                                        span.extra(v-if="worldDialog.timeSpent === 0") -
                                        span.extra(v-else) {{ worldDialog.timeSpent | timeToText }}
                        el-tab-pane(:label="$t('dialog.world.json.header')")
                            el-button(type="default" @click="refreshWorldDialogTreeData()" size="mini" icon="el-icon-refresh" circle)
                            el-button(type="default" @click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)" size="mini" icon="el-icon-download" circle style="margin-left:5px")
                            el-tree(:data="worldDialog.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")

            //- dialog: avatar
            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:4px")
                            img.x-link(v-lazy="avatarDialog.ref.imageUrl" style="width:500px;height:375px" @click="downloadAndSaveImage(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(v-text="avatarDialog.ref.authorName" @click="showUserDialog(avatarDialog.ref.authorId)" style="color:#909399;font-family:monospace")
                                div(style="margin-top:5px")
                                    el-tag(v-if="avatarDialog.ref.releaseStatus === 'public'" type="success" effect="plain" size="mini" style="margin-right:5px") {{ $t('dialog.avatar.tags.public') }}
                                    el-tag(v-else type="danger" effect="plain" size="mini" style="margin-right:5px") {{ $t('dialog.avatar.tags.private') }}
                                    el-tag(v-if="avatarDialog.isQuestFallback" type="info" effect="plain" size="mini" style="margin-right:5px") {{ $t('dialog.avatar.tags.fallback') }}
                                    el-tag(v-if="avatarDialog.fileSize" type="info" effect="plain" size="mini" v-text="avatarDialog.fileSize" style="margin-right:5px")
                                    el-tag(v-if="avatarDialog.inCache" type="info" effect="plain" size="mini")
                                        span(v-text="avatarDialog.cacheSize")
                                        |  {{ $t('dialog.avatar.tags.cache') }}
                                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.unfavorite_tooltip')" :disabled="hideTooltips")
                                    el-button(type="warning" icon="el-icon-star-on" circle @click="avatarDialogCommand('Delete 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 style="margin-left:5px")
                                    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" 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-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(icon="el-icon-user" 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.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 {{ 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-question" 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")

            //- dialog: group
            el-dialog.x-dialog.x-group-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="groupDialog" :visible.sync="groupDialog.visible" :show-close="false" width="770px")
                .group-banner-image
                    el-popover(placement="right" width="500px" trigger="click")
                        img.x-link(slot="reference" v-lazy="groupDialog.ref.bannerUrl" style="flex:none;width:100%;aspect-ratio:6/1;object-fit:cover;border-radius:4px")
                        img.x-link(v-lazy="groupDialog.ref.bannerUrl" style="width:854px;height:480px" @click="downloadAndSaveImage(groupDialog.ref.bannerUrl)")
                .group-body(v-loading="groupDialog.loading")
                    div(style="display:flex")
                        el-popover(placement="right" width="500px" trigger="click")
                            img.x-link(slot="reference" v-lazy="groupDialog.ref.iconUrl" style="flex:none;width:120px;height:120px;border-radius:4px")
                            img.x-link(v-lazy="groupDialog.ref.iconUrl" style="width:500px;height:500px" @click="downloadAndSaveImage(groupDialog.ref.iconUrl)")
                        div(style="flex:1;display:flex;align-items:center;margin-left:15px")
                            .group-header(style="flex:1")
                                span(v-if="groupDialog.ref.ownerId === API.currentUser.id" style="margin-right:5px") 👑
                                span.dialog-title(v-text="groupDialog.ref.name" style="margin-right:5px")
                                span.group-discriminator(style="color:#909399;font-family:monospace;font-size:12px;margin-right:5px") {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
                                el-tooltip(v-for="item in groupDialog.ref.$languages" :key="item.key" placement="top")
                                    template(#content)
                                        span {{ item.value }} ({{ item.key }})
                                    span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
                                div(style="margin-top:5px")
                                    span.x-link(v-text="groupDialog.ownerDisplayName" @click="showUserDialog(groupDialog.ref.ownerId)" style="color:#909399;font-family:monospace")
                                .group-tags
                                    el-tag(v-if="groupDialog.ref.isVerified" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.verified') }}

                                    el-tag(v-if="groupDialog.ref.privacy === 'private'" type="danger" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.private') }}
                                    el-tag(v-if="groupDialog.ref.privacy === 'default'" type="success" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.public') }}

                                    el-tag(v-if="groupDialog.ref.joinState === 'open'" type="success" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.open') }}
                                    el-tag(v-else-if="groupDialog.ref.joinState === 'request'" type="warning" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.request') }}
                                    el-tag(v-else-if="groupDialog.ref.joinState === 'invite'" type="danger" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.invite') }}
                                    el-tag(v-else-if="groupDialog.ref.joinState === 'closed'" type="danger" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.closed') }}

                                    el-tag(v-if="groupDialog.inGroup" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.joined') }}
                                    el-tag(v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt" type="danger" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.banned') }}

                                    template(v-if="groupDialog.inGroup && groupDialog.ref.myMember")
                                        el-tag(v-if="groupDialog.ref.myMember.visibility === 'visible'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.visible') }}
                                        el-tag(v-else-if="groupDialog.ref.myMember.visibility === 'friends'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.friends') }}
                                        el-tag(v-else-if="groupDialog.ref.myMember.visibility === 'hidden'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.hidden') }}
                                        el-tag(v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.subscribed') }}

                                .group-description(style="margin-top:5px")
                                    span(v-show="groupDialog.ref.name !== groupDialog.ref.description" v-text="groupDialog.ref.description" style="font-size:12px")
                            div(style="flex:none;margin-left:10px")
                                template(v-if="groupDialog.inGroup")
                                    el-tooltip(v-if="groupDialog.ref.isRepresenting" placement="top" :content="$t('dialog.group.actions.unrepresent_tooltip')" :disabled="hideTooltips")
                                        el-button(type="warning" icon="el-icon-star-on" circle @click="clearGroupRepresentation(groupDialog.id)" style="margin-left:5px")
                                    el-tooltip(v-else placement="top" :content="$t('dialog.group.actions.represent_tooltip')" :disabled="hideTooltips")
                                        span
                                            el-button(type="default" icon="el-icon-star-off" circle @click="setGroupRepresentation(groupDialog.id)" style="margin-left:5px" :disabled="groupDialog.ref.privacy === 'private'")
                                template(v-else-if="groupDialog.ref.membershipStatus === 'requested'")
                                    el-tooltip(placement="top" :content="$t('dialog.group.actions.cancel_join_request_tooltip')" :disabled="hideTooltips")
                                        span
                                            el-button(type="default" icon="el-icon-close" circle @click="cancelGroupRequest(groupDialog.id)" style="margin-left:5px")
                                template(v-else-if="groupDialog.ref.membershipStatus === 'invited'")
                                    el-tooltip(placement="top" :content="$t('dialog.group.actions.pending_request_tooltip')" :disabled="hideTooltips")
                                        span
                                            el-button(type="default" icon="el-icon-check" circle @click="joinGroup(groupDialog.id)" style="margin-left:5px")
                                template(v-else)
                                    el-tooltip(v-if="groupDialog.ref.joinState === 'request'" placement="top" :content="$t('dialog.group.actions.request_join_tooltip')" :disabled="hideTooltips")
                                        el-button(type="default" icon="el-icon-message" circle @click="joinGroup(groupDialog.id)" style="margin-left:5px")
                                    el-tooltip(v-if="groupDialog.ref.joinState === 'invite'" placement="top" :content="$t('dialog.group.actions.invite_required_tooltip')" :disabled="hideTooltips")
                                        span
                                            el-button(type="default" icon="el-icon-message" disabled circle style="margin-left:5px")
                                    el-tooltip(v-if="groupDialog.ref.joinState === 'open'" placement="top" :content="$t('dialog.group.actions.join_group_tooltip')" :disabled="hideTooltips")
                                        el-button(type="default" icon="el-icon-check" circle @click="joinGroup(groupDialog.id)" style="margin-left:5px")
                                el-dropdown(trigger="click" @command="groupDialogCommand" size="small" style="margin-left:5px")
                                    el-button(type="default" icon="el-icon-more" circle)
                                    el-dropdown-menu(#default="dropdown")
                                        el-dropdown-item(icon="el-icon-refresh" command="Refresh") {{ $t('dialog.group.actions.refresh') }}
                                        template(v-if="groupDialog.inGroup")
                                            template(v-if="groupDialog.ref.myMember")
                                                el-dropdown-item(v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements" icon="el-icon-close" command="Unsubscribe To Announcements" divided) {{ $t('dialog.group.actions.unsubscribe') }}
                                                el-dropdown-item(v-else icon="el-icon-check" command="Subscribe To Announcements" divided) {{ $t('dialog.group.actions.subscribe') }}
                                                el-dropdown-item(v-if="hasGroupPermission(groupDialog.ref, 'group-invites-manage')" icon="el-icon-message" command="Invite To Group") {{ $t('dialog.group.actions.invite_to_group') }}
                                            template(v-if="groupDialog.ref.myMember && groupDialog.ref.privacy === 'default'")
                                                el-dropdown-item(icon="el-icon-view" command="Visibility Everyone" divided) #[i.el-icon-check(v-if="groupDialog.ref.myMember.visibility === 'visible'")] {{ $t('dialog.group.actions.visibility_everyone') }}
                                                el-dropdown-item(icon="el-icon-view" command="Visibility Friends") #[i.el-icon-check(v-if="groupDialog.ref.myMember.visibility === 'friends'")] {{ $t('dialog.group.actions.visibility_friends') }}
                                                el-dropdown-item(icon="el-icon-view" command="Visibility Hidden") #[i.el-icon-check(v-if="groupDialog.ref.myMember.visibility === 'hidden'")] {{ $t('dialog.group.actions.visibility_hidden') }}
                                            el-dropdown-item(icon="el-icon-delete" command="Leave Group" style="color:#F56C6C" divided) {{ $t('dialog.group.actions.leave') }}
                    el-tabs(ref="groupDialogTabs" @tab-click="groupDialogTabClick")
                        el-tab-pane(:label="$t('dialog.group.info.header')")
                            .group-banner-image-info
                                el-popover(placement="right" width="500px" trigger="click")
                                    img.x-link(slot="reference" v-lazy="groupDialog.ref.bannerUrl" style="flex:none;width:100%;aspect-ratio:6/1;object-fit:cover;border-radius:4px")
                                    img.x-link(v-lazy="groupDialog.ref.bannerUrl" style="width:854px;height:480px" @click="downloadAndSaveImage(groupDialog.ref.bannerUrl)")
                            .x-friend-list(style="max-height:none")
                                span(v-if="groupDialog.instances.length" style="font-size:12px;font-weight:bold;margin:5px") {{ $t('dialog.group.info.instances') }}
                                div(v-for="room in groupDialog.instances" :key="room.tag" style="width:100%")
                                    div(style="margin:5px 0")
                                        location(:location="room.tag")
                                        el-tooltip(placement="top" content="Invite yourself" :disabled="hideTooltips")
                                            invite-yourself(:location="room.tag" style="margin-left:5px" :disabled="typeof room.json.canRequestInvite !== 'undefined' && !room.json.canRequestInvite")
                                        el-tooltip(placement="top" content="Refresh player count" :disabled="hideTooltips")
                                            el-button(v-if="room.tag !== lastLocation.location" @click="refreshInstancePlayerCount(room.tag)" size="mini" icon="el-icon-refresh" style="margin-left:5px" circle)
                                        span(v-if="room.occupants" style="margin-left:5px") {{ room.occupants }}  #[template(v-if="room.friendCount > 0") ({{ room.friendCount }})]
                                        span(v-if="room.full" style="margin-left:5px;color:lightcoral") {{ $t('dialog.group.info.instance_full') }}
                                    .x-friend-list(style="margin:10px 0;padding:0;max-height:unset" v-if="room.users.length")
                                        .x-friend-item(v-for="user in room.users" :key="user.id" @click="showUserDialog(user.id)" class="x-friend-item-border")
                                            .avatar(:class="userStatusClass(user)")
                                                img(v-lazy="userImage(user)")
                                            .detail
                                                span.name(v-text="user.displayName" :style="{'color':user.$userColour}")
                                                span.extra(v-if="user.location === 'traveling'")
                                                    i.el-icon-loading(style="margin-right:5px")
                                                    timer(:epoch="user.$travelingToTime")
                                                span.extra(v-else)
                                                    timer(:epoch="user.$location_at")
                                .x-friend-item(v-if="groupDialog.ref.membershipStatus === 'member'" style="width:100%;cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.group.info.announcement') }}
                                        span(style="display:block" v-text="groupDialog.announcement.title")
                                        div(v-if="groupDialog.announcement.imageUrl" style="display:inline-block;margin-right:5px")
                                            el-popover(placement="right" width="500px" trigger="click")
                                                img.x-link(slot="reference" v-lazy="groupDialog.announcement.imageUrl" style="flex:none;width:60px;height:60px;border-radius:4px;object-fit:cover")
                                                img.x-link(v-lazy="groupDialog.announcement.imageUrl" style="height:500px" @click="downloadAndSaveImage(groupDialog.announcement.imageUrl)")
                                        pre.extra(style="display:inline-block;vertical-align:top;font-family:inherit;font-size:12px;white-space:pre-wrap;margin:0") {{ groupDialog.announcement.text || '-' }}
                                        br
                                        .extra(v-if="groupDialog.announcement.id" style="float:right;margin-left:5px")
                                            el-tooltip(placement="bottom")
                                                template(#content)
                                                    span {{ groupDialog.announcement.updatedAt | formatDate('long') }}
                                                span(@click="showUserDialog(groupDialog.announcement.authorId)" style="cursor:pointer")
                                                    span(v-text="groupDialog.announcementDisplayName" style="margin-right:5px")
                                                    timer(:epoch="Date.parse(groupDialog.announcement.updatedAt)")
                                .x-friend-item(style="width:100%;cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.group.info.rules') }}
                                        pre.extra(style="font-family:inherit;font-size:12px;white-space:pre-wrap;margin:0 0.5em 0 0") {{ groupDialog.ref.rules || '-' }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.group.info.members') }}
                                        .extra {{ groupDialog.ref.memberCount }} ({{ groupDialog.ref.onlineMemberCount }})
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.group.info.created_at') }}
                                        span.extra {{ groupDialog.ref.createdAt | formatDate('long') }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.group.info.links') }}
                                        div(v-if="groupDialog.ref.links && groupDialog.ref.links.length > 0" style="margin-top:5px")
                                            el-tooltip(v-if="link" v-for="(link, index) in groupDialog.ref.links" :key="index")
                                                template(#content)
                                                    span(v-text="link")
                                                img(:src="getFaviconUrl(link)" style="width:16px;height:16px;vertical-align:middle;margin-right:5px;cursor:pointer" @click.stop="openExternalLink(link)")
                                        .extra(v-else) -
                                .x-friend-item(style="width:350px;cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.group.info.url') }}
                                        span.extra {{ groupDialog.ref.$url }}
                                            el-tooltip(placement="top" :content="$t('dialog.group.info.url_tooltip')" :disabled="hideTooltips")
                                                el-button(type="default" @click="copyGroupUrl(groupDialog.ref.$url)" size="mini" icon="el-icon-s-order" circle style="margin-left:5px")
                                .x-friend-item(style="width:350px;cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.group.info.id') }}
                                        span.extra {{ groupDialog.id }}
                                            el-tooltip(placement="top" :content="$t('dialog.group.info.id_tooltip')" :disabled="hideTooltips")
                                                el-button(type="default" @click="copyGroupId(groupDialog.id)" size="mini" icon="el-icon-s-order" circle style="margin-left:5px")
                                div(v-if="groupDialog.ref.membershipStatus === 'member'" style="width:100%;margin-top:10px;border-top:1px solid #e4e7ed14")
                                    div(style="width:100%;display:flex;margin-top:10px")
                                        .x-friend-item(style="cursor:default")
                                            .detail
                                                span.name {{ $t('dialog.group.info.joined_at') }}
                                                span.extra {{ groupDialog.ref.myMember.joinedAt | formatDate('long') }}
                                        .x-friend-item(style="cursor:default")
                                            .detail
                                                span.name {{ $t('dialog.group.info.roles') }}
                                                span.extra(v-if="groupDialog.memberRoles.length === 0") -
                                                span.extra(v-else)
                                                    template(v-for="(role, rIndex) in groupDialog.memberRoles" :key="rIndex")
                                                        el-tooltip(placement="top")
                                                            template(#content)
                                                                span {{ $t('dialog.group.info.role') }} {{ role.name }}
                                                                span {{ $t('dialog.group.info.role_description') }} {{ role.description }}
                                                                br
                                                                span(v-if="role.updatedAt") {{ $t('dialog.group.info.role_updated_at') }} {{ role.updatedAt | formatDate('long') }}
                                                                span(v-else) {{ $t('dialog.group.info.role_created_at') }} {{ role.createdAt | formatDate('long') }}
                                                                br
                                                                span {{ $t('dialog.group.info.role_permissions') }}
                                                                br
                                                                template(v-for="(permission, pIndex) in role.permissions" :key="pIndex")
                                                                    span {{ permission }}
                                                                    br
                                                            span {{ role.name }}{{ rIndex < groupDialog.memberRoles.length - 1 ? ', ' : '' }}
                        el-tab-pane(:label="$t('dialog.group.members.header')")
                            template(v-if="groupDialog.visible")
                                span(v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')" style="font-weight:bold;font-size:16px") {{ $t('dialog.group.members.all_members') }}
                                span(v-else style="font-weight:bold;font-size:16px") {{ $t('dialog.group.members.friends_only') }}
                                br
                                el-button(type="default" @click="loadAllGroupMembers" size="mini" icon="el-icon-refresh" :loading="isGroupMembersLoading" circle)
                                el-button(type="default" @click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)" size="mini" icon="el-icon-download" circle style="margin-left:5px")
                                span(style="font-size:14px;margin-left:5px;margin-right:5px") {{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}
                                div(v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')" style="float:right")
                                    span(style="margin-right:5px") {{ $t('dialog.group.members.sort_by') }}
                                    el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px" :disabled="isGroupMembersLoading")
                                        el-button(size="mini")
                                            span {{ groupDialog.memberSortOrder.name }} #[i.el-icon-arrow-down.el-icon--right]
                                        el-dropdown-menu(#default="dropdown")
                                            el-dropdown-item(v-for="(item) in groupDialogSortingOptions" v-text="item.name" @click.native="setGroupMemberSortOrder(item)")
                                    span(style="margin-right:5px") {{ $t('dialog.group.members.filter') }}
                                    el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px" :disabled="isGroupMembersLoading")
                                        el-button(size="mini")
                                            span {{ groupDialog.memberFilter.name }} #[i.el-icon-arrow-down.el-icon--right]
                                        el-dropdown-menu(#default="dropdown")
                                            el-dropdown-item(v-for="(item) in groupDialogFilterOptions" v-text="item.name" @click.native="setGroupMemberFilter(item)")
                                            el-dropdown-item(v-for="(item) in groupDialog.memberRoles" v-text="item.name" @click.native="setGroupMemberFilter(item)")
                                ul.infinite-list.x-friend-list(v-if="groupDialog.members.length > 0" v-infinite-scroll="loadMoreGroupMembers" style="margin-top:10px;overflow:auto;max-height:250px;min-width:130px")
                                    li.infinite-list-item.x-friend-item(v-for="user in groupDialog.members" :key="user.id" @click="showUserDialog(user.userId)" class="x-friend-item-border")
                                        .avatar
                                            img(v-lazy="userImage(user.user)")
                                        .detail
                                            span.name(v-text="user.user.displayName" :style="{'color':user.user.$userColour}")
                                            span.extra
                                    .x-friend-item(v-if="!isGroupMembersDone" v-loading="isGroupMembersLoading" style="width:100%;height:45px;text-align:center" @click="loadMoreGroupMembers")
                                        .detail(v-if="!isGroupMembersLoading")
                                            span.name {{ $t('dialog.group.members.load_more') }}
                        el-tab-pane(:label="$t('dialog.group.gallery.header')")
                            el-button(type="default" size="mini" icon="el-icon-refresh" @click="getGroupGalleries" :loading="isGroupGalleryLoading" circle)
                            el-tabs(type="card" v-loading="isGroupGalleryLoading" ref="groupDialogGallery")
                                template(v-for="(gallery, index) in groupDialog.ref.galleries")
                                    el-tab-pane
                                        span(slot="label")
                                            span(v-text="gallery.name" style="font-weight:bold;font-size:16px")
                                            i.x-user-status(style="margin-left:5px" :class="groupGalleryStatus(gallery)")
                                            span(style="color:#909399;font-size:12px;margin-left:5px") {{ groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0 }}
                                        span(v-text="gallery.description" style="color:#c7c7c7;padding:10px")
                                        el-carousel(:interval="0" height="600px" style="margin-top:10px")
                                            el-carousel-item(v-for="image in groupDialog.galleries[gallery.id]" :key="image.id")
                                                el-popover(placement="top" width="700px" trigger="click")
                                                    img.x-link(slot="reference" v-lazy="image.imageUrl" style="width:100%;height:100%;object-fit:contain")
                                                    img.x-link(v-lazy="image.imageUrl" style="height:700px" @click="downloadAndSaveImage(image.imageUrl)")
                        el-tab-pane(:label="$t('dialog.group.json.header')")
                            el-button(type="default" @click="refreshGroupDialogTreeData()" size="mini" icon="el-icon-refresh" circle)
                            el-button(type="default" @click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)" size="mini" icon="el-icon-download" circle style="margin-left:5px")
                            el-tree(:data="groupDialog.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")

            //- dialog: favorite
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="favoriteDialog" :visible.sync="favoriteDialog.visible" :title="$t('dialog.favorite.header')" width="300px")
                div(v-if="favoriteDialog.visible" v-loading="favoriteDialog.loading")
                    span(style="display:block;text-align:center") {{ $t('dialog.favorite.vrchat_favorites') }}
                    template(v-if="favoriteDialog.currentGroup && favoriteDialog.currentGroup.key")
                        el-button(style="display:block;width:100%;margin:10px 0" @click="deleteFavorite(favoriteDialog.objectId)") #[i.el-icon-check] {{ favoriteDialog.currentGroup.displayName }} ({{ favoriteDialog.currentGroup.count }} / {{ favoriteDialog.currentGroup.capacity }})
                    template(v-else)
                        el-button(v-for="group in favoriteDialog.groups" :key="group" style="display:block;width:100%;margin:10px 0" @click="addFavorite(group)") {{ group.displayName }} ({{ group.count }} / {{ group.capacity }})
                div(v-if="favoriteDialog.visible && favoriteDialog.type === 'world'" style="margin-top:20px")
                    span(style="display:block;text-align:center") {{ $t('dialog.favorite.local_favorites') }}
                    template(v-for="group in localWorldFavoriteGroups" :key="group")
                        el-button(v-if="hasLocalWorldFavorite(favoriteDialog.objectId, group)" style="display:block;width:100%;margin:10px 0" @click="removeLocalWorldFavorite(favoriteDialog.objectId, group)") #[i.el-icon-check] {{ group }} ({{ getLocalWorldFavoriteGroupLength(group) }})
                        el-button(v-else style="display:block;width:100%;margin:10px 0" @click="addLocalWorldFavorite(favoriteDialog.objectId, group)") {{ group }} ({{ getLocalWorldFavoriteGroupLength(group) }})

            //- dialog: invite
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="inviteDialog" :visible.sync="inviteDialog.visible" :title="$t('dialog.invite.header')" width="450px")
                div(v-if="inviteDialog.visible" v-loading="inviteDialog.loading")
                    location(:location="inviteDialog.worldId" :link="false")
                    el-select(v-model="inviteDialog.userIds" multiple clearable :placeholder="$t('dialog.invite.select_placeholder')" filterable :disabled="inviteDialog.loading" style="width:100%;margin-top:15px")
                        el-option-group(v-if="API.currentUser" :label="$t('side_panel.me')")
                            el-option.x-friend-item(:label="API.currentUser.displayName" :value="API.currentUser.id" style="height:auto")
                                .avatar(:class="userStatusClass(API.currentUser)")
                                    img(v-lazy="userImage(API.currentUser)")
                                .detail
                                    span.name(v-text="API.currentUser.displayName")
                        el-option-group(v-if="friendsGroup0.length" :label="$t('side_panel.favorite')")
                            el-option.x-friend-item(v-for="friend in friendsGroup0" :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="friendsGroup1.length" :label="$t('side_panel.online')")
                            el-option.x-friend-item(v-for="friend in friendsGroup1" :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="friendsGroup2.length" :label="$t('side_panel.active')")
                            el-option.x-friend-item(v-for="friend in friendsGroup2" :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")
                template(#footer)
                    el-button(size="small" :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="showSendInviteDialog()") {{ $t('dialog.invite.invite_with_message') }}
                    el-button(type="primary" size="small" :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="sendInvite()") {{ $t('dialog.invite.invite') }}

            //- dialog: social status
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="socialStatusDialog" :visible.sync="socialStatusDialog.visible" :title="$t('dialog.social_status.header')" width="400px")
                div(v-loading="socialStatusDialog.loading")
                    el-collapse(style="border:0")
                        el-collapse-item
                            template(slot="title")
                                span(style="font-size:16px") {{ $t('dialog.social_status.history') }}
                            data-tables(v-bind="socialStatusHistoryTable" @row-click="setSocialStatusFromHistory" style="cursor:pointer")
                                el-table-column(:label="$t('table.social_status.no')" prop="no" width="50")
                                el-table-column(:label="$t('table.social_status.status')" prop="status")
                    el-select(v-model="socialStatusDialog.status" style="display:block;margin-top:10px")
                        el-option(:label="$t('dialog.user.status.online')" value="active").
                            #[i.x-user-status.online] {{ $t('dialog.user.status.online') }}
                        el-option(:label="$t('dialog.user.status.join_me')" value="join me").
                            #[i.x-user-status.joinme] {{ $t('dialog.user.status.join_me') }}
                        el-option(:label="$t('dialog.user.status.ask_me')" value="ask me").
                            #[i.x-user-status.askme] {{ $t('dialog.user.status.ask_me') }}
                        el-option(:label="$t('dialog.user.status.busy')" value="busy").
                            #[i.x-user-status.busy] {{ $t('dialog.user.status.busy') }}
                        el-option(v-if="API.currentUser.$isModerator" :label="$t('dialog.user.status.offline')" value="offline").
                            #[i.x-user-status.offline] {{ $t('dialog.user.status.offline') }}
                    el-input(v-model="socialStatusDialog.statusDescription" :placeholder="$t('dialog.social_status.status_placeholder')" maxlength="32" show-word-limit style="display:block;margin-top:10px")
                template(#footer)
                    el-button(type="primary" size="small" :disabled="socialStatusDialog.loading" @click="saveSocialStatus") {{ $t('dialog.social_status.update') }}

            //- dialog: language
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="languageDialog" :visible.sync="languageDialog.visible" :title="$t('dialog.language.header')" width="400px")
                div(v-loading="languageDialog.loading")
                    div(style="margin:5px 0")
                        el-tag(v-for="item in API.currentUser.$languages" :key="item.key" size="small" type="info" effect="plain" closable @close="removeUserLanguage(item.key)" style="margin-right:5px")
                            span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
                            | {{ item.value }} ({{ item.key }})
                    div(v-if="languageDialog.languageChoice === true")
                        el-select(v-model="languageDialog.languageValue" :placeholder="$t('dialog.language.select_language')" size="mini")
                            el-option(v-for="item in languageDialog.languages" :key="item.key" :value="item.key" :label="item.value")
                                span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
                                | {{ item.value }} ({{ item.key }})
                        el-button(@click="languageDialog.languageChoice=false; addUserLanguage(languageDialog.languageValue)" size="mini") {{ $t('dialog.language.ok') }}
                        el-button(@click="languageDialog.languageChoice=false" size="mini" style="margin-left:0") {{ $t('dialog.language.cancel') }}
                    div(v-else)
                        el-button(@click="languageDialog.languageValue='';languageDialog.languageChoice=true" size="mini") {{ $t('dialog.language.add_language') }}

            //- dialog: bio
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="bioDialog" :visible.sync="bioDialog.visible" :title="$t('dialog.bio.header')" width="600px")
                div(v-loading="bioDialog.loading")
                    el-input(type="textarea" v-model="bioDialog.bio" size="mini" maxlength="512" show-word-limit :autosize="{ minRows:2, maxRows:5 }" :placeholder="$t('dialog.bio.bio_placeholder')")
                    el-input(v-for="(link, index) in bioDialog.bioLinks" :key="index" :value="link" v-model="bioDialog.bioLinks[index]" size="small" style="margin-top:5px")
                        img(slot="prepend" :src="getFaviconUrl(link)" style="width:16px;height:16px")
                        el-button(slot="append" icon="el-icon-delete" @click="bioDialog.bioLinks.splice(index, 1)")
                    el-button(@click="bioDialog.bioLinks.push('')" size="mini" style="margin-top:5px") {{ $t('dialog.bio.add_link') }}
                template(#footer)
                    el-button(type="primary" size="small" :disabled="bioDialog.loading" @click="saveBio") {{ $t('dialog.bio.update') }}

            //- dialog: new instance
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="newInstanceDialog" :visible.sync="newInstanceDialog.visible" :title="$t('dialog.new_instance.header')" width="650px")
                el-tabs(type="card" v-model="newInstanceDialog.selectedTab")
                    el-tab-pane(:label="$t('dialog.new_instance.normal')")
                        el-form(v-if="newInstanceDialog.visible" :model="newInstanceDialog" label-width="130px")
                            el-form-item(:label="$t('dialog.new_instance.access_type')")
                                el-radio-group(v-model="newInstanceDialog.accessType" size="mini" @change="buildInstance")
                                    el-radio-button(label="public") {{ $t('dialog.new_instance.access_type_public') }}
                                    el-radio-button(label="group") {{ $t('dialog.new_instance.access_type_group') }}
                                    el-radio-button(label="friends+") {{ $t('dialog.new_instance.access_type_friend_plus') }}
                                    el-radio-button(label="friends") {{ $t('dialog.new_instance.access_type_friend') }}
                                    el-radio-button(label="invite+") {{ $t('dialog.new_instance.access_type_invite_plus') }}
                                    el-radio-button(label="invite") {{ $t('dialog.new_instance.access_type_invite') }}
                            el-form-item(:label="$t('dialog.new_instance.group_access_type')" v-if="newInstanceDialog.accessType === 'group'")
                                el-radio-group(v-model="newInstanceDialog.groupAccessType" size="mini" @change="buildInstance")
                                    el-radio-button(label="members") {{ $t('dialog.new_instance.group_access_type_members') }}
                                    el-radio-button(label="plus") {{ $t('dialog.new_instance.group_access_type_plus') }}
                                    el-radio-button(label="public") {{ $t('dialog.new_instance.group_access_type_public') }}
                            //- el-form-item(label="Strict" v-if="newInstanceDialog.accessType === 'friends' || newInstanceDialog.accessType === 'invite'")
                            //-     el-checkbox(v-model="newInstanceDialog.strict") Prevent non friends joining via URL/Instance ID
                            el-form-item(:label="$t('dialog.new_instance.region')")
                                el-radio-group(v-model="newInstanceDialog.region" size="mini" @change="buildInstance")
                                    el-radio-button(label="US West") {{ $t('dialog.new_instance.region_usw') }}
                                    el-radio-button(label="US East") {{ $t('dialog.new_instance.region_use') }}
                                    el-radio-button(label="Europe") {{ $t('dialog.new_instance.region_eu') }}
                                    el-radio-button(label="Japan") {{ $t('dialog.new_instance.region_jp') }}
                            el-form-item(:label="$t('dialog.new_instance.world_id')")
                                el-input(v-model="newInstanceDialog.worldId" size="mini" @click.native="$event.target.tagName === 'INPUT' && $event.target.select()" @change="buildInstance")
                            el-form-item(:label="$t('dialog.new_instance.instance_id')")
                                el-input(v-model="newInstanceDialog.instanceName" :placeholder="$t('dialog.new_instance.instance_id_placeholder')" size="mini" @change="buildInstance")
                            el-form-item(:label="$t('dialog.new_instance.instance_creator')" v-if="newInstanceDialog.accessType !== 'public' && newInstanceDialog.accessType !== 'group'")
                                el-select(v-model="newInstanceDialog.userId" clearable :placeholder="$t('dialog.new_instance.instance_creator_placeholder')" filterable style="width:100%" @change="buildInstance")
                                    el-option-group(v-if="API.currentUser" :label="$t('side_panel.me')")
                                        el-option.x-friend-item(:label="API.currentUser.displayName" :value="API.currentUser.id" style="height:auto")
                                            .avatar(:class="userStatusClass(API.currentUser)")
                                                img(v-lazy="userImage(API.currentUser)")
                                            .detail
                                                span.name(v-text="API.currentUser.displayName")
                                    el-option-group(v-if="friendsGroup0.length" :label="$t('side_panel.favorite')")
                                        el-option.x-friend-item(v-for="friend in friendsGroup0" :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="friendsGroup1.length" :label="$t('side_panel.online')")
                                        el-option.x-friend-item(v-for="friend in friendsGroup1" :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="friendsGroup2.length" :label="$t('side_panel.active')")
                                        el-option.x-friend-item(v-for="friend in friendsGroup2" :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="friendsGroup3.length" :label="$t('side_panel.offline')")
                                        el-option.x-friend-item(v-for="friend in friendsGroup3" :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-form-item(:label="$t('dialog.new_instance.group_id')" v-if="newInstanceDialog.accessType === 'group'")
                                el-select(v-model="newInstanceDialog.groupId" clearable :placeholder="$t('dialog.new_instance.group_placeholder')" filterable style="width:100%" @change="buildInstance")
                                    el-option-group(:label="$t('dialog.new_instance.group_placeholder')")
                                        el-option.x-friend-item(v-if="group" v-for="group in API.currentUserGroups.values()" :key="group.id" :label="group.name" :value="group.id" style="height:auto;width:478px")
                                            .avatar
                                                img(v-lazy="group.iconUrl")
                                            .detail
                                                span.name(v-text="group.name")
                            el-form-item(:label="$t('dialog.new_instance.location')")
                                el-input(v-model="newInstanceDialog.location" size="mini" readonly @click.native="$event.target.tagName === 'INPUT' && $event.target.select()")
                            el-form-item(:label="$t('dialog.new_instance.url')")
                                el-input(v-model="newInstanceDialog.url" size="mini" readonly)
                    el-tab-pane(:label="$t('dialog.new_instance.group')")
                        el-form(v-if="newInstanceDialog.visible" :model="newInstanceDialog" label-width="130px")
                            el-form-item(:label="$t('dialog.new_instance.group_access_type')")
                                el-radio-group(v-model="newInstanceDialog.groupAccessType" size="mini" @change="buildInstance")
                                    el-radio-button(label="members") {{ $t('dialog.new_instance.group_access_type_members') }}
                                    el-radio-button(label="plus") {{ $t('dialog.new_instance.group_access_type_plus') }}
                                    el-radio-button(label="public") {{ $t('dialog.new_instance.group_access_type_public') }}
                            el-form-item(:label="$t('dialog.new_instance.region')")
                                el-radio-group(v-model="newInstanceDialog.region" size="mini" @change="buildInstance")
                                    el-radio-button(label="US West") {{ $t('dialog.new_instance.region_usw') }}
                                    el-radio-button(label="US East") {{ $t('dialog.new_instance.region_use') }}
                                    el-radio-button(label="Europe") {{ $t('dialog.new_instance.region_eu') }}
                                    el-radio-button(label="Japan") {{ $t('dialog.new_instance.region_jp') }}
                            el-form-item(:label="$t('dialog.new_instance.queueEnabled')")
                                el-checkbox(v-model="newInstanceDialog.queueEnabled" @change="buildInstance")
                            el-form-item(:label="$t('dialog.new_instance.world_id')")
                                el-input(v-model="newInstanceDialog.worldId" size="mini" @click.native="$event.target.tagName === 'INPUT' && $event.target.select()" @change="buildInstance")
                            el-form-item(:label="$t('dialog.new_instance.group_id')")
                                el-select(v-model="newInstanceDialog.groupId" clearable :placeholder="$t('dialog.new_instance.group_placeholder')" filterable style="width:100%" @change="buildInstance")
                                    el-option-group(:label="$t('dialog.new_instance.group_placeholder')")
                                        el-option.x-friend-item(v-if="group" v-for="group in API.currentUserGroups.values()" :key="group.id" :label="group.name" :value="group.id" style="height:auto;width:478px")
                                            .avatar
                                                img(v-lazy="group.iconUrl")
                                            .detail
                                                span.name(v-text="group.name")
                            el-form-item(:label="$t('dialog.new_instance.roles')" v-if="newInstanceDialog.groupAccessType === 'members'")
                                el-select(v-model="newInstanceDialog.roleIds" multiple clearable :placeholder="$t('dialog.new_instance.role_placeholder')" style="width:100%" @change="buildInstance")
                                    el-option-group(:label="$t('dialog.new_instance.role_placeholder')")
                                        el-option.x-friend-item(v-for="role in newInstanceDialog.selectedGroupRoles" :key="role.id" :label="role.name" :value="role.id" style="height:auto;width:478px")
                                            .detail
                                                span.name(v-text="role.name")
                            template(v-if="newInstanceDialog.instanceCreated")
                                el-form-item(:label="$t('dialog.new_instance.location')")
                                    el-input(v-model="newInstanceDialog.location" size="mini" readonly @click.native="$event.target.tagName === 'INPUT' && $event.target.select()")
                                el-form-item(:label="$t('dialog.new_instance.url')")
                                    el-input(v-model="newInstanceDialog.url" size="mini" readonly)
                template(#footer v-if="newInstanceDialog.selectedTab === '0'")
                    el-button(size="small" @click="copyInstanceUrl(newInstanceDialog.location)") {{ $t('dialog.new_instance.copy_url') }}
                    el-button(size="small" @click="selfInvite(newInstanceDialog.location)") {{ $t('dialog.new_instance.self_invite') }}
                    el-button(size="small" @click="showInviteDialog(newInstanceDialog.location)" :disabled="(newInstanceDialog.accessType === 'friends' || newInstanceDialog.accessType === 'invite') && newInstanceDialog.userId !== API.currentUser.id") {{ $t('dialog.new_instance.invite') }}
                    el-button(type="primary" size="small" @click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.secureOrShortName)") {{ $t('dialog.new_instance.launch') }}
                template(#footer v-else-if="newInstanceDialog.selectedTab === '1'")
                    template(v-if="newInstanceDialog.instanceCreated")
                        el-button(size="small" @click="copyInstanceUrl(newInstanceDialog.location)") {{ $t('dialog.new_instance.copy_url') }}
                        el-button(size="small" @click="selfInvite(newInstanceDialog.location)") {{ $t('dialog.new_instance.self_invite') }}
                        el-button(size="small" @click="showInviteDialog(newInstanceDialog.location)" :disabled="(newInstanceDialog.accessType === 'friends' || newInstanceDialog.accessType === 'invite') && newInstanceDialog.userId !== API.currentUser.id") {{ $t('dialog.new_instance.invite') }}
                        el-button(type="primary" size="small" @click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.secureOrShortName)") {{ $t('dialog.new_instance.launch') }}
                    template(v-else)
                        el-button(type="primary" size="small" @click="createGroupInstance()" :disabled="!newInstanceDialog.groupId") {{ $t('dialog.new_instance.create_instance') }}

            //- dialog: launch options
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="launchOptionsDialog" :visible.sync="launchOptionsDialog.visible" :title="$t('dialog.launch_options.header')" width="500px")
                div(style="font-size:12px")
                    | {{ $t('dialog.launch_options.description') }} #[br]
                    | {{ $t('dialog.launch_options.example') }} #[el-tag(size="mini") --fps=144]
                el-input(type="textarea" v-model="launchOptionsDialog.launchArguments" size="mini" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="" style="margin-top:10px")
                div(style="font-size:12px;margin-top:10px")
                    | {{ $t('dialog.launch_options.path_override') }}
                el-input(type="textarea" v-model="launchOptionsDialog.vrcLaunchPathOverride" placeholder="C:\\Program Files (x86)\\Steam\\steamapps\\common\\VRChat" :rows="1" style="display:block;margin-top:10px")
                template(#footer)
                    div(style="display:flex")
                        el-button(size="small" @click="openExternalLink('https://docs.vrchat.com/docs/launch-options')") {{ $t('dialog.launch_options.vrchat_docs') }}
                        el-button(size="small" @click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')") {{ $t('dialog.launch_options.unity_manual') }}
                        el-button(type="primary" size="small" :disabled="launchOptionsDialog.loading" @click="updateLaunchOptions" style="margin-left:auto") {{ $t('dialog.launch_options.save') }}

            //- dialog: VRChat Config JSON
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="VRChatConfigDialog" :visible.sync="VRChatConfigDialog.visible" :title="$t('dialog.config_json.header')" width="420px")
                div(style='font-size:12px;word-break:keep-all')
                    | {{ $t('dialog.config_json.description1') }} #[br]
                    | {{ $t('dialog.config_json.description2') }}
                br
                span(style="margin-right:5px") {{ $t('dialog.config_json.cache_size') }}
                span(v-text="VRChatUsedCacheSize")
                span /
                span(v-text="VRChatTotalCacheSize")
                span GB
                el-tooltip(placement="top" :content="$t('dialog.config_json.refresh')" :disabled="hideTooltips")
                    el-button(type="default" :loading="VRChatCacheSizeLoading" @click="getVRChatCacheSize" size="small" icon="el-icon-refresh" circle style="margin-left:5px")
                br
                span {{ $t('dialog.config_json.delete_all_cache') }}
                el-button(size="small" style="margin-left:5px" icon="el-icon-delete" @click="showDeleteAllVRChatCacheConfirm()") {{ $t('dialog.config_json.delete_cache') }}
                br
                span {{ $t('dialog.config_json.delete_old_cache') }}
                el-button(size="small" style="margin-left:5px" icon="el-icon-folder-delete" @click="sweepVRChatCache()") {{ $t('dialog.config_json.sweep_cache') }}
                br
                div(style="display:inline-block;margin-top:10px" v-for="(item, value) in VRChatConfigList" :key="value")
                    span(v-text="item.name" style="word-break:keep-all")
                    |:
                    el-input(v-model="VRChatConfigFile[value]" :placeholder="item.default" size="mini" :type="item.type?item.type:'text'" :min="item.min" :max="item.max")
                div(style="display:inline-block;margin-top:10px")
                    span {{ $t('dialog.config_json.camera_resolution') }}
                    br
                    el-dropdown(@command="(command) => setVRChatCameraResolution(command)" size="small" trigger="click" style="margin-top:5px")
                        el-button(size="small")
                            span #[span(v-text="getVRChatCameraResolution()")] #[i.el-icon-arrow-down.el-icon--right]
                        el-dropdown-menu(#default="dropdown")
                            el-dropdown-item(v-for="row in VRChatCameraResolutions" :key="row.index" v-text="row.name" :command="row")
                div(style="display:inline-block;margin-top:10px;margin-left:10px")
                    span {{ $t('dialog.config_json.screenshot_resolution') }}
                    br
                    el-dropdown(@command="(command) => setVRChatScreenshotResolution(command)" size="small" trigger="click" style="margin-top:5px")
                        el-button(size="small")
                            span #[span(v-text="getVRChatScreenshotResolution()")] #[i.el-icon-arrow-down.el-icon--right]
                        el-dropdown-menu(#default="dropdown")
                            el-dropdown-item(v-for="row in VRChatScreenshotResolutions" :key="row.index" v-text="row.name" :command="row")
                el-checkbox(v-model="VRChatConfigFile.disableRichPresence" style="margin-top:5px;display:block") {{ $t('dialog.config_json.disable_discord_presence') }}
                template(#footer)
                    el-button(size="small" @click="openExternalLink('https://docs.vrchat.com/docs/configuration-file')") {{ $t('dialog.config_json.vrchat_docs') }}
                    el-button(size="small" @click="VRChatConfigDialog.visible = false") {{ $t('dialog.config_json.cancel') }}
                    el-button(type="primary" size="small" :disabled="VRChatConfigDialog.loading" @click="saveVRChatConfigFile") {{ $t('dialog.config_json.save') }}

            //- dialog: YouTube Api Dialog
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="youTubeApiDialog" :visible.sync="youTubeApiDialog.visible" :title="$t('dialog.youtube_api.header')" width="400px")
                div(style='font-size:12px;')
                    | {{ $t('dialog.youtube_api.description') }} #[br]
                el-input(type="textarea" v-model="youTubeApiKey" :placeholder="$t('dialog.youtube_api.placeholder')" maxlength="39" show-word-limit style="display:block;margin-top:10px")
                template(#footer)
                    div(style="display:flex")
                        el-button(size="small" @click="openExternalLink('https://rapidapi.com/blog/how-to-get-youtube-api-key/')") {{ $t('dialog.youtube_api.guide') }}
                        el-button(type="primary" size="small" @click="testYouTubeApiKey" style="margin-left:auto") {{ $t('dialog.youtube_api.save') }}

            //- dialog: Set World Tags
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="setWorldTagsDialog" :visible.sync="setWorldTagsDialog.visible" :title="$t('dialog.set_world_tags.header')" width="400px")
                el-checkbox(v-model="setWorldTagsDialog.debugAllowed") {{ $t('dialog.set_world_tags.enable_debugging') }}
                div(style='font-size:12px;margin-top:10px')
                    | {{ $t('dialog.set_world_tags.seprator') }} #[br]
                el-input(type="textarea" v-model="setWorldTagsDialog.tags" size="mini" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="" style="margin-top:10px")
                template(#footer)
                    div(style="display:flex")
                        el-button(size="small" @click="setWorldTagsDialog.visible = false") {{ $t('dialog.set_world_tags.cancel') }}
                        el-button(type="primary" size="small" @click="saveSetWorldTagsDialog") {{ $t('dialog.set_world_tags.save') }}

            //- dialog: Cache Download
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="downloadDialog" :visible.sync="downloadDialog.visible" :title="$t('dialog.download_history.header')" width="770px")
                template(v-if="downloadDialog.visible")
                    div(v-if="downloadInProgress && downloadCurrent.ref")
                        span(v-text="downloadCurrent.ref.name")
                        el-button(type="text" icon="el-icon-close" size="mini" @click="cancelDownload(downloadCurrent.id)" style="margin-left:5px")
                        el-progress(:percentage="downloadProgress" :format="downloadProgressText")
                    template(v-if="downloadQueueTable.data.length >= 1")
                        span(style="margin-top:15px") {{ $t('dialog.download_history.queue') }}
                        data-tables(v-bind="downloadQueueTable" style="margin-top:10px")
                            el-table-column(:label="$t('table.download_history.name')" prop="name")
                            el-table-column(:label="$t('table.download_history.type')" prop="type" width="70")
                            el-table-column(:label="$t('table.download_history.cancel')" width="60" align="right")
                                template(v-once #default="scope")
                                    el-button(type="text" icon="el-icon-close" size="mini" @click="cancelDownload(scope.row.ref.id)")
                    span(style="margin-top:15px") {{ $t('dialog.download_history.history') }}
                    data-tables(v-bind="downloadHistoryTable" style="margin-top:10px")
                        el-table-column(:label="$t('table.download_history.time')" prop="date" width="90")
                            template(v-once #default="scope")
                                timer(:epoch="scope.row.date")
                        el-table-column(:label="$t('table.download_history.name')" prop="name")
                            template(v-once #default="scope")
                                span(v-text="scope.row.ref.name")
                        el-table-column(:label="$t('table.download_history.type')" prop="type" width="70")
                        el-table-column(:label="$t('table.download_history.status')" prop="status" width="80")
                template(#footer)
                    el-button(v-if="downloadQueue.size >= 1" size="small" @click="cancelAllDownloads") {{ $t('dialog.download_history.cancel_all') }}
                    el-button(size="small" @click="downloadDialog.visible = false") {{ $t('dialog.download_history.close') }}

            //- dialog: update VRCX
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="VRCXUpdateDialog" :visible.sync="VRCXUpdateDialog.visible" :title="$t('dialog.vrcx_updater.header')" width="400px")
                div(v-loading="checkingForVRCXUpdate" style="margin-top:15px")
                    div(v-if="VRCXUpdateDialog.updatePending" style="margin-bottom:15px")
                        span(v-text="pendingVRCXInstall")
                        br
                        span {{ $t('dialog.vrcx_updater.ready_for_update') }}
                    el-select(v-model="branch" @change="loadBranchVersions" style="display:inline-block;width:150px;margin-right:15px")
                        el-option(v-once v-for="branch in branches" :key="branch.name" :label="branch.name" :value="branch.name")
                    el-select(v-model="VRCXUpdateDialog.release" style="display:inline-block;width:150px")
                        el-option(v-for="item in VRCXUpdateDialog.releases" :key="item.name" :label="item.tag_name" :value="item.name")
                    div(v-if="!VRCXUpdateDialog.updatePending && VRCXUpdateDialog.release === appVersion" style="margin-top:15px")
                        span {{ $t('dialog.vrcx_updater.latest_version') }}
                template(#footer)
                    el-button(v-if="(VRCXUpdateDialog.updatePending && VRCXUpdateDialog.release !== pendingVRCXInstall) || VRCXUpdateDialog.release !== appVersion" type="primary" size="small" @click="installVRCXUpdate") {{ $t('dialog.vrcx_updater.download') }}
                    el-button(v-if="VRCXUpdateDialog.updatePending" type="primary" size="small" @click="restartVRCX") {{ $t('dialog.vrcx_updater.install') }}

            //- dialog: launch
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="launchDialog" :visible.sync="launchDialog.visible" :title="$t('dialog.launch.header')" width="450px")
                el-form(:model="launchDialog" label-width="80px")
                    el-form-item(:label="$t('dialog.launch.url')")
                        el-input(v-model="launchDialog.url" size="mini" @click.native="$event.target.tagName === 'INPUT' && $event.target.select()" style="width:260px")
                        el-tooltip(placement="right" :content="$t('dialog.launch.copy_tooltip')" :disabled="hideTooltips")
                            el-button(@click="copyInstanceMessage(launchDialog.url)" size="mini" icon="el-icon-s-order" style="margin-right:5px" circle)
                    el-form-item(v-if="launchDialog.shortUrl" :label="$t('dialog.launch.short_url')")
                        el-tooltip(placement="top" style="margin-left:5px" :content="$t('dialog.launch.short_url_notice')")
                            i.el-icon-warning
                        el-input(v-model="launchDialog.shortUrl" size="mini" @click.native="$event.target.tagName === 'INPUT' && $event.target.select()" style="width:241px")
                        el-tooltip(placement="right" :content="$t('dialog.launch.copy_tooltip')" :disabled="hideTooltips")
                            el-button(@click="copyInstanceMessage(launchDialog.shortUrl)" size="mini" icon="el-icon-s-order" style="margin-right:5px" circle)
                    el-form-item(:label="$t('dialog.launch.location')")
                        el-input(v-model="launchDialog.location" size="mini" @click.native="$event.target.tagName === 'INPUT' && $event.target.select()" style="width:260px")
                        el-tooltip(placement="right" :content="$t('dialog.launch.copy_tooltip')" :disabled="hideTooltips")
                            el-button(@click="copyInstanceMessage(launchDialog.location)" size="mini" icon="el-icon-s-order" style="margin-right:5px" circle)
                template(#footer)
                    el-checkbox(v-model="launchDialog.desktop" style="float:left;margin-top:5px") {{ $t('dialog.launch.start_as_desktop') }}
                    el-button(size="small" @click="showPreviousInstanceInfoDialog(launchDialog.location)") {{ $t('dialog.launch.info') }}
                    el-button(size="small" @click="showInviteDialog(launchDialog.location)" :disabled="!checkCanInvite(launchDialog.location)") {{ $t('dialog.launch.invite') }}
                    el-button(type="primary" size="small" @click="launchGame(launchDialog.location, launchDialog.secureOrShortName, launchDialog.desktop)" :disabled="!launchDialog.secureOrShortName") {{ $t('dialog.launch.launch') }}

            //- dialog: export friends list
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" :visible.sync="exportFriendsListDialog" :title="$t('dialog.export_friends_list.header')" width="650px")
                el-tabs(type="card")
                    el-tab-pane(:label="$t('dialog.export_friends_list.csv')")
                        el-input(type="textarea" v-if="exportFriendsListDialog" v-model="exportFriendsListCsv" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()")
                    el-tab-pane(:label="$t('dialog.export_friends_list.json')")
                        el-input(type="textarea" v-if="exportFriendsListDialog" v-model="exportFriendsListJson" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()")

            //- dialog: export avatars list
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" :visible.sync="exportAvatarsListDialog" :title="$t('dialog.export_own_avatars.header')" width="650px")
                el-input(type="textarea" v-if="exportAvatarsListDialog" v-model="exportAvatarsListCsv" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()")

            //- dialog: Discord username list
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" :visible.sync="discordNamesDialogVisible" :title="$t('dialog.discord_names.header')" width="650px")
                div(style='font-size:12px;')
                    | {{ $t('dialog.discord_names.description') }}
                el-input(type="textarea" v-if="discordNamesDialogVisible" v-model="discordNamesContent" size="mini" rows="15" resize="none" readonly style="margin-top:15px")

            //- dialog: Notification position
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="notificationPositionDialog" :visible.sync="notificationPositionDialog.visible" :title="$t('dialog.notification_position.header')" width="400px")
                div(style='font-size:12px;')
                    | {{ $t('dialog.notification_position.description') }}
                svg.notification-position(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 200" style="margin-top:15px;" xml:space="preserve")
                    path(style="fill:black;" d="M291.89,5A3.11,3.11,0,0,1,295,8.11V160.64a3.11,3.11,0,0,1-3.11,3.11H8.11A3.11,3.11,0,0,1,5,160.64V8.11A3.11,3.11,0,0,1,8.11,5H291.89m0-5H8.11A8.11,8.11,0,0,0,0,8.11V160.64a8.11,8.11,0,0,0,8.11,8.11H291.89a8.11,8.11,0,0,0,8.11-8.11V8.11A8.11,8.11,0,0,0,291.89,0Z")
                    rect(style="fill:#c4c4c4;" x="5" y="5" width="290" height="158.75" rx="2.5")
                el-radio-group(v-model="notificationPosition" size="mini" @change="changeNotificationPosition")
                    el-radio(label="topLeft" v-model="notificationPosition" style="margin:0;position:absolute;left:35px;top:120px;") ‎
                    el-radio(label="top" v-model="notificationPosition" style="margin:0;position:absolute;left:195px;top:120px;") ‎
                    el-radio(label="topRight" v-model="notificationPosition" style="margin:0;position:absolute;right:25px;top:120px;") ‎
                    el-radio(label="centerLeft" v-model="notificationPosition" style="margin:0;position:absolute;left:35px;top:200px;") ‎
                    el-radio(label="center" v-model="notificationPosition" style="margin:0;position:absolute;left:195px;top:200px;") ‎
                    el-radio(label="centerRight" v-model="notificationPosition" style="margin:0;position:absolute;right:25px;top:200px;") ‎
                    el-radio(label="bottomLeft" v-model="notificationPosition" style="margin:0;position:absolute;left:35px;top:280px;") ‎
                    el-radio(label="bottom" v-model="notificationPosition" style="margin:0;position:absolute;left:195px;top:280px;") ‎
                    el-radio(label="bottomRight" v-model="notificationPosition" style="margin:0;position:absolute;right:25px;top:280px;") ‎
                template(#footer)
                    div(style="display:flex")
                        el-button(type="primary" size="small" style="margin-left:auto" @click="notificationPositionDialog.visible = false") {{ $t('dialog.notification_position.ok') }}

            //- dialog: Noty feed filters
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="notyFeedFiltersDialog" :visible.sync="notyFeedFiltersDialog.visible" :title="$t('dialog.shared_feed_filters.notification')" width="550px")
                .toggle-list
                    .toggle-item
                        span.toggle-name OnPlayerJoining
                        el-radio-group(v-model="sharedFeedFilters.noty.OnPlayerJoining" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name OnPlayerJoined
                        el-radio-group(v-model="sharedFeedFilters.noty.OnPlayerJoined" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name OnPlayerLeft
                        el-radio-group(v-model="sharedFeedFilters.noty.OnPlayerLeft" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name Online
                        el-radio-group(v-model="sharedFeedFilters.noty.Online" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Offline
                        el-radio-group(v-model="sharedFeedFilters.noty.Offline" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name GPS
                        el-radio-group(v-model="sharedFeedFilters.noty.GPS" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Status
                        el-radio-group(v-model="sharedFeedFilters.noty.Status" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Invite
                        el-radio-group(v-model="sharedFeedFilters.noty.invite" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Request Invite
                        el-radio-group(v-model="sharedFeedFilters.noty.requestInvite" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Invite Response
                        el-radio-group(v-model="sharedFeedFilters.noty.inviteResponse" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Request Invite Response
                        el-radio-group(v-model="sharedFeedFilters.noty.requestInviteResponse" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Friend Request
                        el-radio-group(v-model="sharedFeedFilters.noty.friendRequest" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name New Friend
                        el-radio-group(v-model="sharedFeedFilters.noty.Friend" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Unfriend
                        el-radio-group(v-model="sharedFeedFilters.noty.Unfriend" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Display Name
                        el-radio-group(v-model="sharedFeedFilters.noty.DisplayName" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Trust Level
                        el-radio-group(v-model="sharedFeedFilters.noty.TrustLevel" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Group Announcement
                        el-radio-group(v-model="sharedFeedFilters.noty['group.announcement']" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Group Join/Leave
                        el-radio-group(v-model="sharedFeedFilters.noty['group.informative']" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Group Invite
                        el-radio-group(v-model="sharedFeedFilters.noty['group.invite']" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Group Join Request
                        el-radio-group(v-model="sharedFeedFilters.noty['group.joinRequest']" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Instance Queue Ready
                        el-radio-group(v-model="sharedFeedFilters.noty['group.queueReady']" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Portal Spawn
                        el-radio-group(v-model="sharedFeedFilters.noty.PortalSpawn" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name Video Play
                            el-tooltip(placement="top" style="margin-left:5px" content="Requires VRCX YouTube API option enabled")
                                i.el-icon-warning
                        el-radio-group(v-model="sharedFeedFilters.noty.VideoPlay" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Events
                        el-radio-group(v-model="sharedFeedFilters.noty.Event" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Blocked Player Joins
                        el-radio-group(v-model="sharedFeedFilters.noty.BlockedOnPlayerJoined" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name Blocked Player Leaves
                        el-radio-group(v-model="sharedFeedFilters.noty.BlockedOnPlayerLeft" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name Muted Player Joins
                        el-radio-group(v-model="sharedFeedFilters.noty.MutedOnPlayerJoined" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name Muted Player Leaves
                        el-radio-group(v-model="sharedFeedFilters.noty.MutedOnPlayerLeft" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    template(v-if="photonLoggingEnabled")
                        br
                        .toggle-item
                            span.toggle-name Photon Event Logging
                        .toggle-item
                            span.toggle-name Lobby Avatar Change
                            el-radio-group(v-model="sharedFeedFilters.noty.AvatarChange" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                                el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                                el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                        .toggle-item
                            span.toggle-name Lobby ChatBox Message
                            el-radio-group(v-model="sharedFeedFilters.noty.ChatBoxMessage" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                                el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                                el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                        .toggle-item
                            span.toggle-name Blocked
                            el-radio-group(v-model="sharedFeedFilters.noty.Blocked" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                        .toggle-item
                            span.toggle-name Unblocked
                            el-radio-group(v-model="sharedFeedFilters.noty.Unblocked" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                        .toggle-item
                            span.toggle-name Muted
                            el-radio-group(v-model="sharedFeedFilters.noty.Muted" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                        .toggle-item
                            span.toggle-name Unmuted
                            el-radio-group(v-model="sharedFeedFilters.noty.Unmuted" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                template(#footer)
                    el-button(type="small" @click="cancelSharedFeedFilters") {{ $t('dialog.shared_feed_filters.cancel') }}
                    el-button(type="primary" size="small" style="margin-left:10px" @click="saveSharedFeedFilters") {{ $t('dialog.shared_feed_filters.save') }}

            //- dialog: wrist feed filters
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="wristFeedFiltersDialog" :visible.sync="wristFeedFiltersDialog.visible" :title="$t('dialog.shared_feed_filters.wrist')" width="550px")
                .toggle-list
                    .toggle-item
                        span.toggle-name Self Location
                        el-radio-group(v-model="sharedFeedFilters.wrist.Location" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name OnPlayerJoining
                        el-radio-group(v-model="sharedFeedFilters.wrist.OnPlayerJoining" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name OnPlayerJoined
                        el-radio-group(v-model="sharedFeedFilters.wrist.OnPlayerJoined" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name OnPlayerLeft
                        el-radio-group(v-model="sharedFeedFilters.wrist.OnPlayerLeft" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name Online
                        el-radio-group(v-model="sharedFeedFilters.wrist.Online" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Offline
                        el-radio-group(v-model="sharedFeedFilters.wrist.Offline" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name GPS
                        el-radio-group(v-model="sharedFeedFilters.wrist.GPS" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Status
                        el-radio-group(v-model="sharedFeedFilters.wrist.Status" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Invite
                        el-radio-group(v-model="sharedFeedFilters.wrist.invite" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Request Invite
                        el-radio-group(v-model="sharedFeedFilters.wrist.requestInvite" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Invite Response
                        el-radio-group(v-model="sharedFeedFilters.wrist.inviteResponse" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Request Invite Response
                        el-radio-group(v-model="sharedFeedFilters.wrist.requestInviteResponse" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Friend Request
                        el-radio-group(v-model="sharedFeedFilters.wrist.friendRequest" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name New Friend
                        el-radio-group(v-model="sharedFeedFilters.wrist.Friend" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Unfriend
                        el-radio-group(v-model="sharedFeedFilters.wrist.Unfriend" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Display Name
                        el-radio-group(v-model="sharedFeedFilters.wrist.DisplayName" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Trust Level
                        el-radio-group(v-model="sharedFeedFilters.wrist.TrustLevel" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                    .toggle-item
                        span.toggle-name Group Announcement
                        el-radio-group(v-model="sharedFeedFilters.wrist['group.announcement']" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Group Join/Leave
                        el-radio-group(v-model="sharedFeedFilters.wrist['group.informative']" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Group Invite
                        el-radio-group(v-model="sharedFeedFilters.wrist['group.invite']" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Group Join Request
                        el-radio-group(v-model="sharedFeedFilters.wrist['group.joinRequest']" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Instance Queue Ready
                        el-radio-group(v-model="sharedFeedFilters.wrist['group.queueReady']" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Portal Spawn
                        el-radio-group(v-model="sharedFeedFilters.wrist.PortalSpawn" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name Video Play
                            el-tooltip(placement="top" style="margin-left:5px" content="Requires VRCX YouTube API option enabled")
                                i.el-icon-warning
                        el-radio-group(v-model="sharedFeedFilters.wrist.VideoPlay" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Events
                        el-radio-group(v-model="sharedFeedFilters.wrist.Event" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                    .toggle-item
                        span.toggle-name Blocked Player Joins
                        el-radio-group(v-model="sharedFeedFilters.wrist.BlockedOnPlayerJoined" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name Blocked Player Leaves
                        el-radio-group(v-model="sharedFeedFilters.wrist.BlockedOnPlayerLeft" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name Muted Player Joins
                        el-radio-group(v-model="sharedFeedFilters.wrist.MutedOnPlayerJoined" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    .toggle-item
                        span.toggle-name Muted Player Leaves
                        el-radio-group(v-model="sharedFeedFilters.wrist.MutedOnPlayerLeft" size="mini")
                            el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                            el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                            el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                            el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                    template(v-if="photonLoggingEnabled")
                        br
                        .toggle-item
                            span.toggle-name Photon Event Logging
                        .toggle-item
                            span.toggle-name Lobby Avatar Change
                            el-radio-group(v-model="sharedFeedFilters.wrist.AvatarChange" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                                el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                                el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                        .toggle-item
                            span.toggle-name Lobby ChatBox Message
                            el-radio-group(v-model="sharedFeedFilters.wrist.ChatBoxMessage" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="VIP") {{ $t('dialog.shared_feed_filters.favorite') }}
                                el-radio-button(label="Friends") {{ $t('dialog.shared_feed_filters.friends') }}
                                el-radio-button(label="Everyone") {{ $t('dialog.shared_feed_filters.everyone') }}
                        .toggle-item
                            span.toggle-name Blocked
                            el-radio-group(v-model="sharedFeedFilters.wrist.Blocked" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                        .toggle-item
                            span.toggle-name Unblocked
                            el-radio-group(v-model="sharedFeedFilters.wrist.Unblocked" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                        .toggle-item
                            span.toggle-name Muted
                            el-radio-group(v-model="sharedFeedFilters.wrist.Muted" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                        .toggle-item
                            span.toggle-name Unmuted
                            el-radio-group(v-model="sharedFeedFilters.wrist.Unmuted" size="mini")
                                el-radio-button(label="Off") {{ $t('dialog.shared_feed_filters.off') }}
                                el-radio-button(label="On") {{ $t('dialog.shared_feed_filters.on') }}
                template(#footer)
                    el-button(type="small" @click="cancelSharedFeedFilters") {{ $t('dialog.shared_feed_filters.cancel') }}
                    el-button(type="primary" size="small" @click="saveSharedFeedFilters") {{ $t('dialog.shared_feed_filters.save') }}

            //- dialog: Edit Invite Message
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="editInviteMessageDialog" :visible.sync="editInviteMessageDialog.visible" :title="$t('dialog.edit_invite_message.header')" width="400px")
                div(style='font-size:12px')
                    span {{ $t('dialog.edit_invite_message.description') }}
                el-input(type="textarea" v-model="editInviteMessageDialog.newMessage" size="mini" maxlength="64" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="" style="margin-top:10px")
                template(#footer)
                    el-button(type="small" @click="cancelEditInviteMessage") {{ $t('dialog.edit_invite_message.cancel') }}
                    el-button(type="primary" size="small" @click="saveEditInviteMessage") {{ $t('dialog.edit_invite_message.save') }}

            //- dialog: Edit And Send Invite Response Message
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="editAndSendInviteResponseDialog" :visible.sync="editAndSendInviteResponseDialog.visible" :title="$t('dialog.edit_send_invite_response_message.header')" width="400px")
                div(style='font-size:12px')
                    span {{ $t('dialog.edit_send_invite_response_message.description') }}
                el-input(type="textarea" v-model="editAndSendInviteResponseDialog.newMessage" size="mini" maxlength="64" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="" style="margin-top:10px")
                template(#footer)
                    el-button(type="small" @click="cancelEditAndSendInviteResponse") {{ $t('dialog.edit_send_invite_response_message.cancel') }}
                    el-button(type="primary" size="small" @click="saveEditAndSendInviteResponse") {{ $t('dialog.edit_send_invite_response_message.send') }}

            //- dialog Table: Send Invite Response Message
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="sendInviteResponseDialog" :visible.sync="sendInviteResponseDialogVisible" :title="$t('dialog.invite_response_message.header')" width="800px")
                template(v-if="API.currentUser.$isVRCPlus")
                    input.inviteImageUploadButton(type="file" accept="image/png" @change="inviteImageUpload")
                data-tables(v-if="sendInviteResponseDialogVisible" v-bind="inviteResponseMessageTable" @row-click="showSendInviteResponseConfirmDialog" style="margin-top:10px;cursor:pointer")
                    el-table-column(:label="$t('table.profile.invite_messages.slot')" prop="slot" sortable="custom" width="70")
                    el-table-column(:label="$t('table.profile.invite_messages.message')" prop="message")
                    el-table-column(:label="$t('table.profile.invite_messages.cool_down')" prop="updatedAt" sortable="custom" width="110" align="right")
                        template(v-once #default="scope")
                            countdown-timer(:datetime="scope.row.updatedAt" :hours="1")
                    el-table-column(:label="$t('table.profile.invite_messages.action')" width="70" align="right")
                        template(v-once #default="scope")
                            el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditAndSendInviteResponseDialog('response', scope.row)")
                template(#footer)
                    el-button(type="small" @click="cancelSendInviteResponse") {{ $t('dialog.invite_response_message.cancel') }}
                    el-button(type="small" @click="API.refreshInviteMessageTableData('response')") {{ $t('dialog.invite_response_message.refresh') }}

            //- dialog Table: Send Invite Request Response Message
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="sendInviteRequestResponseDialog" :visible.sync="sendInviteRequestResponseDialogVisible" :title="$t('dialog.invite_request_response_message.header')" width="800px")
                template(v-if="API.currentUser.$isVRCPlus")
                    input.inviteImageUploadButton(type="file" accept="image/png" @change="inviteImageUpload")
                data-tables(v-if="sendInviteRequestResponseDialogVisible" v-bind="inviteRequestResponseMessageTable" @row-click="showSendInviteResponseConfirmDialog" style="margin-top:10px;cursor:pointer")
                    el-table-column(:label="$t('table.profile.invite_messages.slot')" prop="slot" sortable="custom" width="70")
                    el-table-column(:label="$t('table.profile.invite_messages.message')" prop="message")
                    el-table-column(:label="$t('table.profile.invite_messages.cool_down')" prop="updatedAt" sortable="custom" width="110" align="right")
                        template(v-once #default="scope")
                            countdown-timer(:datetime="scope.row.updatedAt" :hours="1")
                    el-table-column(:label="$t('table.profile.invite_messages.action')" width="70" align="right")
                        template(v-once #default="scope")
                            el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditAndSendInviteResponseDialog('requestResponse', scope.row)")
                template(#footer)
                    el-button(type="small" @click="cancelSendInviteRequestResponse") {{ $t('dialog.invite_request_response_message.cancel') }}
                    el-button(type="small" @click="API.refreshInviteMessageTableData('requestResponse')") {{ $t('dialog.invite_request_response_message.refresh') }}

            //- dialog: Send Invite Response Message Confirm
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="sendInviteResponseConfirmDialog" :visible.sync="sendInviteResponseConfirmDialog.visible" :title="$t('dialog.invite_response_message.header')" width="400px")
                div(style='font-size:12px')
                    span {{ $t('dialog.invite_response_message.confirmation') }}
                template(#footer)
                    el-button(type="small" @click="cancelInviteResponseConfirm") {{ $t('dialog.invite_response_message.cancel') }}
                    el-button(type="primary" size="small" @click="sendInviteResponseConfirm") {{ $t('dialog.invite_response_message.confirm') }}

            //- dialog Table: Send Invite Message
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="sendInviteDialog" :visible.sync="sendInviteDialogVisible" :title="$t('dialog.invite_message.header')" width="800px")
                template(v-if="API.currentUser.$isVRCPlus")
                    input.inviteImageUploadButton(type="file" accept="image/png" @change="inviteImageUpload")
                data-tables(v-if="sendInviteDialogVisible" v-bind="inviteMessageTable" @row-click="showSendInviteConfirmDialog" style="margin-top:10px;cursor:pointer")
                    el-table-column(:label="$t('table.profile.invite_messages.slot')" prop="slot" sortable="custom" width="70")
                    el-table-column(:label="$t('table.profile.invite_messages.message')" prop="message")
                    el-table-column(:label="$t('table.profile.invite_messages.cool_down')" prop="updatedAt" sortable="custom" width="110" align="right")
                        template(v-once #default="scope")
                            countdown-timer(:datetime="scope.row.updatedAt" :hours="1")
                    el-table-column(:label="$t('table.profile.invite_messages.action')" width="70" align="right")
                        template(v-once #default="scope")
                            el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditAndSendInviteDialog('message', scope.row)")
                template(#footer)
                    el-button(type="small" @click="cancelSendInvite") {{ $t('dialog.invite_message.cancel') }}
                    el-button(type="small" @click="API.refreshInviteMessageTableData('message')") {{ $t('dialog.invite_message.refresh') }}

            //- dialog Table: Send Invite Request Message
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="sendInviteRequestDialog" :visible.sync="sendInviteRequestDialogVisible" :title="$t('dialog.invite_request_message.header')" width="800px")
                template(v-if="API.currentUser.$isVRCPlus")
                    input.inviteImageUploadButton(type="file" accept="image/png" @change="inviteImageUpload")
                data-tables(v-if="sendInviteRequestDialogVisible" v-bind="inviteRequestMessageTable" @row-click="showSendInviteConfirmDialog" style="margin-top:10px;cursor:pointer")
                    el-table-column(:label="$t('table.profile.invite_messages.slot')" prop="slot" sortable="custom" width="70")
                    el-table-column(:label="$t('table.profile.invite_messages.message')" prop="message")
                    el-table-column(:label="$t('table.profile.invite_messages.cool_down')" prop="updatedAt" sortable="custom" width="110" align="right")
                        template(v-once #default="scope")
                            countdown-timer(:datetime="scope.row.updatedAt" :hours="1")
                    el-table-column(:label="$t('table.profile.invite_messages.action')" width="70" align="right")
                        template(v-once #default="scope")
                            el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditAndSendInviteDialog('request', scope.row)")
                template(#footer)
                    el-button(type="small" @click="cancelSendInviteRequest") {{ $t('dialog.invite_request_message.cancel') }}
                    el-button(type="small" @click="API.refreshInviteMessageTableData('request')") {{ $t('dialog.invite_request_message.refresh') }}

            //- dialog: Send Invite Message Confirm
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="sendInviteConfirmDialog" :visible.sync="sendInviteConfirmDialog.visible" :title="$t('dialog.invite_message.header')" width="400px")
                div(style='font-size:12px')
                    span {{ $t('dialog.invite_message.confirmation') }}
                template(#footer)
                    el-button(type="small" @click="cancelInviteConfirm") {{ $t('dialog.invite_message.cancel') }}
                    el-button(type="primary" size="small" @click="sendInviteConfirm") {{ $t('dialog.invite_message.confirm') }}

            //- dialog: Edit And Send Invite Message
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="editAndSendInviteDialog" :visible.sync="editAndSendInviteDialog.visible" :title="$t('dialog.edit_send_invite_message.header')" width="400px")
                div(style='font-size:12px')
                    span {{ $t('dialog.edit_send_invite_message.description') }}
                el-input(type="textarea" v-model="editAndSendInviteDialog.newMessage" size="mini" maxlength="64" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="" style="margin-top:10px")
                template(#footer)
                    el-button(type="small" @click="cancelEditAndSendInvite") {{ $t('dialog.edit_send_invite_message.cancel') }}
                    el-button(type="primary" size="small" @click="saveEditAndSendInvite") {{ $t('dialog.edit_send_invite_message.send') }}

            //- dialog: Change avatar image
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="changeAvatarImageDialog" :visible.sync="changeAvatarImageDialogVisible" :title="$t('dialog.change_content_image.avatar')" width="800px")
                div(v-if="changeAvatarImageDialogVisible" v-loading="changeAvatarImageDialogLoading")
                    input(type="file" accept="image/*" @change="onFileChangeAvatarImage" id="AvatarImageUploadButton" style="display:none")
                    span {{ $t('dialog.change_content_image.description') }}
                    br
                    el-button-group(style="padding-bottom:10px;padding-top:10px")
                        el-button(type="default" size="small" @click="displayPreviousImages('Avatar', 'Change')" icon="el-icon-refresh") {{ $t('dialog.change_content_image.refresh') }}
                        el-button(type="default" size="small" @click="uploadAvatarImage" icon="el-icon-upload2") {{ $t('dialog.change_content_image.upload') }}
                        //- el-button(type="default" size="small" @click="deleteAvatarImage" icon="el-icon-delete") Delete Latest Image
                    br
                    div(style="display:inline-block" v-for="image in previousImagesTable" :key="image.version" v-if="image.file")
                        .x-change-image-item(@click="setAvatarImage(image)" style="cursor:pointer" :class="{ 'current-image': compareCurrentImage(image) }")
                            img.image(v-lazy="image.file.url")

            //- dialog: Change world image
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="changeWorldImageDialog" :visible.sync="changeWorldImageDialogVisible" :title="$t('dialog.change_content_image.world')" width="800px")
                div(v-if="changeWorldImageDialogVisible" v-loading="changeWorldImageDialogLoading")
                    input(type="file" accept="image/*" @change="onFileChangeWorldImage" id="WorldImageUploadButton" style="display:none")
                    span {{ $t('dialog.change_content_image.description') }}
                    br
                    el-button-group(style="padding-bottom:10px;padding-top:10px")
                        el-button(type="default" size="small" @click="displayPreviousImages('World', 'Change')" icon="el-icon-refresh") {{ $t('dialog.change_content_image.refresh') }}
                        el-button(type="default" size="small" @click="uploadWorldImage" icon="el-icon-upload2") {{ $t('dialog.change_content_image.upload') }}
                        //- el-button(type="default" size="small" @click="deleteWorldImage" icon="el-icon-delete") Delete Latest Image
                    br
                    div(style="display:inline-block" v-for="image in previousImagesTable" :key="image.version" v-if="image.file")
                        .x-change-image-item(@click="setWorldImage(image)" style="cursor:pointer" :class="{ 'current-image': compareCurrentImage(image) }")
                            img.image(v-lazy="image.file.url")

            //- dialog: Display previous avatar/world images
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="previousImagesDialog" :visible.sync="previousImagesDialogVisible" :title="$t('dialog.previous_images.header')" width="800px")
                div(v-if="previousImagesDialogVisible")
                    div(style="display:inline-block" v-for="image in previousImagesTable" :key="image.version" v-if="image.file")
                        el-popover.x-change-image-item(placement="right" width="500px" trigger="click")
                            img.x-link(slot="reference" v-lazy="image.file.url")
                            img.x-link(v-lazy="image.file.url" style="width:500px;height:375px" @click="downloadAndSaveImage(image.file.url)")

            //- dialog: Gallery/VRCPlusIcons
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="galleryDialog" :visible.sync="galleryDialogVisible" :title="$t('dialog.gallery_icons.header')" width="100%")
                span(style="padding-bottom:10px") {{ $t('dialog.gallery_icons.description') }} (4:3)
                el-tabs(type="card")
                    el-tab-pane(v-if="galleryDialogVisible" v-loading="galleryDialogGalleryLoading")
                        span(slot="label") {{ $t('dialog.gallery_icons.gallery') }}
                            span(style="color:#909399;font-size:12px;margin-left:5px") {{ galleryTable.length }}/64
                        input(type="file" accept="image/*" @change="onFileChangeGallery" id="GalleryUploadButton" style="display:none")
                        el-button-group
                            el-button(type="default" size="small" @click="refreshGalleryTable" icon="el-icon-refresh") {{ $t('dialog.gallery_icons.refresh') }}
                            el-button(type="default" size="small" @click="displayGalleryUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") {{ $t('dialog.gallery_icons.upload') }}
                            el-button(type="default" size="small" @click="setProfilePicOverride('')" icon="el-icon-close" :disabled="!API.currentUser.profilePicOverride") {{ $t('dialog.gallery_icons.clear') }}
                        br
                        .x-friend-item(v-if="image.versions && image.versions.length > 0" v-for="image in galleryTable" :key="image.id" style="display:inline-block;margin-top:10px;width:unset;cursor:default")
                            .vrcplus-icon(v-if="image.versions[image.versions.length - 1].file.url" @click="setProfilePicOverride(image.id)" :class="{ 'current-vrcplus-icon': compareCurrentProfilePic(image.id) }")
                                img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")
                            div(style="float:right;margin-top:5px")
                                el-button(type="default" @click="downloadAndSaveImage(image.versions[image.versions.length - 1].file.url)" size="mini" icon="el-icon-download" circle)
                                el-button(type="default" @click="deleteGalleryImage(image.id)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
                    el-tab-pane(v-if="galleryDialogVisible" v-loading="galleryDialogIconsLoading")
                        span(slot="label") {{ $t('dialog.gallery_icons.icons') }}
                            span(style="color:#909399;font-size:12px;margin-left:5px") {{ VRCPlusIconsTable.length }}/64
                        input(type="file" accept="image/*" @change="onFileChangeVRCPlusIcon" id="VRCPlusIconUploadButton" style="display:none")
                        el-button-group
                            el-button(type="default" size="small" @click="refreshVRCPlusIconsTable" icon="el-icon-refresh") {{ $t('dialog.gallery_icons.refresh') }}
                            el-button(type="default" size="small" @click="displayVRCPlusIconUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") {{ $t('dialog.gallery_icons.upload') }}
                            el-button(type="default" size="small" @click="setVRCPlusIcon('')" icon="el-icon-close" :disabled="!API.currentUser.userIcon") {{ $t('dialog.gallery_icons.clear') }}
                        br
                        .x-friend-item(v-if="image.versions && image.versions.length > 0" v-for="image in VRCPlusIconsTable" :key="image.id" style="display:inline-block;margin-top:10px;width:unset;cursor:default")
                            .vrcplus-icon(v-if="image.versions[image.versions.length - 1].file.url" @click="setVRCPlusIcon(image.id)" :class="{ 'current-vrcplus-icon': compareCurrentVRCPlusIcon(image.id) }")
                                img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")
                            div(style="float:right;margin-top:5px")
                                el-button(type="default" @click="downloadAndSaveImage(image.versions[image.versions.length - 1].file.url)" size="mini" icon="el-icon-download" circle)
                                el-button(type="default" @click="deleteVRCPlusIcon(image.id)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")

            //- dialog Table: Previous Instances User
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="previousInstancesUserDialog" :visible.sync="previousInstancesUserDialog.visible" :title="$t('dialog.previous_instances.header')" width="1000px")
                span(v-text="previousInstancesUserDialog.userRef.displayName" style="font-size:14px")
                el-input(v-model="previousInstancesUserDialogTable.filters[0].value" :placeholder="$t('dialog.previous_instances.search_placeholder')" style="display:block;width:150px;margin-top:15px")
                data-tables(v-if="previousInstancesUserDialog.visible" v-bind="previousInstancesUserDialogTable" v-loading="previousInstancesUserDialog.loading" style="margin-top:10px")
                    el-table-column(:label="$t('table.previous_instances.date')" prop="created_at" sortable width="170")
                        template(v-once #default="scope")
                            span {{ scope.row.created_at | formatDate('long') }}
                    el-table-column(:label="$t('table.previous_instances.world')" prop="name" sortable)
                        template(v-once #default="scope")
                            location(:location="scope.row.location" :hint="scope.row.worldName" :grouphint="scope.row.groupName")
                    el-table-column(:label="$t('table.previous_instances.instance_creator')" prop="location" width="160")
                        template(v-once #default="scope")
                            display-name(:userid="scope.row.$location.userId" :location="scope.row.$location.tag" :key="previousInstancesUserDialog.forceUpdate")
                    el-table-column(:label="$t('table.previous_instances.time')" prop="time" width="90" sortable)
                        template(v-once #default="scope")
                            span(v-text="scope.row.timer")
                    el-table-column(:label="$t('table.previous_instances.action')" width="90" align="right")
                        template(v-once #default="scope")
                            el-button(type="text" icon="el-icon-info" size="mini" @click="showLaunchDialog(scope.row.location)")
                            el-button(type="text" icon="el-icon-tickets" size="mini" @click="showPreviousInstanceInfoDialog(scope.row.location)")
                            el-button(type="text" icon="el-icon-close" size="mini" @click="confirmDeleteGameLogUserInstance(scope.row)")

            //- dialog Table: Previous Instances World
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="previousInstancesWorldDialog" :visible.sync="previousInstancesWorldDialog.visible" :title="$t('dialog.previous_instances.header')" width="1000px")
                span(v-text="previousInstancesWorldDialog.worldRef.name" style="font-size:14px")
                el-input(v-model="previousInstancesWorldDialogTable.filters[0].value" :placeholder="$t('dialog.previous_instances.search_placeholder')" style="display:block;width:150px;margin-top:15px")
                data-tables(v-if="previousInstancesWorldDialog.visible" v-bind="previousInstancesWorldDialogTable" v-loading="previousInstancesWorldDialog.loading" style="margin-top:10px")
                    el-table-column(:label="$t('table.previous_instances.date')" prop="created_at" sortable width="170")
                        template(v-once #default="scope")
                            span {{ scope.row.created_at | formatDate('long') }}
                    el-table-column(:label="$t('table.previous_instances.instance_name')" prop="name")
                        template(v-once #default="scope")
                            location-world(:locationobject="scope.row.$location" :grouphint="scope.row.groupName" :currentuserid="API.currentUser.id")
                    el-table-column(:label="$t('table.previous_instances.instance_creator')" prop="location")
                        template(v-once #default="scope")
                            display-name(:userid="scope.row.$location.userId" :location="scope.row.$location.tag" :key="previousInstancesWorldDialog.forceUpdate")
                    el-table-column(:label="$t('table.previous_instances.time')" prop="time" width="90" sortable)
                        template(v-once #default="scope")
                            span(v-text="scope.row.timer")
                    el-table-column(:label="$t('table.previous_instances.action')" width="90" align="right")
                        template(v-once #default="scope")
                            el-button(type="text" icon="el-icon-tickets" size="mini" @click="showPreviousInstanceInfoDialog(scope.row.location)")
                            el-button(type="text" icon="el-icon-close" size="mini" @click="confirmDeleteGameLogWorldInstance(scope.row)")

            //- dialog Table: Previous Instance Info
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="previousInstanceInfoDialog" :visible.sync="previousInstanceInfoDialog.visible" :title="$t('dialog.previous_instances.info')" width="800px")
                location(:location="previousInstanceInfoDialog.$location.tag" style="font-size:14px")
                el-input(v-model="previousInstanceInfoDialogTable.filters[0].value" placeholder="Search" style="display:block;width:150px;margin-top:15px")
                data-tables(v-if="previousInstanceInfoDialog.visible" v-bind="previousInstanceInfoDialogTable" v-loading="previousInstanceInfoDialog.loading" style="margin-top:10px")
                    el-table-column(:label="$t('table.previous_instances.date')" prop="created_at" sortable width="120")
                        template(v-once #default="scope")
                            el-tooltip(placement="left")
                                template(#content)
                                    span {{ scope.row.created_at | formatDate('long') }}
                                span {{ scope.row.created_at | formatDate('short') }}
                    el-table-column(:label="$t('table.previous_instances.display_name')" prop="displayName" sortable)
                        template(v-once #default="scope")
                            span.x-link(v-text="scope.row.displayName" @click="lookupUser(scope.row)")
                    el-table-column(:label="$t('table.previous_instances.time')" prop="time" width="90" sortable)
                        template(v-once #default="scope")
                            span(v-text="scope.row.timer")
                    el-table-column(:label="$t('table.previous_instances.count')" prop="count" width="90" sortable)
                        template(v-once #default="scope")
                            span(v-text="scope.row.count")

            //- dialog: export world list
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="worldExportDialogRef" :visible.sync="worldExportDialogVisible" :title="$t('dialog.world_export.header')" width="650px")
                el-dropdown(@click.native.stop trigger="click" size="small")
                    el-button(size="mini")
                        span(v-if="worldExportFavoriteGroup") {{ worldExportFavoriteGroup.displayName }} ({{ worldExportFavoriteGroup.count }}/{{ worldExportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
                        span(v-else) Select Group #[i.el-icon-arrow-down.el-icon--right]
                    el-dropdown-menu(#default="dropdown")
                        el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldExportGroup(null)") None
                        template(v-for="groupAPI in API.favoriteWorldGroups" :key="groupAPI.name")
                            el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldExportGroup(groupAPI)") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
                el-dropdown(@click.native.stop trigger="click" size="small" style="margin-left:10px")
                    el-button(size="mini")
                        span(v-if="worldExportLocalFavoriteGroup") {{ worldExportLocalFavoriteGroup }} ({{ getLocalWorldFavoriteGroupLength(worldExportLocalFavoriteGroup) }}) #[i.el-icon-arrow-down.el-icon--right]
                        span(v-else) Select Group #[i.el-icon-arrow-down.el-icon--right]
                    el-dropdown-menu(#default="dropdown")
                        el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldExportLocalGroup(null)") None
                        template(v-for="group in localWorldFavoriteGroups" :key="group")
                            el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldExportLocalGroup(group)") {{ group }} ({{ localWorldFavorites[group].length }})
                br
                el-input(type="textarea" v-if="worldExportDialogVisible" v-model="worldExportContent" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()")

            //- dialog: World import dialog
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="worldImportDialog" :visible.sync="worldImportDialog.visible" :title="$t('dialog.world_import.header')" width="650px")
                div(style="font-size:12px")
                    | {{ $t('dialog.world_import.description') }}
                el-input(type="textarea" v-model="worldImportDialog.input" size="mini" rows="10" resize="none" style="margin-top:15px")
                el-button(size="small" @click="processWorldImportList" :disabled="!worldImportDialog.input") {{ $t('dialog.world_import.process_list') }}
                span(v-if="worldImportDialog.progress" style="margin-top:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.world_import.process_progress') }} {{ worldImportDialog.progress }}/{{ worldImportDialog.progressTotal }}
                br
                el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px")
                    el-button(size="mini")
                        span(v-if="worldImportDialog.worldImportFavoriteGroup") {{ worldImportDialog.worldImportFavoriteGroup.displayName }} ({{ worldImportDialog.worldImportFavoriteGroup.count }}/{{ worldImportDialog.worldImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
                        span(v-else) {{ $t('dialog.world_import.select_vrchat_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
                    el-dropdown-menu(#default="dropdown")
                        template(v-for="groupAPI in API.favoriteWorldGroups" :key="groupAPI.name")
                            el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldImportGroup(groupAPI)" :disabled="groupAPI.count >= groupAPI.capacity") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
                el-dropdown(@click.native.stop trigger="click" size="small" style="margin:5px")
                    el-button(size="mini")
                        span(v-if="worldImportDialog.worldImportLocalFavoriteGroup") {{ worldImportDialog.worldImportLocalFavoriteGroup }} ({{ getLocalWorldFavoriteGroupLength(worldImportDialog.worldImportLocalFavoriteGroup) }}) #[i.el-icon-arrow-down.el-icon--right]
                        span(v-else) {{ $t('dialog.world_import.select_local_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
                    el-dropdown-menu(#default="dropdown")
                        template(v-for="group in localWorldFavoriteGroups" :key="group")
                            el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectWorldImportLocalGroup(group)" ) {{ group }} ({{ getLocalWorldFavoriteGroupLength(group) }})
                el-button(size="small" @click="importWorldImportTable" style="margin:5px" :disabled="worldImportTable.data.length === 0 || (!worldImportDialog.worldImportFavoriteGroup && !worldImportDialog.worldImportLocalFavoriteGroup)") {{ $t('dialog.world_import.import') }}
                el-button(v-if="worldImportDialog.loading" size="small" @click="cancelWorldImport" style="margin-top:10px") {{ $t('dialog.world_import.cancel') }}
                span(v-if="worldImportDialog.worldImportFavoriteGroup") {{ worldImportTable.data.length }} / {{ worldImportDialog.worldImportFavoriteGroup.capacity - worldImportDialog.worldImportFavoriteGroup.count }}
                span(v-if="worldImportDialog.importProgress" style="margin:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.world_import.import_progress') }} {{ worldImportDialog.importProgress }}/{{ worldImportDialog.importProgressTotal }}
                br
                el-button(size="small" @click="clearWorldImportTable") {{ $t('dialog.world_import.clear_table') }}
                template(v-if="worldImportDialog.errors")
                    el-button(size="small" @click="worldImportDialog.errors = ''" style="margin-left:5px") {{ $t('dialog.world_import.clear_errors') }}
                    h2(style="font-weight:bold;margin:0") {{ $t('dialog.world_import.errors') }}
                    pre(v-text="worldImportDialog.errors" style="white-space:pre-wrap;font-size:12px")
                data-tables(v-if="worldImportDialog.visible" v-bind="worldImportTable" v-loading="worldImportDialog.loading" style="margin-top:10px")
                    el-table-column(:label="$t('table.import.image')" width="70" prop="thumbnailImageUrl")
                        template(v-once #default="scope")
                            el-popover(placement="right" height="500px" trigger="hover")
                                img.friends-list-avatar(slot="reference" v-lazy="scope.row.thumbnailImageUrl")
                                img.friends-list-avatar(v-lazy="scope.row.imageUrl" style="height:500px;cursor:pointer" @click="downloadAndSaveImage(scope.row.imageUrl)")
                    el-table-column(:label="$t('table.import.name')" prop="name")
                        template(v-once #default="scope")
                            span.x-link(v-text="scope.row.name" @click="showWorldDialog(scope.row.id)")
                    el-table-column(:label="$t('table.import.author')" width="120" prop="authorName")
                        template(v-once #default="scope")
                            span.x-link(v-text="scope.row.authorName" @click="showUserDialog(scope.row.authorId)")
                    el-table-column(:label="$t('table.import.status')" width="70" prop="releaseStatus")
                        template(v-once #default="scope")
                            span(v-text="scope.row.releaseStatus" v-if="scope.row.releaseStatus === 'public'" style="color:#67c23a")
                            span(v-text="scope.row.releaseStatus" v-else-if="scope.row.releaseStatus === 'private'" style="color:#f56c6c")
                            span(v-text="scope.row.releaseStatus" v-else)
                    el-table-column(:label="$t('table.import.action')" width="90" align="right")
                        template(v-once #default="scope")
                            el-button(type="text" icon="el-icon-close" size="mini" @click="deleteItemWorldImport(scope.row)")

            //- dialog: export avatar list
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="avatarExportDialogRef" :visible.sync="avatarExportDialogVisible" :title="$t('dialog.avatar_export.header')" width="650px")
                el-dropdown(@click.native.stop trigger="click" size="small")
                    el-button(size="mini")
                        span(v-if="avatarExportFavoriteGroup") {{ avatarExportFavoriteGroup.displayName }} ({{ avatarExportFavoriteGroup.count }}/{{ avatarExportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
                        span(v-else) All Favorites #[i.el-icon-arrow-down.el-icon--right]
                    el-dropdown-menu(#default="dropdown")
                        el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectAvatarExportGroup(null)") All Favorites
                        template(v-for="groupAPI in API.favoriteAvatarGroups" :key="groupAPI.name")
                            el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectAvatarExportGroup(groupAPI)") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
                br
                el-input(type="textarea" v-if="avatarExportDialogVisible" v-model="avatarExportContent" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()")

            //- dialog: Avatar import dialog
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="avatarImportDialog" :visible.sync="avatarImportDialog.visible" :title="$t('dialog.avatar_import.header')" width="650px")
                div(style="font-size:12px")
                    | {{ $t('dialog.avatar_import.description') }}
                el-input(type="textarea" v-model="avatarImportDialog.input" size="mini" rows="10" resize="none" style="margin-top:15px")
                el-button(size="small" @click="processAvatarImportList" :disabled="!avatarImportDialog.input") {{ $t('dialog.avatar_import.process_list') }}
                span(v-if="avatarImportDialog.progress" style="margin-top:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.avatar_import.process_progress') }} {{ avatarImportDialog.progress }}/{{ avatarImportDialog.progressTotal }}
                br
                el-dropdown(@click.native.stop trigger="click" size="small")
                    el-button(size="mini")
                        span(v-if="avatarImportDialog.avatarImportFavoriteGroup") {{ avatarImportDialog.avatarImportFavoriteGroup.displayName }} ({{ avatarImportDialog.avatarImportFavoriteGroup.count }}/{{ avatarImportDialog.avatarImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
                        span(v-else) {{ $t('dialog.avatar_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
                    el-dropdown-menu(#default="dropdown")
                        template(v-for="groupAPI in API.favoriteAvatarGroups" :key="groupAPI.name")
                            el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectAvatarImportGroup(groupAPI)" :disabled="groupAPI.count >= groupAPI.capacity") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
                el-button(size="small" @click="importAvatarImportTable" style="margin:5px" :disabled="avatarImportTable.data.length === 0 || !avatarImportDialog.avatarImportFavoriteGroup") {{ $t('dialog.avatar_import.import') }}
                el-button(v-if="avatarImportDialog.loading" size="small" @click="cancelAvatarImport" style="margin-top:10px") {{ $t('dialog.avatar_import.cancel') }}
                span(v-if="avatarImportDialog.avatarImportFavoriteGroup") {{ avatarImportTable.data.length }} / {{ avatarImportDialog.avatarImportFavoriteGroup.capacity - avatarImportDialog.avatarImportFavoriteGroup.count }}
                span(v-if="avatarImportDialog.importProgress" style="margin:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.avatar_import.import_progress') }} {{ avatarImportDialog.importProgress }}/{{ avatarImportDialog.importProgressTotal }}
                br
                el-button(size="small" @click="clearAvatarImportTable") {{ $t('dialog.avatar_import.clear_table') }}
                template(v-if="avatarImportDialog.errors")
                    el-button(size="small" @click="avatarImportDialog.errors = ''" style="margin-left:5px") {{ $t('dialog.avatar_import.clear_errors') }}
                    h2(style="font-weight:bold;margin:0") {{ $t('dialog.avatar_import.errors') }}
                    pre(v-text="avatarImportDialog.errors" style="white-space:pre-wrap;font-size:12px")
                data-tables(v-if="avatarImportDialog.visible" v-bind="avatarImportTable" v-loading="avatarImportDialog.loading" style="margin-top:10px")
                    el-table-column(:label="$t('table.import.image')" width="70" prop="thumbnailImageUrl")
                        template(v-once #default="scope")
                            el-popover(placement="right" height="500px" trigger="hover")
                                img.friends-list-avatar(slot="reference" v-lazy="scope.row.thumbnailImageUrl")
                                img.friends-list-avatar(v-lazy="scope.row.imageUrl" style="height:500px;cursor:pointer" @click="downloadAndSaveImage(scope.row.imageUrl)")
                    el-table-column(:label="$t('table.import.name')" prop="name")
                        template(v-once #default="scope")
                            span.x-link(v-text="scope.row.name" @click="showAvatarDialog(scope.row.id)")
                    el-table-column(:label="$t('table.import.author')" width="120" prop="authorName")
                        template(v-once #default="scope")
                            span.x-link(v-text="scope.row.authorName" @click="showUserDialog(scope.row.authorId)")
                    el-table-column(:label="$t('table.import.status')" width="70" prop="releaseStatus")
                        template(v-once #default="scope")
                            span(v-text="scope.row.releaseStatus" v-if="scope.row.releaseStatus === 'public'" style="color:#67c23a")
                            span(v-text="scope.row.releaseStatus" v-else-if="scope.row.releaseStatus === 'private'" style="color:#f56c6c")
                            span(v-text="scope.row.releaseStatus" v-else)
                    el-table-column(:label="$t('table.import.action')" width="90" align="right")
                        template(v-once #default="scope")
                            el-button(type="text" icon="el-icon-close" size="mini" @click="deleteItemAvatarImport(scope.row)")

            //- dialog: export friend list
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="friendExportDialogRef" :visible.sync="friendExportDialogVisible" :title="$t('dialog.friend_export.header')" width="650px")
                el-dropdown(@click.native.stop trigger="click" size="small")
                    el-button(size="mini")
                        span(v-if="friendExportFavoriteGroup") {{ friendExportFavoriteGroup.displayName }} ({{ friendExportFavoriteGroup.count }}/{{ friendExportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
                        span(v-else) All Favorites #[i.el-icon-arrow-down.el-icon--right]
                    el-dropdown-menu(#default="dropdown")
                        el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectFriendExportGroup(null)") All Favorites
                        template(v-for="groupAPI in API.favoriteFriendGroups" :key="groupAPI.name")
                            el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectFriendExportGroup(groupAPI)") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
                br
                el-input(type="textarea" v-if="friendExportDialogVisible" v-model="friendExportContent" size="mini" rows="15" resize="none" readonly style="margin-top:15px" @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()")

            //- dialog: Friend import dialog
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="friendImportDialog" :visible.sync="friendImportDialog.visible" :title="$t('dialog.friend_import.header')" width="650px")
                div(style="font-size:12px")
                    | {{ $t('dialog.friend_import.description') }}
                el-input(type="textarea" v-model="friendImportDialog.input" size="mini" rows="10" resize="none" style="margin-top:15px")
                el-button(size="small" @click="processFriendImportList" :disabled="!friendImportDialog.input") {{ $t('dialog.friend_import.process_list') }}
                span(v-if="friendImportDialog.progress" style="margin-top:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.friend_import.process_progress') }} {{ friendImportDialog.progress }}/{{ friendImportDialog.progressTotal }}
                br
                el-dropdown(@click.native.stop trigger="click" size="small")
                    el-button(size="mini")
                        span(v-if="friendImportDialog.friendImportFavoriteGroup") {{ friendImportDialog.friendImportFavoriteGroup.displayName }} ({{ friendImportDialog.friendImportFavoriteGroup.count }}/{{ friendImportDialog.friendImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
                        span(v-else) {{ $t('dialog.friend_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
                    el-dropdown-menu(#default="dropdown")
                        template(v-for="groupAPI in API.favoriteFriendGroups" :key="groupAPI.name")
                            el-dropdown-item(style="display:block;margin:10px 0" @click.native="selectFriendImportGroup(groupAPI)" :disabled="groupAPI.count >= groupAPI.capacity") {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
                el-button(size="small" @click="importFriendImportTable" style="margin:5px" :disabled="friendImportTable.data.length === 0 || !friendImportDialog.friendImportFavoriteGroup") {{ $t('dialog.friend_import.import') }}
                el-button(v-if="friendImportDialog.loading" size="small" @click="cancelFriendImport" style="margin-top:10px") {{ $t('dialog.friend_import.cancel') }}
                span(v-if="friendImportDialog.friendImportFavoriteGroup") {{ friendImportTable.data.length }} / {{ friendImportDialog.friendImportFavoriteGroup.capacity - friendImportDialog.friendImportFavoriteGroup.count }}
                span(v-if="friendImportDialog.importProgress" style="margin:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.friend_import.import_progress') }} {{ friendImportDialog.importProgress }}/{{ friendImportDialog.importProgressTotal }}
                br
                el-button(size="small" @click="clearFriendImportTable") {{ $t('dialog.friend_import.clear_table') }}
                template(v-if="friendImportDialog.errors")
                    el-button(size="small" @click="friendImportDialog.errors = ''" style="margin-left:5px") {{ $t('dialog.friend_import.clear_errors') }}
                    h2(style="font-weight:bold;margin:0") {{ $t('dialog.friend_import.errors') }}
                    pre(v-text="friendImportDialog.errors" style="white-space:pre-wrap;font-size:12px")
                data-tables(v-if="friendImportDialog.visible" v-bind="friendImportTable" v-loading="friendImportDialog.loading" style="margin-top:10px")
                    el-table-column(:label="$t('table.import.image')" width="70" prop="currentAvatarThumbnailImageUrl")
                        template(v-once #default="scope")
                            el-popover(placement="right" height="500px" trigger="hover")
                                img.friends-list-avatar(slot="reference" v-lazy="userImage(scope.row)")
                                img.friends-list-avatar(v-lazy="userImageFull(scope.row)" style="height:500px;cursor:pointer" @click="downloadAndSaveImage(userImageFull(scope.row))")
                    el-table-column(:label="$t('table.import.name')" prop="displayName")
                        template(v-once #default="scope")
                            span.x-link(v-text="scope.row.displayName" @click="showUserDialog(scope.row.id)")
                    el-table-column(:label="$t('table.import.action')" width="90" align="right")
                        template(v-once #default="scope")
                            el-button(type="text" icon="el-icon-close" size="mini" @click="deleteItemFriendImport(scope.row)")

            //- dialog: Note export dialog
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="noteExportDialog" :visible.sync="noteExportDialog.visible" :title="$t('dialog.note_export.header')" width="1000px")
                div(style="font-size:12px")
                    | {{ $t('dialog.note_export.description1') }} #[br]
                    | {{ $t('dialog.note_export.description2') }} #[br]
                    | {{ $t('dialog.note_export.description3') }} #[br]
                    | {{ $t('dialog.note_export.description4') }} #[br]
                    | {{ $t('dialog.note_export.description5') }} #[br]
                    | {{ $t('dialog.note_export.description6') }} #[br]
                    | {{ $t('dialog.note_export.description7') }} #[br]
                    | {{ $t('dialog.note_export.description8') }} #[br]
                el-button(size="small" @click="updateNoteExportDialog" :disabled="noteExportDialog.loading" style="margin-top:10px") {{ $t('dialog.note_export.refresh') }}
                el-button(size="small" @click="exportNoteExport" :disabled="noteExportDialog.loading" style="margin-top:10px") {{ $t('dialog.note_export.export') }}
                el-button(v-if="noteExportDialog.loading" size="small" @click="cancelNoteExport" style="margin-top:10px") {{ $t('dialog.note_export.cancel') }}
                span(v-if="noteExportDialog.loading" style="margin:10px") #[i.el-icon-loading(style="margin-right:5px")] {{ $t('dialog.note_export.progress') }} {{ noteExportDialog.progress }}/{{ noteExportDialog.progressTotal }}
                template(v-if="noteExportDialog.errors")
                    el-button(size="small" @click="noteExportDialog.errors = ''") {{ $t('dialog.note_export.clear_errors') }}
                    h2(style="font-weight:bold;margin:0") {{ $t('dialog.note_export.errors') }}
                    pre(v-text="noteExportDialog.errors" style="white-space:pre-wrap;font-size:12px")
                data-tables(v-if="noteExportDialog.visible" v-bind="noteExportTable" v-loading="noteExportDialog.loading" style="margin-top:10px")
                    el-table-column(:label="$t('table.import.image')" width="70" prop="currentAvatarThumbnailImageUrl")
                        template(v-once #default="scope")
                            el-popover(placement="right" height="500px" trigger="hover")
                                img.friends-list-avatar(slot="reference" v-lazy="userImage(scope.row.ref)")
                                img.friends-list-avatar(v-lazy="userImageFull(scope.row.ref)" style="height:500px;cursor:pointer" @click="downloadAndSaveImage(userImageFull(scope.row.ref))")
                    el-table-column(:label="$t('table.import.name')" width="170" prop="name")
                        template(v-once #default="scope")
                            span.x-link(v-text="scope.row.name" @click="showUserDialog(scope.row.id)")
                    el-table-column(:label="$t('table.import.note')" prop="memo")
                        template(v-once #default="scope")
                            el-input(v-model="scope.row.memo" type="textarea" maxlength="256" show-word-limit :rows="2" :autosize="{ minRows: 1, maxRows: 10 }" size="mini" resize="none")
                    el-table-column(:label="$t('table.import.skip_export')" width="90" align="right")
                        template(v-once #default="scope")
                            el-button(type="text" icon="el-icon-close" size="mini" @click="removeFromNoteExportTable(scope.row)")

            //- dialog: avatar database provider
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="avatarProviderDialog" :visible.sync="avatarProviderDialog.visible" :title="$t('dialog.avatar_database_provider.header')" width="600px")
                div
                    el-input(v-for="(provider, index) in avatarRemoteDatabaseProviderList" :key="index" :value="provider" v-model="avatarRemoteDatabaseProviderList[index]" @change="saveAvatarProviderList" size="small" style="margin-top:5px")
                        el-button(slot="append" icon="el-icon-delete" @click="removeAvatarProvider(provider)")
                    el-button(@click="avatarRemoteDatabaseProviderList.push('')" size="mini" style="margin-top:5px") {{ $t('dialog.avatar_database_provider.add_provider') }}

            //- dialog: chatbox blacklist
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="chatboxBlacklistDialog" :visible.sync="chatboxBlacklistDialog.visible" :title="$t('dialog.chatbox_blacklist.header')" width="600px")
                div(v-loading="chatboxBlacklistDialog.loading" v-if="chatboxBlacklistDialog.visible")
                    h2 {{ $t('dialog.chatbox_blacklist.keyword_blacklist') }}
                    el-input(v-for="(item, index) in chatboxBlacklist" :key="index" :value="item" v-model="chatboxBlacklist[index]" size="small" style="margin-top:5px" @change="saveChatboxBlacklist")
                        el-button(slot="append" icon="el-icon-delete" @click="chatboxBlacklist.splice(index, 1); saveChatboxBlacklist()")
                    el-button(@click="chatboxBlacklist.push('')" size="mini" style="margin-top:5px") {{ $t('dialog.chatbox_blacklist.add_item') }}
                    br
                    h2 {{ $t('dialog.chatbox_blacklist.user_blacklist') }}
                    el-tag(v-for="user in chatboxUserBlacklist" type="info" disable-transitions="true" :key="user[0]" style="margin-right:5px;margin-top:5px" closable @close="deleteChatboxUserBlacklist(user[0])")
                        span {{user[1]}}

            //- dialog: invite group
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="inviteGroupDialog" :visible.sync="inviteGroupDialog.visible" :title="$t('dialog.invite_to_group.header')" width="450px")
                div(v-if="inviteGroupDialog.visible" v-loading="inviteGroupDialog.loading")
                    span {{ $t('dialog.invite_to_group.description') }}
                    br
                    el-select(v-model="inviteGroupDialog.groupId" clearable :placeholder="$t('dialog.invite_to_group.choose_group_placeholder')" filterable :disabled="inviteGroupDialog.loading" @change="isAllowedToInviteToGroup" style="margin-top:15px")
                        el-option-group(v-if="API.currentUserGroups.size" :label="$t('dialog.invite_to_group.groups')" style="width:410px")
                            el-option.x-friend-item(v-for="group in API.currentUserGroups.values()" :key="group.id" :label="group.name" :value="group.id" style="height:auto")
                                .avatar
                                    img(v-lazy="group.iconUrl")
                                .detail
                                    span.name(v-text="group.name")
                    el-select(v-model="inviteGroupDialog.userIds" clearable :placeholder="$t('dialog.invite_to_group.choose_friends_placeholder')" filterable :disabled="inviteGroupDialog.loading" style="width:100%;margin-top:15px")
                        el-option-group(v-if="inviteGroupDialog.userId" :label="$t('dialog.invite_to_group.selected_users')")
                            el-option.x-friend-item(:key="inviteGroupDialog.userObject.id" :label="inviteGroupDialog.userObject.displayName" :value="inviteGroupDialog.userObject.id" style="height:auto")
                                template(v-if="inviteGroupDialog.userObject.id")
                                    .avatar(:class="userStatusClass(inviteGroupDialog.userObject)")
                                        img(v-lazy="userImage(inviteGroupDialog.userObject)")
                                    .detail
                                        span.name(v-text="inviteGroupDialog.userObject.displayName" :style="{'color':inviteGroupDialog.userObject.$userColour}")
                                span(v-else v-text="inviteGroupDialog.userId")
                        el-option-group(v-if="friendsGroup0.length" :label="$t('side_panel.favorite')")
                            el-option.x-friend-item(v-for="friend in friendsGroup0" :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="friendsGroup1.length" :label="$t('side_panel.online')")
                            el-option.x-friend-item(v-for="friend in friendsGroup1" :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="friendsGroup2.length" :label="$t('side_panel.active')")
                            el-option.x-friend-item(v-for="friend in friendsGroup2" :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="friendsGroup3.length" :label="$t('side_panel.offline')")
                            el-option.x-friend-item(v-for="friend in friendsGroup3" :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")
                template(#footer)
                    el-button(type="primary" size="small" :disabled="inviteGroupDialog.loading || !inviteGroupDialog.userIds.length" @click="sendGroupInvite()") Invite

            //- dialog: screenshot metadata
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="screenshotMetadataDialog" :visible.sync="screenshotMetadataDialog.visible" :title="$t('dialog.screenshot_metadata.header')" width="1050px")
                div(v-if="screenshotMetadataDialog.visible" @dragover.prevent @dragenter.prevent @drop="handleDrop" style="-webkit-app-region: drag")
                    span(style="margin-left:5px;color:#909399;font-family:monospace") {{ $t('dialog.screenshot_metadata.drag') }}
                    br
                    el-button(size="small" icon="el-icon-folder-opened" @click="AppApi.OpenScreenshotFileDialog()") {{ $t('dialog.screenshot_metadata.browse') }}
                    el-button(size="small" icon="el-icon-picture-outline" @click="AppApi.GetLastScreenshot()") {{ $t('dialog.screenshot_metadata.last_screenshot') }}
                    el-button(size="small" icon="el-icon-copy-document" @click="copyImageToClipboard(screenshotMetadataDialog.metadata.filePath)") {{ $t('dialog.screenshot_metadata.copy_image') }}
                    el-button(size="small" icon="el-icon-folder" @click="openImageFolder(screenshotMetadataDialog.metadata.filePath)") {{ $t('dialog.screenshot_metadata.open_folder') }}
                    el-button(v-if="API.currentUser.$isVRCPlus && screenshotMetadataDialog.metadata.filePath" size="small" icon="el-icon-upload2" @click="uploadScreenshotToGallery") {{ $t('dialog.screenshot_metadata.upload') }}
                    br
                    br
                    span(v-text="screenshotMetadataDialog.metadata.fileName")
                    br
                    span(v-if="screenshotMetadataDialog.metadata.dateTime") {{ screenshotMetadataDialog.metadata.dateTime | formatDate('long') }}
                    span(v-if="screenshotMetadataDialog.metadata.fileResolution" v-text="screenshotMetadataDialog.metadata.fileResolution" style="margin-left:5px")
                    el-tag(v-if="screenshotMetadataDialog.metadata.fileSize" type="info" effect="plain" size="mini" style="margin-left:5px" v-text="screenshotMetadataDialog.metadata.fileSize")
                    br
                    location(v-if="screenshotMetadataDialog.metadata.world" :location="screenshotMetadataDialog.metadata.world.instanceId" :hint="screenshotMetadataDialog.metadata.world.name")
                    br
                    span.x-link(v-if="screenshotMetadataDialog.metadata.author" v-text="screenshotMetadataDialog.metadata.author.displayName" @click="showUserDialog(screenshotMetadataDialog.metadata.author.id)" style="color:#909399;font-family:monospace")
                    br
                    el-carousel(ref="screenshotMetadataCarousel" :interval="0" initial-index="1" indicator-position="none" arrow="always" height="600px" style="margin-top:10px" @change="screenshotMetadataCarouselChange")
                        el-carousel-item
                            el-popover(placement="top" width="700px" trigger="click")
                                img.x-link(slot="reference" v-lazy="screenshotMetadataDialog.metadata.previousFilePath" style="width:100%;height:100%;object-fit:contain")
                                img(v-lazy="screenshotMetadataDialog.metadata.previousFilePath" style="height:700px")
                        el-carousel-item
                            el-popover(placement="top" width="700px" trigger="click")
                                img.x-link(slot="reference" v-lazy="screenshotMetadataDialog.metadata.filePath" style="width:100%;height:100%;object-fit:contain")
                                img(v-lazy="screenshotMetadataDialog.metadata.filePath" style="height:700px")
                        el-carousel-item
                            el-popover(placement="top" width="700px" trigger="click")
                                img.x-link(slot="reference" v-lazy="screenshotMetadataDialog.metadata.nextFilePath" style="width:100%;height:100%;object-fit:contain")
                                img(v-lazy="screenshotMetadataDialog.metadata.nextFilePath" style="height:700px")
                    br
                    template(v-if="screenshotMetadataDialog.metadata.error")
                        pre(v-text="screenshotMetadataDialog.metadata.error" style="white-space:pre-wrap;font-size:12px")
                        br
                    span(v-for="user in screenshotMetadataDialog.metadata.players" style="margin-top:5px")
                        span.x-link(v-text="user.displayName" @click="lookupUser(user)")
                        span(v-if="user.x" v-text="'('+user.x+', '+user.y+', '+user.z+')'" style="margin-left:5px;color:#909399;font-family:monospace")
                        br

            //- dialog: change log
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="changeLogDialog" :visible.sync="changeLogDialog.visible" :title="$t('dialog.change_log.header')" width="800px")
                .changelog-dialog(v-if="changeLogDialog.visible")
                    h2(v-text="changeLogDialog.buildName")
                    span {{ $t('dialog.change_log.description') }} #[a.x-link(@click="openExternalLink('https://www.patreon.com/Natsumi_VRCX')") Patreon], #[a.x-link(@click="openExternalLink('https://ko-fi.com/natsumi_sama')") Ko-fi].
                    vue-markdown(:source="changeLogDialog.changeLog" :linkify="false")
                template(#footer)
                    el-button(type="small" @click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')") {{ $t('dialog.change_log.github') }}
                    el-button(type="small" @click="openExternalLink('https://patreon.com/Natsumi_VRCX')") {{ $t('dialog.change_log.donate') }}
                    el-button(type="small" @click="changeLogDialog.visible = false") {{ $t('dialog.change_log.close') }}

            //- dialog: gallery select
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="gallerySelectDialog" :visible.sync="gallerySelectDialog.visible" :title="$t('dialog.gallery_select.header')" width="100%")
                div(v-if="gallerySelectDialog.visible")
                    span(slot="label") {{ $t('dialog.gallery_select.gallery') }}
                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ galleryTable.length }}/64
                    br
                    input(type="file" accept="image/*" @change="onFileChangeGallery" id="GalleryUploadButton" style="display:none")
                    el-button-group
                        el-button(type="default" size="small" @click="selectImageGallerySelect('', '')" icon="el-icon-close") {{ $t('dialog.gallery_select.none') }}
                        el-button(type="default" size="small" @click="refreshGalleryTable" icon="el-icon-refresh") {{ $t('dialog.gallery_select.refresh') }}
                        el-button(type="default" size="small" @click="displayGalleryUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") {{ $t('dialog.gallery_select.upload') }}
                    br
                    .x-friend-item(v-if="image.versions && image.versions.length > 0" v-for="image in galleryTable" :key="image.id" style="display:inline-block;margin-top:10px;width:unset;cursor:default")
                        .vrcplus-icon(v-if="image.versions[image.versions.length - 1].file.url" @click="selectImageGallerySelect(image.versions[image.versions.length - 1].file.url, image.id)")
                            img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")

            //- dialog: open source software notice
            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" :visible.sync="ossDialog" :title="$t('dialog.open_source.header')" width="650px")
                div(v-if="ossDialog" style="height:350px;overflow:hidden scroll;word-break:break-all")
                    div
                        span {{ $t('dialog.open_source.description') }}
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") animate.css
                        pre(style="font-size:12px;white-space:pre-line").
                            The MIT License (MIT)

                            Copyright (c) 2019 Daniel Eden

                            Permission is hereby granted, free of charge, to any person obtaining a copy
                            of this software and associated documentation files (the "Software"), to deal
                            in the Software without restriction, including without limitation the rights
                            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
                            copies of the Software, and to permit persons to whom the Software is
                            furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in all
                            copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
                            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
                            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
                            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
                            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
                            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
                            SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") CefSharp
                        pre(style="font-size:12px;white-space:pre-line").
                            // Copyright © The CefSharp Authors. All rights reserved.
                            //
                            // Redistribution and use in source and binary forms, with or without
                            // modification, are permitted provided that the following conditions are
                            // met:
                            //
                            //    * Redistributions of source code must retain the above copyright
                            //      notice, this list of conditions and the following disclaimer.
                            //
                            //    * Redistributions in binary form must reproduce the above
                            //      copyright notice, this list of conditions and the following disclaimer
                            //      in the documentation and/or other materials provided with the
                            //      distribution.
                            //
                            //    * Neither the name of Google Inc. nor the name Chromium Embedded
                            //      Framework nor the name CefSharp nor the names of its contributors
                            //      may be used to endorse or promote products derived from this software
                            //      without specific prior written permission.
                            //
                            // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
                            // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
                            // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
                            // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
                            // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
                            // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
                            // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
                            // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
                            // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
                            // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
                            // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") DiscordRichPresence
                        pre(style="font-size:12px;white-space:pre-line").
                            MIT License

                            Copyright (c) 2018 Lachee

                            Permission is hereby granted, free of charge, to any person obtaining a copy
                            of this software and associated documentation files (the "Software"), to deal
                            in the Software without restriction, including without limitation the rights
                            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
                            copies of the Software, and to permit persons to whom the Software is
                            furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in all
                            copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
                            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
                            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
                            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
                            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
                            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
                            SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") element
                        pre(style="font-size:12px;white-space:pre-line").
                            The MIT License (MIT)

                            Copyright (c) 2016-present ElemeFE

                            Permission is hereby granted, free of charge, to any person obtaining a copy
                            of this software and associated documentation files (the "Software"), to deal
                            in the Software without restriction, including without limitation the rights
                            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
                            copies of the Software, and to permit persons to whom the Software is
                            furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in all
                            copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
                            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
                            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
                            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
                            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
                            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
                            SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") librsync.net
                        pre(style="font-size:12px;white-space:pre-line").
                            The MIT License (MIT)

                            Copyright (c) 2015 Brad Dodson

                            Permission is hereby granted, free of charge, to any person obtaining a copy
                            of this software and associated documentation files (the "Software"), to deal
                            in the Software without restriction, including without limitation the rights
                            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
                            copies of the Software, and to permit persons to whom the Software is
                            furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in all
                            copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
                            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
                            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
                            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
                            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
                            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
                            SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") Newtonsoft.Json
                        pre(style="font-size:12px;white-space:pre-line").
                            The MIT License (MIT)

                            Copyright (c) 2007 James Newton-King

                            Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") normalize
                        pre(style="font-size:12px;white-space:pre-line").
                            The MIT License (MIT)

                            Copyright © Nicolas Gallagher and Jonathan Neal

                            Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") noty
                        pre(style="font-size:12px;white-space:pre-line").
                            Copyright (c) 2012 Nedim Arabacı

                            Permission is hereby granted, free of charge, to any person obtaining
                            a copy of this software and associated documentation files (the
                            "Software"), to deal in the Software without restriction, including
                            without limitation the rights to use, copy, modify, merge, publish,
                            distribute, sublicense, and/or sell copies of the Software, and to
                            permit persons to whom the Software is furnished to do so, subject to
                            the following conditions:

                            The above copyright notice and this permission notice shall be
                            included in all copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
                            EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
                            MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
                            NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
                            LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
                            OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
                            WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") OpenVR SDK
                        pre(style="font-size:12px;white-space:pre-line").
                            Copyright (c) 2015, Valve Corporation
                            All rights reserved.

                            Redistribution and use in source and binary forms, with or without modification,
                            are permitted provided that the following conditions are met:

                            1. Redistributions of source code must retain the above copyright notice, this
                            list of conditions and the following disclaimer.

                            2. Redistributions in binary form must reproduce the above copyright notice,
                            this list of conditions and the following disclaimer in the documentation and/or
                            other materials provided with the distribution.

                            3. Neither the name of the copyright holder nor the names of its contributors
                            may be used to endorse or promote products derived from this software without
                            specific prior written permission.

                            THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
                            ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
                            WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
                            DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
                            ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
                            (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
                            LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
                            ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
                            (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
                            SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") Twemoji
                        pre(style="font-size:12px;white-space:pre-line").
                            MIT License

                            Copyright (c) 2021 Twitter

                            Permission is hereby granted, free of charge, to any person obtaining a copy
                            of this software and associated documentation files (the "Software"), to deal
                            in the Software without restriction, including without limitation the rights
                            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
                            copies of the Software, and to permit persons to whom the Software is
                            furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in all
                            copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
                            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
                            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
                            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
                            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
                            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
                            SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") SharpDX
                        pre(style="font-size:12px;white-space:pre-line").
                            Copyright (c) 2010-2014 SharpDX - Alexandre Mutel

                            Permission is hereby granted, free of charge, to any person obtaining a copy
                            of this software and associated documentation files (the "Software"), to deal
                            in the Software without restriction, including without limitation the rights
                            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
                            copies of the Software, and to permit persons to whom the Software is
                            furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in
                            all copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
                            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
                            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
                            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
                            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
                            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
                            THE SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") vue
                        pre(style="font-size:12px;white-space:pre-line").
                            The MIT License (MIT)

                            Copyright (c) 2013-present, Yuxi (Evan) You

                            Permission is hereby granted, free of charge, to any person obtaining a copy
                            of this software and associated documentation files (the "Software"), to deal
                            in the Software without restriction, including without limitation the rights
                            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
                            copies of the Software, and to permit persons to whom the Software is
                            furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in
                            all copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
                            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
                            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
                            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
                            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
                            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
                            THE SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") vue-data-tables
                        pre(style="font-size:12px;white-space:pre-line").
                            The MIT License (MIT)

                            Copyright (c) 2018 Leon Zhang

                            Permission is hereby granted, free of charge, to any person obtaining a copy
                            of this software and associated documentation files (the "Software"), to deal
                            in the Software without restriction, including without limitation the rights
                            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
                            copies of the Software, and to permit persons to whom the Software is
                            furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in all
                            copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
                            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
                            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
                            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
                            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
                            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
                            SOFTWARE.
                    div(style="margin-top:15px")
                        p(style="font-weight:bold") vue-lazyload
                        pre(style="font-size:12px;white-space:pre-line").
                            The MIT License (MIT)

                            Copyright (c) 2016 Awe

                            Permission is hereby granted, free of charge, to any person obtaining a copy
                            of this software and associated documentation files (the "Software"), to deal
                            in the Software without restriction, including without limitation the rights
                            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
                            copies of the Software, and to permit persons to whom the Software is
                            furnished to do so, subject to the following conditions:

                            The above copyright notice and this permission notice shall be included in all
                            copies or substantial portions of the Software.

                            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
                            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
                            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
                            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
                            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
                            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
                            SOFTWARE.

            //- dialog: Enable primary password
            el-dialog.x-dialog(
                :visible.sync="enablePrimaryPasswordDialog.visible"
                :before-close="enablePrimaryPasswordDialog.beforeClose"
                ref="primaryPasswordDialog"
                :close-on-click-modal="false"
                :title="$t('dialog.primary_password.header')"
                width="400px"
            )
                el-input(
                    v-model="enablePrimaryPasswordDialog.password"
                    :placeholder="$t('dialog.primary_password.password_placeholder')"
                    type="password"
                    size="mini"
                    maxlength="32"
                    show-password
                    autofocus
                )
                el-input(
                    v-model="enablePrimaryPasswordDialog.rePassword"
                    :placeholder="$t('dialog.primary_password.re_input_placeholder')"
                    type="password"
                    style="margin-top:5px"
                    size="mini"
                    maxlength="32"
                    show-password
                )
                template(#footer)
                    el-button(
                        type="primary" size="small" @click="setPrimaryPassword"
                        :disabled="enablePrimaryPasswordDialog.password.length===0||enablePrimaryPasswordDialog.password!==enablePrimaryPasswordDialog.rePassword"
                    ) {{ $t('dialog.primary_password.ok') }}
        script(src="vendor.js")
        script(src="app.js")
