
mixin groupDialog()
    el-dialog.x-dialog.x-group-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="groupDialog" :visible.sync="groupDialog.visible" :show-close="false" width="770px")
        .group-banner-image
            el-popover(placement="right" width="500px" trigger="click")
                img.x-link(slot="reference" v-lazy="groupDialog.ref.bannerUrl" style="flex:none;width:100%;aspect-ratio:6/1;object-fit:cover;border-radius:4px")
                img.x-link(v-lazy="groupDialog.ref.bannerUrl" style="width:854px;height:480px" @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)")
        .group-body(v-loading="groupDialog.loading")
            div(style="display:flex")
                el-popover(placement="right" width="500px" trigger="click")
                    img.x-link(slot="reference" v-lazy="groupDialog.ref.iconUrl" style="flex:none;width:120px;height:120px;border-radius:12px")
                    img.x-link(v-lazy="groupDialog.ref.iconUrl" style="width:500px;height:500px" @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)")
                div(style="flex:1;display:flex;align-items:center;margin-left:15px")
                    .group-header(style="flex:1")
                        span(v-if="groupDialog.ref.ownerId === API.currentUser.id" style="margin-right:5px") 👑
                        span.dialog-title(v-text="groupDialog.ref.name" style="margin-right:5px")
                        span.group-discriminator.x-grey(style="font-family:monospace;font-size:12px;margin-right:5px") {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
                        el-tooltip(v-for="item in groupDialog.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-right:5px")
                        div(style="margin-top:5px")
                            span.x-link.x-grey(v-text="groupDialog.ownerDisplayName" @click="showUserDialog(groupDialog.ref.ownerId)" style="font-family:monospace")
                        .group-tags
                            el-tag(v-if="groupDialog.ref.isVerified" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.verified') }}

                            el-tag(v-if="groupDialog.ref.privacy === 'private'" type="danger" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.private') }}
                            el-tag(v-if="groupDialog.ref.privacy === 'default'" type="success" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.public') }}

                            el-tag(v-if="groupDialog.ref.joinState === 'open'" type="success" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.open') }}
                            el-tag(v-else-if="groupDialog.ref.joinState === 'request'" type="warning" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.request') }}
                            el-tag(v-else-if="groupDialog.ref.joinState === 'invite'" type="danger" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.invite') }}
                            el-tag(v-else-if="groupDialog.ref.joinState === 'closed'" type="danger" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.closed') }}

                            el-tag(v-if="groupDialog.inGroup" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.joined') }}
                            el-tag(v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt" type="danger" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.banned') }}

                            template(v-if="groupDialog.inGroup && groupDialog.ref.myMember")
                                el-tag(v-if="groupDialog.ref.myMember.visibility === 'visible'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.visible') }}
                                el-tag(v-else-if="groupDialog.ref.myMember.visibility === 'friends'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.friends') }}
                                el-tag(v-else-if="groupDialog.ref.myMember.visibility === 'hidden'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.hidden') }}
                                el-tag(v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.subscribed') }}

                        .group-description(style="margin-top:5px")
                            span(v-show="groupDialog.ref.name !== groupDialog.ref.description" v-text="groupDialog.ref.description" style="font-size:12px")
                    div(style="flex:none;margin-left:10px")
                        template(v-if="groupDialog.inGroup && groupDialog.ref?.myMember")
                            el-tooltip(v-if="groupDialog.ref.myMember?.isRepresenting" placement="top" :content="$t('dialog.group.actions.unrepresent_tooltip')" :disabled="hideTooltips")
                                el-button(type="warning" icon="el-icon-star-on" circle @click="clearGroupRepresentation(groupDialog.id)" style="margin-left:5px")
                            el-tooltip(v-else placement="top" :content="$t('dialog.group.actions.represent_tooltip')" :disabled="hideTooltips")
                                span
                                    el-button(type="default" icon="el-icon-star-off" circle @click="setGroupRepresentation(groupDialog.id)" style="margin-left:5px" :disabled="groupDialog.ref.privacy === 'private'")
                        template(v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'")
                            el-tooltip(placement="top" :content="$t('dialog.group.actions.cancel_join_request_tooltip')" :disabled="hideTooltips")
                                span
                                    el-button(type="default" icon="el-icon-close" circle @click="cancelGroupRequest(groupDialog.id)" style="margin-left:5px")
                        template(v-else-if="groupDialog.ref.myMember?.membershipStatus === 'invited'")
                            el-tooltip(placement="top" :content="$t('dialog.group.actions.pending_request_tooltip')" :disabled="hideTooltips")
                                span
                                    el-button(type="default" icon="el-icon-check" circle @click="joinGroup(groupDialog.id)" style="margin-left:5px")
                        template(v-else)
                            el-tooltip(v-if="groupDialog.ref.joinState === 'request'" placement="top" :content="$t('dialog.group.actions.request_join_tooltip')" :disabled="hideTooltips")
                                el-button(type="default" icon="el-icon-message" circle @click="joinGroup(groupDialog.id)" style="margin-left:5px")
                            el-tooltip(v-if="groupDialog.ref.joinState === 'invite'" placement="top" :content="$t('dialog.group.actions.invite_required_tooltip')" :disabled="hideTooltips")
                                span
                                    el-button(type="default" icon="el-icon-message" disabled circle style="margin-left:5px")
                            el-tooltip(v-if="groupDialog.ref.joinState === 'open'" placement="top" :content="$t('dialog.group.actions.join_group_tooltip')" :disabled="hideTooltips")
                                el-button(type="default" icon="el-icon-check" circle @click="joinGroup(groupDialog.id)" style="margin-left:5px")
                        el-dropdown(trigger="click" @command="groupDialogCommand" size="small" style="margin-left:5px")
                            el-button(:type="groupDialog.ref.membershipStatus === 'userblocked' ? 'danger' : 'default'" icon="el-icon-more" circle)
                            el-dropdown-menu(#default="dropdown")
                                el-dropdown-item(icon="el-icon-refresh" command="Refresh") {{ $t('dialog.group.actions.refresh') }}
                                template(v-if="groupDialog.inGroup")
                                    template(v-if="groupDialog.ref.myMember")
                                        el-dropdown-item(v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements" icon="el-icon-close" command="Unsubscribe To Announcements" divided) {{ $t('dialog.group.actions.unsubscribe') }}
                                        el-dropdown-item(v-else icon="el-icon-check" command="Subscribe To Announcements" divided) {{ $t('dialog.group.actions.subscribe') }}
                                        el-dropdown-item(v-if="hasGroupPermission(groupDialog.ref, 'group-invites-manage')" icon="el-icon-message" command="Invite To Group") {{ $t('dialog.group.actions.invite_to_group') }}
                                    template(v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')")
                                        el-dropdown-item(icon="el-icon-tickets" command="Create Post") {{ $t('dialog.group.actions.create_post') }}
                                    //- template(v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')")
                                    el-dropdown-item(icon="el-icon-s-operation" command="Moderation Tools") {{ $t('dialog.group.actions.moderation_tools') }}
                                    template(v-if="groupDialog.ref.myMember && groupDialog.ref.privacy === 'default'")
                                        el-dropdown-item(icon="el-icon-view" command="Visibility Everyone" divided) #[i.el-icon-check(v-if="groupDialog.ref.myMember.visibility === 'visible'")] {{ $t('dialog.group.actions.visibility_everyone') }}
                                        el-dropdown-item(icon="el-icon-view" command="Visibility Friends") #[i.el-icon-check(v-if="groupDialog.ref.myMember.visibility === 'friends'")] {{ $t('dialog.group.actions.visibility_friends') }}
                                        el-dropdown-item(icon="el-icon-view" command="Visibility Hidden") #[i.el-icon-check(v-if="groupDialog.ref.myMember.visibility === 'hidden'")] {{ $t('dialog.group.actions.visibility_hidden') }}
                                    el-dropdown-item(icon="el-icon-delete" command="Leave Group" style="color:#F56C6C" divided) {{ $t('dialog.group.actions.leave') }}
                                template(v-else)
                                    el-dropdown-item(v-if="groupDialog.ref.membershipStatus === 'userblocked'" icon="el-icon-circle-check" command="Unblock Group" style="color:#F56C6C" divided) {{ $t('dialog.group.actions.unblock') }}
                                    el-dropdown-item(v-else icon="el-icon-circle-close" command="Block Group" divided) {{ $t('dialog.group.actions.block') }}
            el-tabs(ref="groupDialogTabs" @tab-click="groupDialogTabClick")
                el-tab-pane(:label="$t('dialog.group.info.header')")
                    .group-banner-image-info
                        el-popover(placement="right" width="500px" trigger="click")
                            img.x-link(slot="reference" v-lazy="groupDialog.ref.bannerUrl" style="flex:none;width:100%;aspect-ratio:6/1;object-fit:cover;border-radius:4px")
                            img.x-link(v-lazy="groupDialog.ref.bannerUrl" style="width:854px;height:480px" @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)")
                    .x-friend-list(style="max-height:none")
                        span(v-if="groupDialog.instances.length" style="font-size:12px;font-weight:bold;margin:5px") {{ $t('dialog.group.info.instances') }}
                        div(v-for="room in groupDialog.instances" :key="room.tag" style="width:100%")
                            div(style="margin:5px 0")
                                location(:location="room.tag")
                                el-tooltip(placement="top" content="Invite yourself" :disabled="hideTooltips")
                                    invite-yourself(:location="room.tag" style="margin-left:5px")
                                el-tooltip(placement="top" content="Refresh player count" :disabled="hideTooltips")
                                    el-button(@click="refreshInstancePlayerCount(room.tag)" size="mini" icon="el-icon-refresh" style="margin-left:5px" circle)
                                last-join(:location="room.tag" :currentlocation="lastLocation.location")
                                instance-info(:location="room.tag" :instance="room.ref" :friendcount="room.friendCount" :updateelement="updateInstanceInfo")
                            .x-friend-list(style="margin:10px 0;padding:0;max-height:unset" v-if="room.users.length")
                                .x-friend-item(v-for="user in room.users" :key="user.id" @click="showUserDialog(user.id)" class="x-friend-item-border")
                                    .avatar(:class="userStatusClass(user)")
                                        img(v-lazy="userImage(user)")
                                    .detail
                                        span.name(v-text="user.displayName" :style="{'color':user.$userColour}")
                                        span.extra(v-if="user.location === 'traveling'")
                                            i.el-icon-loading(style="margin-right:5px")
                                            timer(:epoch="user.$travelingToTime")
                                        span.extra(v-else)
                                            timer(:epoch="user.$location_at")
                        .x-friend-item(style="width:100%;cursor:default")
                            .detail
                                span.name {{ $t('dialog.group.info.announcement') }}
                                span(style="display:block" v-text="groupDialog.announcement.title")
                                div(v-if="groupDialog.announcement.imageUrl" style="display:inline-block;margin-right:5px")
                                    el-popover(placement="right" width="500px" trigger="click")
                                        img.x-link(slot="reference" v-lazy="groupDialog.announcement.imageUrl" style="flex:none;width:60px;height:60px;border-radius:4px;object-fit:cover")
                                        img.x-link(v-lazy="groupDialog.announcement.imageUrl" style="height:500px" @click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)")
                                pre.extra(style="display:inline-block;vertical-align:top;font-family:inherit;font-size:12px;white-space:pre-wrap;margin:0") {{ groupDialog.announcement.text || '-' }}
                                br
                                .extra(v-if="groupDialog.announcement.id" style="float:right;margin-left:5px")
                                    el-tooltip(v-if="groupDialog.announcement.roleIds.length" placement="top")
                                        template(#content)
                                            span {{ $t('dialog.group.posts.visibility') }}
                                            br
                                            template(v-for="roleId in groupDialog.announcement.roleIds" :key="roleId")
                                                span(v-for="(role, rIndex) in groupDialog.ref.roles" :key="rIndex" v-if="role.id === roleId" v-text="role.name")
                                                span(v-if="groupDialog.announcement.roleIds.indexOf(roleId) < groupDialog.announcement.roleIds.length - 1") ,&nbsp;
                                        i.el-icon-view(style="margin-right:5px")
                                    display-name(:userid="groupDialog.announcement.authorId" style="margin-right:5px")
                                    span(v-if="groupDialog.announcement.editorId" style="margin-right:5px") ({{ $t('dialog.group.posts.edited_by') }} #[display-name(:userid="groupDialog.announcement.editorId")])
                                    el-tooltip(placement="bottom")
                                        template(#content)
                                            span {{ $t('dialog.group.posts.created_at') }} {{ groupDialog.announcement.createdAt | formatDate('long') }}
                                            template(v-if="groupDialog.announcement.updatedAt !== groupDialog.announcement.createdAt")
                                                br
                                                span {{ $t('dialog.group.posts.edited_at') }} {{ groupDialog.announcement.updatedAt | formatDate('long') }}
                                        timer(:epoch="Date.parse(groupDialog.announcement.updatedAt)")
                                    template(v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')")
                                        el-tooltip(placement="top" :content="$t('dialog.group.posts.edit_tooltip')" :disabled="hideTooltips")
                                            el-button(type="text" icon="el-icon-edit" size="mini" style="margin-left:5px" @click="showGroupPostEditDialog(groupDialog.id, groupDialog.announcement)")
                                        el-tooltip(placement="top" :content="$t('dialog.group.posts.delete_tooltip')" :disabled="hideTooltips")
                                            el-button(type="text" icon="el-icon-delete" size="mini" style="margin-left:5px" @click="confirmDeleteGroupPost(groupDialog.announcement)")
                        .x-friend-item(style="width:100%;cursor:default")
                            .detail
                                span.name {{ $t('dialog.group.info.rules') }}
                                pre.extra(style="font-family:inherit;font-size:12px;white-space:pre-wrap;margin:0 0.5em 0 0") {{ groupDialog.ref.rules || '-' }}
                        .x-friend-item(style="cursor:default")
                            .detail
                                span.name {{ $t('dialog.group.info.members') }}
                                .extra {{ groupDialog.ref.memberCount }} ({{ groupDialog.ref.onlineMemberCount }})
                        .x-friend-item(style="cursor:default")
                            .detail
                                span.name {{ $t('dialog.group.info.created_at') }}
                                span.extra {{ groupDialog.ref.createdAt | formatDate('long') }}
                        .x-friend-item(style="cursor:default")
                            .detail
                                span.name {{ $t('dialog.group.info.links') }}
                                div(v-if="groupDialog.ref.links && groupDialog.ref.links.length > 0" style="margin-top:5px")
                                    el-tooltip(v-if="link" v-for="(link, index) in groupDialog.ref.links" :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)")
                                .extra(v-else) -
                        .x-friend-item(style="width:350px;cursor:default")
                            .detail
                                span.name {{ $t('dialog.group.info.url') }}
                                span.extra {{ groupDialog.ref.$url }}
                                    el-tooltip(placement="top" :content="$t('dialog.group.info.url_tooltip')" :disabled="hideTooltips")
                                        el-button(type="default" @click="copyGroupUrl(groupDialog.ref.$url)" size="mini" icon="el-icon-s-order" circle style="margin-left:5px")
                        .x-friend-item(style="width:350px;cursor:default")
                            .detail
                                span.name {{ $t('dialog.group.info.id') }}
                                span.extra {{ groupDialog.id }}
                                    el-tooltip(placement="top" :content="$t('dialog.group.info.id_tooltip')" :disabled="hideTooltips")
                                        el-button(type="default" @click="copyGroupId(groupDialog.id)" size="mini" icon="el-icon-s-order" circle style="margin-left:5px")
                        div(v-if="groupDialog.ref.membershipStatus === 'member'" style="width:100%;margin-top:10px;border-top:1px solid #e4e7ed14")
                            div(style="width:100%;display:flex;margin-top:10px")
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.group.info.joined_at') }}
                                        span.extra {{ groupDialog.ref.myMember.joinedAt | formatDate('long') }}
                                .x-friend-item(style="cursor:default")
                                    .detail
                                        span.name {{ $t('dialog.group.info.roles') }}
                                        span.extra(v-if="groupDialog.memberRoles.length === 0") -
                                        span.extra(v-else)
                                            template(v-for="(role, rIndex) in groupDialog.memberRoles" :key="rIndex")
                                                el-tooltip(placement="top")
                                                    template(#content)
                                                        span {{ $t('dialog.group.info.role') }} {{ role.name }}
                                                        br
                                                        span {{ $t('dialog.group.info.role_description') }} {{ role.description }}
                                                        br
                                                        span(v-if="role.updatedAt") {{ $t('dialog.group.info.role_updated_at') }} {{ role.updatedAt | formatDate('long') }}
                                                        span(v-else) {{ $t('dialog.group.info.role_created_at') }} {{ role.createdAt | formatDate('long') }}
                                                        br
                                                        span {{ $t('dialog.group.info.role_permissions') }}
                                                        br
                                                        template(v-for="(permission, pIndex) in role.permissions" :key="pIndex")
                                                            span {{ permission }}
                                                            br
                                                    span {{ role.name }}{{ rIndex < groupDialog.memberRoles.length - 1 ? ', ' : '' }}
                el-tab-pane(:label="$t('dialog.group.posts.header')")
                    template(v-if="groupDialog.visible")
                        span(style="margin-right:10px") {{ $t('dialog.group.posts.posts_count') }} {{ groupDialog.posts.length }}
                        el-input(v-model="groupDialog.postsSearch" @input="updateGroupPostSearch" clearable size="mini" :placeholder="$t('dialog.group.posts.search_placeholder')" style="width:89%;margin-bottom:10px")
                        .x-friend-list
                            .x-friend-item(v-for="post in groupDialog.postsFiltered" :key="post.id" style="width:100%;cursor:default")
                                .detail
                                    span(style="display:block" v-text="post.title")
                                    div(v-if="post.imageUrl" style="display:inline-block;margin-right:5px")
                                        el-popover(placement="right" width="500px" trigger="click")
                                            img.x-link(slot="reference" v-lazy="post.imageUrl" style="flex:none;width:60px;height:60px;border-radius:4px;object-fit:cover")
                                            img.x-link(v-lazy="post.imageUrl" style="height:500px" @click="showFullscreenImageDialog(post.imageUrl)")
                                    pre.extra(style="display:inline-block;vertical-align:top;font-family:inherit;font-size:12px;white-space:pre-wrap;margin:0") {{ post.text || '-' }}
                                    br
                                    .extra(v-if="post.authorId" style="float:right;margin-left:5px")
                                        el-tooltip(v-if="post.roleIds.length" placement="top")
                                            template(#content)
                                                span {{ $t('dialog.group.posts.visibility') }}
                                                br
                                                template(v-for="roleId in post.roleIds" :key="roleId")
                                                    span(v-for="(role, rIndex) in groupDialog.ref.roles" :key="rIndex" v-if="role.id === roleId" v-text="role.name")
                                                    span(v-if="post.roleIds.indexOf(roleId) < post.roleIds.length - 1") ,&nbsp;
                                            i.el-icon-view(style="margin-right:5px")
                                        display-name(:userid="post.authorId" style="margin-right:5px")
                                        span(v-if="post.editorId" style="margin-right:5px") ({{ $t('dialog.group.posts.edited_by') }} #[display-name(:userid="post.editorId")])
                                        el-tooltip(placement="bottom")
                                            template(#content)
                                                span {{ $t('dialog.group.posts.created_at') }} {{ post.createdAt | formatDate('long') }}
                                                template(v-if="post.updatedAt !== post.createdAt")
                                                    br
                                                    span {{ $t('dialog.group.posts.edited_at') }} {{ post.updatedAt | formatDate('long') }}
                                            timer(:epoch="Date.parse(post.updatedAt)")
                                        template(v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')")
                                            el-tooltip(placement="top" :content="$t('dialog.group.posts.edit_tooltip')" :disabled="hideTooltips")
                                                el-button(type="text" icon="el-icon-edit" size="mini" style="margin-left:5px" @click="showGroupPostEditDialog(groupDialog.id, post)")
                                            el-tooltip(placement="top" :content="$t('dialog.group.posts.delete_tooltip')" :disabled="hideTooltips")
                                                el-button(type="text" icon="el-icon-delete" size="mini" style="margin-left:5px" @click="confirmDeleteGroupPost(post)")
                el-tab-pane(:label="$t('dialog.group.members.header')")
                    template(v-if="groupDialog.visible")
                        span(v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')" style="font-weight:bold;font-size:16px") {{ $t('dialog.group.members.all_members') }}
                        span(v-else style="font-weight:bold;font-size:16px") {{ $t('dialog.group.members.friends_only') }}
                        div(style="margin-top:10px")
                            el-button(type="default" @click="loadAllGroupMembers" size="mini" icon="el-icon-refresh" :loading="isGroupMembersLoading" circle)
                            el-button(type="default" @click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)" size="mini" icon="el-icon-download" circle style="margin-left:5px")
                            span(v-if="groupDialog.memberSearch.length" style="font-size:14px;margin-left:5px;margin-right:5px") {{ groupDialog.memberSearchResults.length }}/{{ groupDialog.ref.memberCount }}
                            span(v-else style="font-size:14px;margin-left:5px;margin-right:5px") {{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}
                            div(v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')" style="float:right")
                                span(style="margin-right:5px") {{ $t('dialog.group.members.sort_by') }}
                                el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px" :disabled="isGroupMembersLoading || groupDialog.memberSearch.length")
                                    el-button(size="mini")
                                        span {{ groupDialog.memberSortOrder.name }} #[i.el-icon-arrow-down.el-icon--right]
                                    el-dropdown-menu(#default="dropdown")
                                        el-dropdown-item(v-for="(item) in groupDialogSortingOptions" v-text="item.name" @click.native="setGroupMemberSortOrder(item)")
                                span(style="margin-right:5px") {{ $t('dialog.group.members.filter') }}
                                el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px" :disabled="isGroupMembersLoading || groupDialog.memberSearch.length")
                                    el-button(size="mini")
                                        span {{ groupDialog.memberFilter.name }} #[i.el-icon-arrow-down.el-icon--right]
                                    el-dropdown-menu(#default="dropdown")
                                        el-dropdown-item(v-for="(item) in groupDialogFilterOptions" v-text="item.name" @click.native="setGroupMemberFilter(item)")
                                        el-dropdown-item(v-for="(item) in groupDialog.ref.roles" v-if="!item.defaultRole" v-text="item.name" @click.native="setGroupMemberFilter(item)")
                            el-input(v-model="groupDialog.memberSearch" @input="groupMembersSearch" clearable size="mini" :placeholder="$t('dialog.group.members.search')" style="margin-top:10px;margin-bottom:10px")
                        .x-friend-list(v-if="groupDialog.memberSearch.length" v-loading="isGroupMembersLoading" style="margin-top:10px;overflow:auto;max-height:250px;min-width:130px")
                            .x-friend-item(v-for="user in groupDialog.memberSearchResults" :key="user.id" @click="showUserDialog(user.userId)" class="x-friend-item-border")
                                .avatar
                                    img(v-lazy="userImage(user.user)")
                                .detail
                                    span.name(v-text="user.user.displayName" :style="{'color':user.user.$userColour}")
                                    span.extra
                                        template(v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')")
                                            el-tooltip(v-if="user.isRepresenting" placement="top" :content="$t('dialog.group.members.representing')")
                                                i.el-icon-collection-tag(style="margin-right:5px")
                                            el-tooltip(v-if="user.visibility !== 'visible'" placement="top")
                                                template(#content)
                                                    span {{ $t('dialog.group.members.visibility') }} {{ user.visibility }}
                                                i.el-icon-view(style="margin-right:5px")
                                            el-tooltip(v-if="!user.isSubscribedToAnnouncements" placement="top" :content="$t('dialog.group.members.unsubscribed_announcements')")
                                                i.el-icon-chat-line-square(style="margin-right:5px")
                                            el-tooltip(v-if="user.managerNotes" placement="top")
                                                template(#content)
                                                    span {{ $t('dialog.group.members.manager_notes') }}
                                                    br
                                                    span {{ user.managerNotes }}
                                                i.el-icon-edit-outline(style="margin-right:5px")
                                        template(v-for="roleId in user.roleIds" :key="roleId")
                                            span(v-for="(role, rIndex) in groupDialog.ref.roles" :key="rIndex" v-if="role.id === roleId" v-text="role.name")
                                            span(v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1") ,&nbsp;
                        ul.infinite-list.x-friend-list(v-else-if="groupDialog.members.length > 0" v-infinite-scroll="loadMoreGroupMembers" style="margin-top:10px;overflow:auto;max-height:250px;min-width:130px")
                            li.infinite-list-item.x-friend-item(v-for="user in groupDialog.members" :key="user.id" @click="showUserDialog(user.userId)" class="x-friend-item-border")
                                .avatar
                                    img(v-lazy="userImage(user.user)")
                                .detail
                                    span.name(v-text="user.user.displayName" :style="{'color':user.user.$userColour}")
                                    span.extra
                                        template(v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')")
                                            el-tooltip(v-if="user.isRepresenting" placement="top" :content="$t('dialog.group.members.representing')")
                                                i.el-icon-collection-tag(style="margin-right:5px")
                                            el-tooltip(v-if="user.visibility !== 'visible'" placement="top")
                                                template(#content)
                                                    span {{ $t('dialog.group.members.visibility') }} {{ user.visibility }}
                                                i.el-icon-view(style="margin-right:5px")
                                            el-tooltip(v-if="!user.isSubscribedToAnnouncements" placement="top" :content="$t('dialog.group.members.unsubscribed_announcements')")
                                                i.el-icon-chat-line-square(style="margin-right:5px")
                                            el-tooltip(v-if="user.managerNotes" placement="top")
                                                template(#content)
                                                    span {{ $t('dialog.group.members.manager_notes') }}
                                                    br
                                                    span {{ user.managerNotes }}
                                                i.el-icon-edit-outline(style="margin-right:5px")
                                        template(v-for="roleId in user.roleIds" :key="roleId")
                                            span(v-for="(role, rIndex) in groupDialog.ref.roles" :key="rIndex" v-if="role.id === roleId" v-text="role.name")
                                            span(v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1") ,&nbsp;
                            .x-friend-item(v-if="!isGroupMembersDone" v-loading="isGroupMembersLoading" style="width:100%;height:45px;text-align:center" @click="loadMoreGroupMembers")
                                .detail(v-if="!isGroupMembersLoading")
                                    span.name {{ $t('dialog.group.members.load_more') }}
                el-tab-pane(:label="$t('dialog.group.gallery.header')")
                    el-button(type="default" size="mini" icon="el-icon-refresh" @click="getGroupGalleries" :loading="isGroupGalleryLoading" circle)
                    el-tabs(type="card" v-loading="isGroupGalleryLoading" ref="groupDialogGallery" style="margin-top:10px")
                        template(v-for="(gallery, index) in groupDialog.ref.galleries")
                            el-tab-pane
                                span(slot="label")
                                    span(v-text="gallery.name" style="font-weight:bold;font-size:16px")
                                    i.x-user-status(style="margin-left:5px" :class="groupGalleryStatus(gallery)")
                                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0 }}
                                span(v-text="gallery.description" style="color:#c7c7c7;padding:10px")
                                el-carousel(:interval="0" height="600px" style="margin-top:10px")
                                    el-carousel-item(v-for="image in groupDialog.galleries[gallery.id]" :key="image.id")
                                        el-popover(placement="top" width="700px" trigger="click")
                                            img.x-link(slot="reference" v-lazy="image.imageUrl" style="width:100%;height:100%;object-fit:contain")
                                            img.x-link(v-lazy="image.imageUrl" style="height:700px" @click="showFullscreenImageDialog(image.imageUrl)")
                el-tab-pane(:label="$t('dialog.group.json.header')")
                    el-button(type="default" @click="refreshGroupDialogTreeData()" size="mini" icon="el-icon-refresh" circle)
                    el-button(type="default" @click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)" size="mini" icon="el-icon-download" circle style="margin-left:5px")
                    el-tree(:data="groupDialog.treeData" style="margin-top:5px;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")
