mixin profileTab()
    .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'profile'" v-if="$refs.menu && $refs.menu.activeIndex === 'profile'")
        div.options-container(style="margin-top:0")
            span.header {{ $t('view.profile.profile.header') }}
            .x-friend-list(style="margin-top:10px")
                .x-friend-item(@click="showUserDialog(API.currentUser.id)")
                    .avatar
                        img(v-lazy="userImage(API.currentUser)")
                    .detail
                        span.name(v-text="API.currentUser.displayName")
                        span.extra(v-text="API.currentUser.username")
                .x-friend-item(style="cursor:default")
                    .detail
                        span.name {{ $t('view.profile.profile.last_activity') }}
                        span.extra {{ API.currentUser.last_activity | formatDate('long') }}
                .x-friend-item(style="cursor:default")
                    .detail
                        span.name {{ $t('view.profile.profile.two_factor') }}
                        span.extra {{ API.currentUser.twoFactorAuthEnabled ? $t('view.profile.profile.two_factor_enabled') : $t('view.profile.profile.two_factor_disabled') }}
            div
                el-button(size="small" icon="el-icon-switch-button" @click="logout()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.logout') }}
                el-button(size="small" icon="el-icon-printer" @click="showExportFriendsListDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.export_friend_list') }}
                el-button(size="small" icon="el-icon-user" @click="showExportAvatarsListDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.export_own_avatars') }}
                el-button(size="small" icon="el-icon-chat-dot-round" @click="showDiscordNamesDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.discord_names') }}
                el-button(size="small" icon="el-icon-document-copy" @click="showNoteExportDialog()" style="margin-left:0;margin-right:5px;margin-top:10px") {{ $t('view.profile.profile.export_notes') }}
        div.options-container
            span.header {{ $t('view.profile.game_info.header') }}
            .x-friend-list(style="margin-top:10px")
                .x-friend-item
                    .detail(@click="API.getVisits()")
                        span.name {{ $t('view.profile.game_info.online_users') }}
                        span.extra(v-if="visits") {{ $t('view.profile.game_info.user_online', { count: visits }) }}
                        span.extra(v-else) {{ $t('view.profile.game_info.refresh') }}
        div.options-container
            span.header {{ $t('view.profile.vrc_sdk_downloads.header') }}
            el-tooltip(placement="top" :content="$t('view.profile.refresh_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="API.getConfig()" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")
            .x-friend-list(style="margin-top:10px")
                .x-friend-item(v-for="(link, item) in API.cachedConfig.downloadUrls" :key="item" placement="top")
                    .detail(@click="openExternalLink(link)")
                        span.name(v-text="item")
                        span.extra(v-text="link")
        div.options-container
            span.header {{ $t('view.profile.direct_access.header') }}
            div(style="margin-top:10px")
                el-button-group
                    el-button(size="small" @click="promptUsernameDialog()") {{ $t('view.profile.direct_access.username') }}
                    el-button(size="small" @click="promptUserIdDialog()") {{ $t('view.profile.direct_access.user_id') }}
                    el-button(size="small" @click="promptWorldDialog()") {{ $t('view.profile.direct_access.world_instance') }}
                    el-button(size="small" @click="promptAvatarDialog()") {{ $t('view.profile.direct_access.avatar') }}
        div.options-container
            span.header {{ $t('view.profile.invite_messages') }}
            el-tooltip(placement="top" :content="$t('view.profile.refresh_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="inviteMessageTable.visible = true; refreshInviteMessageTable('message')" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")
            el-tooltip(placement="top" :content="$t('view.profile.clear_results_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="inviteMessageTable.visible = false" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
            data-tables(v-if="inviteMessageTable.visible" v-bind="inviteMessageTable" style="margin-top:10px")
                el-table-column(label="Slot" prop="slot" sortable="custom" width="70")
                el-table-column(label="Message" prop="message")
                el-table-column(label="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="Action" width="60" align="right")
                    template(v-once #default="scope")
                        el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditInviteMessageDialog('message', scope.row)")
        div.options-container
            span.header {{ $t('view.profile.invite_response_messages') }}
            el-tooltip(placement="top" :content="$t('view.profile.refresh_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="inviteResponseMessageTable.visible = true; refreshInviteMessageTable('response')" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")
            el-tooltip(placement="top" :content="$t('view.profile.clear_results_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="inviteResponseMessageTable.visible = false" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
            data-tables(v-if="inviteResponseMessageTable.visible" v-bind="inviteResponseMessageTable" style="margin-top:10px")
                el-table-column(label="Slot" prop="slot" sortable="custom" width="70")
                el-table-column(label="Message" prop="message")
                el-table-column(label="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="Action" width="60" align="right")
                    template(v-once #default="scope")
                        el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditInviteMessageDialog('response', scope.row)")
        div.options-container
            span.header {{ $t('view.profile.invite_request_messages') }}
            el-tooltip(placement="top" :content="$t('view.profile.refresh_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="inviteRequestMessageTable.visible = true; refreshInviteMessageTable('request')" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")
            el-tooltip(placement="top" :content="$t('view.profile.clear_results_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="inviteRequestMessageTable.visible = false" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
            data-tables(v-if="inviteRequestMessageTable.visible" v-bind="inviteRequestMessageTable" style="margin-top:10px")
                el-table-column(label="Slot" prop="slot" sortable="custom" width="70")
                el-table-column(label="Message" prop="message")
                el-table-column(label="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="Action" width="60" align="right")
                    template(v-once #default="scope")
                        el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditInviteMessageDialog('request', scope.row)")
        div.options-container
            span.header {{ $t('view.profile.invite_request_response_messages') }}
            el-tooltip(placement="top" :content="$t('view.profile.refresh_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="inviteRequestResponseMessageTable.visible = true; refreshInviteMessageTable('requestResponse')" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")
            el-tooltip(placement="top" :content="$t('view.profile.clear_results_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="inviteRequestResponseMessageTable.visible = false" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
            data-tables(v-if="inviteRequestResponseMessageTable.visible" v-bind="inviteRequestResponseMessageTable" style="margin-top:10px")
                el-table-column(label="Slot" prop="slot" sortable="custom" width="70")
                el-table-column(label="Message" prop="message")
                el-table-column(label="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="Action" width="60" align="right")
                    template(v-once #default="scope")
                        el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditInviteMessageDialog('requestResponse', scope.row)")
        div.options-container
            span.header {{ $t('view.profile.past_display_names') }}
            data-tables(v-bind="pastDisplayNameTable" style="margin-top:10px")
                el-table-column(label="Date" prop="updated_at" sortable="custom")
                    template(v-once #default="scope")
                        span {{ scope.row.updated_at | formatDate('long') }}
                el-table-column(label="Name" prop="displayName")
        div.options-container
            span.header {{ $t('view.profile.config_json') }}
            el-tooltip(placement="top" :content="$t('view.profile.refresh_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="refreshConfigTreeData()" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")
            el-tooltip(placement="top" :content="$t('view.profile.clear_results_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="configTreeData = []" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
            el-tree(v-if="configTreeData.length > 0" :data="configTreeData" style="margin-top:10px;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")
        div.options-container
            span.header {{ $t('view.profile.current_user_json') }}
            el-tooltip(placement="top" :content="$t('view.profile.refresh_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="refreshCurrentUserTreeData()" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")
            el-tooltip(placement="top" :content="$t('view.profile.clear_results_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="currentUserTreeData = []" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
            el-tree(v-if="currentUserTreeData.length > 0" :data="currentUserTreeData" style="margin-top:10px;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")
        div.options-container
            span.header {{ $t('view.profile.feedback') }}
            el-tooltip(placement="top" :content="$t('view.profile.refresh_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="getCurrentUserFeedback()" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")
            el-tooltip(placement="top" :content="$t('view.profile.clear_results_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="currentUserFeedbackData = []" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
            el-tree(v-if="currentUserFeedbackData.length > 0" :data="currentUserFeedbackData" style="margin-top:10px;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")