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(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(v-if="friendsListBulkUnfriendMode" width="55" prop="$selected") template(v-once #default="scope") el-button(type="text" size="mini" @click.stop) el-checkbox(v-model="scope.row.$selected") 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") {{ scope.row.$timeSpent | timeToText }} 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)")