mixin playerListTab()
    .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'playerList'")
        div(style="display:flex;flex-direction:column;height:100%")
            div(v-if="currentInstanceWorld.ref.id" style="display:flex")
                el-popover(placement="right" width="500px" trigger="click" style="height:120px")
                    img.x-link(slot="reference" v-lazy="currentInstanceWorld.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:4px")
                    img.x-link(v-lazy="currentInstanceWorld.ref.imageUrl" style="width:500px;height:375px" @click="downloadAndSaveImage(currentInstanceWorld.ref.imageUrl)")
                div(style="margin-left:10px;display:flex;flex-direction:column;min-width:320px;width:100%")
                    div
                        span.x-link(@click="showWorldDialog(currentInstanceWorld.ref.id)" style="font-weight:bold;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1")
                            | #[i.el-icon-s-home(v-show="API.currentUser.$homeLocation && API.currentUser.$homeLocation.worldId === currentInstanceWorld.ref.id" style="margin-right:5px")] {{ currentInstanceWorld.ref.name }}
                    div
                        span.x-link(v-text="currentInstanceWorld.ref.authorName" @click="showUserDialog(currentInstanceWorld.ref.authorId)" style="color:#909399;font-family:monospace")
                    div(style="margin-top:5px")
                        el-tag(v-if="currentInstanceWorld.ref.$isLabs" type="primary" effect="plain" size="mini" style="margin-right:5px") {{ $t('dialog.world.tags.labs') }}
                        el-tag(v-else-if="currentInstanceWorld.ref.releaseStatus === 'public'" type="success" effect="plain" size="mini" style="margin-right:5px") {{ $t('dialog.world.tags.public') }}
                        el-tag(v-else-if="currentInstanceWorld.ref.releaseStatus === 'private'" type="danger" effect="plain" size="mini" style="margin-right:5px") {{ $t('dialog.world.tags.private') }}
                        el-tag.x-tag-platform-pc(v-if="currentInstanceWorld.isPC" type="info" effect="plain" size="mini" style="margin-right:5px") PC
                        el-tag.x-tag-platform-quest(v-if="currentInstanceWorld.isQuest" type="info" effect="plain" size="mini" style="margin-right:5px") Quest
                        el-tag.x-tag-platform-ios(v-if="currentInstanceWorld.isIOS" type="info" effect="plain" size="mini" style="margin-right:5px") iOS
                        el-tag(type="info" effect="plain" size="mini" v-text="currentInstanceWorld.fileSize" style="margin-right:5px")
                        el-tag(v-if="currentInstanceWorld.inCache" type="info" effect="plain" size="mini" style="margin-right:5px")
                            span(v-text="currentInstanceWorld.cacheSize")
                            |  {{ $t('dialog.world.tags.cache') }}
                        br
                        location-world(:locationobject="currentInstanceLocation" :currentuserid="API.currentUser.id")
                        span(v-if="lastLocation.playerList.size > 0" style="margin-left:5px")
                            | {{ lastLocation.playerList.size }}
                            | #[template(v-if="lastLocation.friendList.size > 0") ({{ lastLocation.friendList.size }})]
                        | &nbsp;#[timer(v-if="lastLocation.date" :epoch="lastLocation.date")]
                    div(style="margin-top:5px")
                        span(v-show="currentInstanceWorld.ref.name !== currentInstanceWorld.ref.description" v-text="currentInstanceWorld.ref.description" style="font-size:12px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2")
                div(style="display:flex;flex-direction:column;margin-left:20px")
                    .x-friend-item(style="cursor:default")
                        .detail
                            span.name {{ $t('dialog.world.info.capacity') }}
                            span.extra {{ currentInstanceWorld.ref.capacity | commaNumber }} ({{ currentInstanceWorld.ref.capacity * 2 | commaNumber }})
                    .x-friend-item(style="cursor:default")
                        .detail
                            span.name {{ $t('dialog.world.info.last_updated') }}
                            span.extra {{ currentInstanceWorld.fileCreatedAt | formatDate('long') }}
                    .x-friend-item(style="cursor:default")
                        .detail
                            span.name {{ $t('dialog.world.info.created_at') }}
                            span.extra {{ currentInstanceWorld.ref.created_at | formatDate('long') }}
            div.photon-event-table(v-if="photonLoggingEnabled")
                div(style="position:absolute;width:600px;margin-left:195px;z-index:1")
                    el-select(v-model="photonEventTableTypeFilter" @change="photonEventTableFilterChange" multiple clearable collapse-tags style="flex:1;width:220px" :placeholder="$t('view.player_list.photon.filter_placeholder')")
                        el-option(v-once v-for="type in photonEventTableTypeFilterList" :key="type" :label="type" :value="type")
                    el-input(v-model="photonEventTableFilter" @input="photonEventTableFilterChange" :placeholder="$t('view.player_list.photon.search_placeholder')" clearable style="width:150px;margin-left:10px")
                    el-button(@click="showChatboxBlacklistDialog" style="margin-left:10px") {{ $t('view.player_list.photon.chatbox_blacklist') }}
                    el-tooltip(placement="bottom" :content="$t('view.player_list.photon.status_tooltip')" :disabled="hideTooltips")
                        div(style="display:inline-block;margin-left:15px;font-size:14px;vertical-align:text-top;margin-top:1px")
                            span(v-if="ipcEnabled && !photonEventIcon") 🟢
                            span(v-else-if="ipcEnabled") ⚪
                            span(v-else) 🔴
                el-tabs(type="card")
                    el-tab-pane(:label="$t('view.player_list.photon.current')")
                        data-tables(v-bind="photonEventTable" style="margin-bottom:10px")
                            el-table-column(:label="$t('table.playerList.date')" prop="created_at" width="120")
                                template(v-once #default="scope")
                                    el-tooltip(placement="right")
                                        template(#content)
                                            span {{ scope.row.created_at | formatDate('long') }}
                                        span {{ scope.row.created_at | formatDate('short') }}
                            el-table-column(:label="$t('table.playerList.user')" prop="photonId" width="160")
                                template(v-once #default="scope")
                                    span.x-link(v-text="scope.row.displayName" @click="showUserFromPhotonId(scope.row.photonId)" style="padding-right:10px")
                            el-table-column(:label="$t('table.playerList.type')" prop="type" width="140")
                            el-table-column(:label="$t('table.playerList.detail')" prop="text")
                                template(v-once #default="scope")
                                    template(v-if="scope.row.type === 'ChangeAvatar'")
                                        span.x-link(v-text="scope.row.avatar.name" @click="showAvatarDialog(scope.row.avatar.id)")
                                        | &nbsp;
                                        span(v-if="!scope.row.inCache" style="color:#aaa") #[i.el-icon-download]&nbsp;
                                        span.avatar-info-public(v-if="scope.row.avatar.releaseStatus === 'public'") {{ $t('dialog.avatar.labels.public') }}
                                        span.avatar-info-own(v-else-if="scope.row.avatar.releaseStatus === 'private'") {{ $t('dialog.avatar.labels.private') }}
                                        template(v-if="scope.row.avatar.description && scope.row.avatar.name !== scope.row.avatar.description")
                                            |  - {{ scope.row.avatar.description }}
                                    template(v-else-if="scope.row.type === 'ChangeStatus'")
                                        template(v-if="scope.row.status !== scope.row.previousStatus")
                                            el-tooltip(placement="top")
                                                template(#content)
                                                    span(v-if="scope.row.previousStatus === 'active'") {{ $t('dialog.user.status.active') }}
                                                    span(v-else-if="scope.row.previousStatus === 'join me'") {{ $t('dialog.user.status.join_me') }}
                                                    span(v-else-if="scope.row.previousStatus === 'ask me'") {{ $t('dialog.user.status.ask_me') }}
                                                    span(v-else-if="scope.row.previousStatus === 'busy'") {{ $t('dialog.user.status.busy') }}
                                                    span(v-else) {{ $t('dialog.user.status.offline') }}
                                                i.x-user-status(:class="statusClass(scope.row.previousStatus)")
                                            span
                                                i.el-icon-right
                                            el-tooltip(placement="top")
                                                template(#content)
                                                    span(v-if="scope.row.status === 'active'") Active
                                                    span(v-else-if="scope.row.status === 'join me'") Join Me
                                                    span(v-else-if="scope.row.status === 'ask me'") Ask Me
                                                    span(v-else-if="scope.row.status === 'busy'") Do Not Disturb
                                                    span(v-else) Offline
                                                i.x-user-status(:class="statusClass(scope.row.status)" style="margin-right:5px")
                                        span(v-if="scope.row.statusDescription !== scope.row.previousStatusDescription" v-text="scope.row.statusDescription")
                                    template(v-else-if="scope.row.type === 'ChangeGroup'")
                                        span.x-link(v-if="scope.row.previousGroupName" v-text="scope.row.previousGroupName" @click="showGroupDialog(scope.row.previousGroupId)" style="margin-right:5px")
                                        span.x-link(v-else v-text="scope.row.previousGroupId" @click="showGroupDialog(scope.row.previousGroupId)" style="margin-right:5px")
                                        span
                                            i.el-icon-right
                                        span.x-link(v-if="scope.row.groupName" v-text="scope.row.groupName" @click="showGroupDialog(scope.row.groupId)" style="margin-left:5px")
                                        span.x-link(v-else v-text="scope.row.groupId" @click="showGroupDialog(scope.row.groupId)" style="margin-left:5px")
                                    span.x-link(v-else-if="scope.row.type === 'PortalSpawn'" @click="showWorldDialog(scope.row.location, scope.row.shortName)")
                                        location(:location="scope.row.location" :hint="scope.row.worldName" :grouphint="scope.row.groupName" :link="false")
                                    span(v-else-if="scope.row.type === 'ChatBoxMessage'" v-text="scope.row.text")
                                    span(v-else-if="scope.row.type === 'OnPlayerJoined'")
                                        span(v-if="scope.row.platform === 'Desktop'" style="color:#409eff") Desktop&nbsp;
                                        span(v-else-if="scope.row.platform === 'VR'" style="color:#409eff") VR&nbsp;
                                        span(v-else-if="scope.row.platform === 'Quest'" style="color:#67c23a") Quest&nbsp;
                                        span.x-link(v-text="scope.row.avatar.name" @click="showAvatarDialog(scope.row.avatar.id)")
                                        | &nbsp;
                                        span(v-if="!scope.row.inCache" style="color:#aaa") #[i.el-icon-download]&nbsp;
                                        span.avatar-info-public(v-if="scope.row.avatar.releaseStatus === 'public'") {{ $t('dialog.avatar.labels.public') }}
                                        span.avatar-info-own(v-else-if="scope.row.avatar.releaseStatus === 'private'") {{ $t('dialog.avatar.labels.private') }}
                                    span(v-else-if="scope.row.color === 'yellow'" v-text="scope.row.text" style="color:yellow")
                                    span(v-else v-text="scope.row.text")
                    el-tab-pane(:label="$t('view.player_list.photon.previous')")
                        data-tables(v-bind="photonEventTablePrevious" style="margin-bottom:10px")
                            el-table-column(:label="$t('table.playerList.date')" prop="created_at" width="120")
                                template(v-once #default="scope")
                                    el-tooltip(placement="right")
                                        template(#content)
                                            span {{ scope.row.created_at | formatDate('long') }}
                                        span {{ scope.row.created_at | formatDate('short') }}
                            el-table-column(:label="$t('table.playerList.user')" prop="photonId" width="160")
                                template(v-once #default="scope")
                                    span.x-link(v-text="scope.row.displayName" @click="lookupUser(scope.row)" style="padding-right:10px")
                            el-table-column(:label="$t('table.playerList.type')" prop="type" width="140")
                            el-table-column(:label="$t('table.playerList.detail')" prop="text")
                                template(v-once #default="scope")
                                    template(v-if="scope.row.type === 'ChangeAvatar'")
                                        span.x-link(v-text="scope.row.avatar.name" @click="showAvatarDialog(scope.row.avatar.id)")
                                        | &nbsp;
                                        span(v-if="!scope.row.inCache" style="color:#aaa") #[i.el-icon-download]&nbsp;
                                        span.avatar-info-public(v-if="scope.row.avatar.releaseStatus === 'public'") (Public)
                                        span.avatar-info-own(v-else-if="scope.row.avatar.releaseStatus === 'private'") (Private)
                                        template(v-if="scope.row.avatar.description && scope.row.avatar.name !== scope.row.avatar.description")
                                            |  - {{ scope.row.avatar.description }}
                                    template(v-else-if="scope.row.type === 'ChangeStatus'")
                                        template(v-if="scope.row.status !== scope.row.previousStatus")
                                            el-tooltip(placement="top")
                                                template(#content)
                                                    span(v-if="scope.row.previousStatus === 'active'") {{ $t('dialog.user.status.active') }}
                                                    span(v-else-if="scope.row.previousStatus === 'join me'") {{ $t('dialog.user.status.join_me') }}
                                                    span(v-else-if="scope.row.previousStatus === 'ask me'") {{ $t('dialog.user.status.ask_me') }}
                                                    span(v-else-if="scope.row.previousStatus === 'busy'") {{ $t('dialog.user.status.busy') }}
                                                    span(v-else) {{ $t('dialog.user.status.offline') }}
                                                i.x-user-status(:class="statusClass(scope.row.previousStatus)")
                                            span
                                                i.el-icon-right
                                            el-tooltip(placement="top")
                                                template(#content)
                                                    span(v-if="scope.row.status === 'active'") {{ $t('dialog.user.status.active') }}
                                                    span(v-else-if="scope.row.status === 'join me'") {{ $t('dialog.user.status.join_me') }}
                                                    span(v-else-if="scope.row.status === 'ask me'") {{ $t('dialog.user.status.ask_me') }}
                                                    span(v-else-if="scope.row.status === 'busy'") {{ $t('dialog.user.status.busy') }}
                                                    span(v-else) {{ $t('dialog.user.status.offline') }}
                                                i.x-user-status(:class="statusClass(scope.row.status)")
                                        span(v-if="scope.row.statusDescription !== scope.row.previousStatusDescription" v-text="scope.row.statusDescription" style="margin-left:5px")
                                    template(v-else-if="scope.row.type === 'ChangeGroup'")
                                        span.x-link(v-if="scope.row.previousGroupName" v-text="scope.row.previousGroupName" @click="showGroupDialog(scope.row.previousGroupId)" style="margin-right:5px")
                                        span.x-link(v-else v-text="scope.row.previousGroupId" @click="showGroupDialog(scope.row.previousGroupId)" style="margin-right:5px")
                                        span
                                            i.el-icon-right
                                        span.x-link(v-if="scope.row.groupName" v-text="scope.row.groupName" @click="showGroupDialog(scope.row.groupId)" style="margin-left:5px")
                                        span.x-link(v-else v-text="scope.row.groupId" @click="showGroupDialog(scope.row.groupId)" style="margin-left:5px")
                                    span.x-link(v-else-if="scope.row.type === 'PortalSpawn'" @click="showWorldDialog(scope.row.location, scope.row.shortName)")
                                        location(:location="scope.row.location" :hint="scope.row.worldName" :grouphint="scope.row.groupName" :link="false")
                                    span(v-else-if="scope.row.type === 'ChatBoxMessage'" v-text="scope.row.text")
                                    span(v-else-if="scope.row.type === 'OnPlayerJoined'")
                                        span(v-if="scope.row.platform === 'Desktop'" style="color:#409eff") Desktop&nbsp;
                                        span(v-else-if="scope.row.platform === 'VR'" style="color:#409eff") VR&nbsp;
                                        span(v-else-if="scope.row.platform === 'Quest'" style="color:#67c23a") Quest&nbsp;
                                        span.x-link(v-text="scope.row.avatar.name" @click="showAvatarDialog(scope.row.avatar.id)")
                                        | &nbsp;
                                        span(v-if="!scope.row.inCache" style="color:#aaa") #[i.el-icon-download]&nbsp;
                                        span.avatar-info-public(v-if="scope.row.avatar.releaseStatus === 'public'") (Public)
                                        span.avatar-info-own(v-else-if="scope.row.avatar.releaseStatus === 'private'") (Private)
                                    span(v-else-if="scope.row.color === 'yellow'" v-text="scope.row.text" style="color:yellow")
                                    span(v-else v-text="scope.row.text")
            div.current-instance-table
                data-tables(v-bind="currentInstanceUserList" @row-click="selectCurrentInstanceRow" style="margin-top:10px;cursor:pointer")
                    el-table-column(:label="$t('table.playerList.avatar')" width="70" prop="photo")
                        template(v-once #default="scope")
                            template(v-if="userImage(scope.row.ref)")
                                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.playerList.timer')" width="90" prop="timer" sortable)
                        template(v-once #default="scope")
                            timer(:epoch="scope.row.timer")
                    el-table-column(v-if="photonLoggingEnabled" :label="$t('table.playerList.photonId')" width="110" prop="photonId" sortable)
                        template(v-once #default="scope")
                            template(v-if="chatboxUserBlacklist.has(scope.row.ref.id)")
                                el-tooltip(placement="left" content="Unblock chatbox messages")
                                    el-button(type="text" icon="el-icon-turn-off-microphone" size="mini" style="color:red;margin-right:5px" @click.stop="deleteChatboxUserBlacklist(scope.row.ref.id)")
                            template(v-else)
                                el-tooltip(placement="left" content="Block chatbox messages")
                                    el-button(type="text" icon="el-icon-microphone" size="mini" style="margin-right:5px" @click.stop="addChatboxUserBlacklist(scope.row.ref)")
                            span(v-text="scope.row.photonId")
                    el-table-column(:label="$t('table.playerList.icon')" prop="isMaster" width="100")
                        template(v-once #default="scope")
                            el-tooltip(v-if="scope.row.isMaster" placement="left" content="Instance Master")
                                span 👑
                            el-tooltip(v-if="scope.row.isFriend" placement="left" content="Friend")
                                span 💚
                            el-tooltip(v-if="scope.row.timeoutTime" placement="left" content="Timeout")
                                span(style="color:red") 🔴{{ scope.row.timeoutTime }}s
                    el-table-column(:label="$t('table.playerList.platform')" prop="inVRMode" width="80")
                        template(v-once #default="scope")
                            template(v-if="scope.row.ref.last_platform")
                                span(v-if="scope.row.ref.last_platform === 'standalonewindows'" style="color:#409eff") PC
                                span(v-else-if="scope.row.ref.last_platform === 'android'" style="color:#67c23a") Q
                                span(v-else-if="scope.row.ref.last_platform === 'ios'" style="color:#c7c7ce") iOS
                                span(v-else) {{ scope.row.ref.last_platform }}
                            template(v-if="scope.row.inVRMode !== null")
                                span(v-if="scope.row.inVRMode") VR
                                span(v-else) D
                    el-table-column(:label="$t('table.playerList.displayName')" min-width="140" prop="displayName" sortable="custom")
                        template(v-once #default="scope")
                            span(v-if="randomUserColours" v-text="scope.row.ref.displayName" :style="{'color':scope.row.ref.$userColour}")
                            span(v-else v-text="scope.row.ref.displayName")
                    el-table-column(:label="$t('table.playerList.status')" min-width="180" prop="ref.status")
                        template(v-once #default="scope")
                            template(v-if="scope.row.ref.status")
                                i.x-user-status(:class="statusClass(scope.row.ref.status)")
                                span  ‎
                                span(v-text="scope.row.ref.statusDescription")
                    //- el-table-column(label="Group" min-width="180" prop="groupOnNameplate" sortable)
                    //-     template(v-once #default="scope")
                    //-         span(v-text="scope.row.groupOnNameplate")
                    el-table-column(:label="$t('table.playerList.rank')" width="110" prop="$trustSortNum" sortable="custom")
                        template(v-once #default="scope")
                            span.name(v-text="scope.row.ref.$trustLevel" :class="scope.row.ref.$trustClass")
                    el-table-column(:label="$t('table.playerList.language')" width="100" prop="ref.$languages")
                        template(v-once #default="scope")
                            el-tooltip(v-for="item in scope.row.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-left:5px")
                    el-table-column(:label="$t('table.playerList.bioLink')" width="100" prop="ref.bioLinks")
                        template(v-once #default="scope")
                            el-tooltip(v-if="link" v-for="(link, index) in scope.row.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)")
