mixin friendsListTab()
    .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'friendsList'" v-if="$refs.menu && $refs.menu.activeIndex === 'friendsList'")
        div.options-container(style="margin-top:0")
            span.header {{ $t('view.friend_list.header') }}
            div(style="float:right;font-size:13px")
                div(v-if="friendsListBulkUnfriendMode" style="display:inline-block;margin-right:10px")
                    el-button(size="small" @click="showBulkUnfriendSelectionConfirm") {{ $t('view.friend_list.bulk_unfriend_selection') }}
                    //- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All
                div(style="display:inline-block;margin-right:10px")
                    span.name {{ $t('view.friend_list.bulk_unfriend') }}
                    el-switch(@change="toggleFriendsListBulkUnfriendMode" v-model="friendsListBulkUnfriendMode" style="margin-left:5px")
                span {{ $t('view.friend_list.load') }}
                template(v-if="friendsListLoading")
                    span(v-text="friendsListLoadingProgress" style="margin-left:5px")
                    el-tooltip(placement="top" :content="$t('view.friend_list.cancel_tooltip')" :disabled="hideTooltips")
                        el-button(@click="friendsListLoading = false" size="mini" icon="el-icon-loading" circle style="margin-left:5px")
                template(v-else)
                    el-tooltip(placement="top" :content="$t('view.friend_list.load_tooltip')" :disabled="hideTooltips")
                        el-button(@click="friendsListLoadUsers" size="mini" icon="el-icon-refresh-left" circle style="margin-left:5px")
            div(style="margin:10px 0 0 10px;display:flex;align-items:center")
                div(style="flex:none;margin-right:10px")
                    el-tooltip(placement="bottom" :content="$t('view.friend_list.favorites_only_tooltip')" :disabled="hideTooltips")
                        el-switch(v-model="friendsListSearchFilterVIP" @change="friendsListSearchChange" active-color="#13ce66")
                el-input(v-model="friendsListSearch" :placeholder="$t('view.friend_list.search_placeholder')" @change="friendsListSearchChange" clearable style="flex:1")
                el-select(v-model="friendsListSearchFilters" multiple clearable collapse-tags style="flex:none;width:200px;margin:0 10px" @change="friendsListSearchChange" :placeholder="$t('view.friend_list.filter_placeholder')")
                    el-option(v-once v-for="type in ['Display Name', 'User Name', 'Rank', 'Status', 'Bio', 'Memo']" :key="type" :label="type" :value="type")
                el-tooltip(placement="top" :content="$t('view.friend_list.refresh_tooltip')" :disabled="hideTooltips")
                    el-button(type="default" @click="friendsListSearchChange" icon="el-icon-refresh" circle style="flex:none")
                el-tooltip(placement="top" :content="$t('view.friend_list.clear_tooltip')" :disabled="hideTooltips")
                    el-button(type="default" @click="friendsListTable.data = []" icon="el-icon-delete" circle style="flex:none;margin-left:5px")
            data-tables(v-bind="friendsListTable" @row-click="selectFriendsListRow" style="margin-top:10px;cursor:pointer")
                el-table-column(width="55" prop="$selected" v-if="friendsListBulkUnfriendMode" :key="friendsListBulkUnfriendForceUpdate")
                    template(v-once #default="scope")
                        el-button(type="text" size="mini" @click.stop)
                            el-checkbox(v-model="scope.row.$selected" @change="friendsListBulkUnfriendForceUpdate++")
                el-table-column(:label="$t('table.friendList.no')" width="70" prop="$friendNum" sortable="custom")
                el-table-column(:label="$t('table.friendList.avatar')" width="70" prop="photo")
                    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="showFullscreenImageDialog(userImageFull(scope.row))")
                el-table-column(:label="$t('table.friendList.displayName')" min-width="140" prop="displayName" sortable :sort-method="(a, b) => sortAlphabetically(a, b, 'displayName')")
                    template(v-once #default="scope")
                        span.name(v-if="randomUserColours" v-text="scope.row.displayName" :style="{'color':scope.row.$userColour}")
                        span.name(v-else v-text="scope.row.displayName")
                el-table-column(:label="$t('table.friendList.rank')" width="110" prop="$trustSortNum" sortable="custom")
                    template(v-once #default="scope")
                        span.name(v-if="randomUserColours" v-text="scope.row.$trustLevel" :class="scope.row.$trustClass")
                        span.name(v-else v-text="scope.row.$trustLevel" :style="{'color':scope.row.$userColour}")
                el-table-column(:label="$t('table.friendList.status')" min-width="180" prop="status" sortable :sort-method="(a, b) => sortStatus(a.status, b.status)")
                    template(v-once #default="scope")
                        i.x-user-status(v-if="scope.row.status !== 'offline'" :class="statusClass(scope.row.status)")
                        span  ‎
                        span(v-text="scope.row.statusDescription")
                el-table-column(:label="$t('table.friendList.language')" width="110" prop="$languages" sortable :sort-method="(a, b) => sortLanguages(a, b)")
                    template(v-once #default="scope")
                        el-tooltip(v-for="item in scope.row.$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.friendList.bioLink')" width="100" prop="bioLinks")
                    template(v-once #default="scope")
                        el-tooltip(v-if="link" v-for="(link, index) in scope.row.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)")
                el-table-column(:label="$t('table.friendList.joinCount')" width="120" prop="$joinCount" sortable)
                el-table-column(:label="$t('table.friendList.timeTogether')" width="140" prop="$timeSpent" sortable)
                    template(v-once #default="scope")
                        span(v-if="scope.row.$timeSpent") {{ timeToText(scope.row.$timeSpent) }}
                el-table-column(:label="$t('table.friendList.lastSeen')" width="170" prop="$lastSeen" sortable :sort-method="(a, b) => sortAlphabetically(a, b, '$lastSeen')")
                    template(v-once #default="scope")
                        span {{ scope.row.$lastSeen | formatDate('long') }}
                el-table-column(:label="$t('table.friendList.lastActivity')" width="170" prop="last_activity" sortable :sort-method="(a, b) => sortAlphabetically(a, b, 'last_activity')")
                    template(v-once #default="scope")
                        span {{ scope.row.last_activity | formatDate('long') }}
                el-table-column(:label="$t('table.friendList.lastLogin')" width="170" prop="last_login" sortable :sort-method="(a, b) => sortAlphabetically(a, b, 'last_login')")
                    template(v-once #default="scope")
                        span {{ scope.row.last_login | formatDate('long') }}
                el-table-column(:label="$t('table.friendList.dateJoined')" width="120" prop="date_joined" sortable :sort-method="(a, b) => sortAlphabetically(a, b, 'date_joined')")
                el-table-column(:label="$t('table.friendList.unfriend')" width="80")
                    template(v-once #default="scope")
                        el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(scope.row.id)")
