
mixin friendsListSidebar()
    .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.isFriend")
                                span.extra(v-else-if="item.ref.state === 'offline'") {{ $t('side_panel.search_result_active') }}
                                span.extra(v-else-if="item.ref.state === 'active'") {{ $t('side_panel.search_result_offline') }}
                                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') }}
                    span(style="color:#909399;font-size:12px;margin-left:10px") ({{ onlineFriendCount }}/{{ friends.size }})
                .x-friend-list(style="padding:10px 5px")
                    .x-friend-group.x-link(@click="isFriendsGroupMe = !isFriendsGroupMe; saveFriendsGroupStates()" 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 && !gameLogDisabled" :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="isVIPFriends = !isVIPFriends; saveFriendsGroupStates()" v-show="vipFriends.length")
                        i.el-icon-arrow-right(:class="{ rotate: isVIPFriends }")
                        span(style="margin-left:5px") {{ $t('side_panel.favorite') }} &horbar; {{ vipFriends.length }}
                    div(v-show="isVIPFriends")
                        .x-friend-item(v-for="friend in vipFriends" :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="!hideNicknames && 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="isOnlineFriends = !isOnlineFriends; saveFriendsGroupStates()" v-show="onlineFriends.length")
                        i.el-icon-arrow-right(:class="{ rotate: isOnlineFriends }")
                        span(style="margin-left:5px") {{ $t('side_panel.online') }} &horbar; {{ onlineFriends.length }}
                    div(v-show="isOnlineFriends")
                        .x-friend-item(v-for="friend in onlineFriends" :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="!hideNicknames && 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="isActiveFriends = !isActiveFriends; saveFriendsGroupStates()" v-show="activeFriends.length")
                        i.el-icon-arrow-right(:class="{ rotate: isActiveFriends }")
                        span(style="margin-left:5px") {{ $t('side_panel.active') }} &horbar; {{ activeFriends.length }}
                    div(v-show="isActiveFriends")
                        .x-friend-item(v-for="friend in activeFriends" :key="friend.id" @click="showUserDialog(friend.id)")
                            template(v-if="friend.ref")
                                .avatar
                                    img(v-lazy="userImage(friend.ref)")
                                .detail
                                    span.name(v-if="!hideNicknames && 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="isOfflineFriends = !isOfflineFriends; saveFriendsGroupStates()" v-show="offlineFriends.length")
                        i.el-icon-arrow-right(:class="{ rotate: isOfflineFriends }")
                        span(style="margin-left:5px") {{ $t('side_panel.offline') }} &horbar; {{ offlineFriends.length }}
                    div(v-show="isOfflineFriends")
                        .x-friend-item(v-for="friend in offlineFriends" :key="friend.id" @click="showUserDialog(friend.id)")
                            template(v-if="friend.ref")
                                .avatar
                                    img(v-lazy="userImage(friend.ref)")
                                .detail
                                    span.name(v-if="!hideNicknames && 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') }}
                    span(style="color:#909399;font-size:12px;margin-left:10px") ({{ groupInstances.length }})
                .x-friend-list(style="padding:10px 5px")
                    .x-friend-item(v-for="ref in groupInstances" :key="ref.instance.id" @click="showGroupDialog(ref.instance.ownerId)")
                        .avatar
                            img(v-lazy="ref.group.iconUrl")
                        .detail
                            span.name
                                span(v-text="ref.group.name")
                                span(style="font-weight:normal;margin-left:5px") ({{ ref.instance.userCount }}/{{ ref.instance.capacity }})
                            location.extra(:location="ref.instance.location" :link="false")
