mixin notificationsTab()
    .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'notification'" v-if="$refs.menu && $refs.menu.activeIndex === 'notification'" v-loading="API.isNotificationsLoading")
        data-tables(v-bind="notificationTable" ref="notificationTableRef" class="notification-table")
            template(#tool)
                div(style="margin:0 0 10px;display:flex;align-items:center")
                    el-select(v-model="notificationTable.filters[0].value" @change="saveTableFilters" multiple clearable collapse-tags style="flex:1" :placeholder="$t('view.notification.filter_placeholder')")
                        el-option(v-once v-for="type in ['requestInvite', 'invite', 'requestInviteResponse', 'inviteResponse', 'friendRequest', 'ignoredFriendRequest', 'message', 'boop', 'groupChange', 'group.announcement', 'group.informative', 'group.invite', 'group.joinRequest', 'group.transfer', 'group.queueReady', 'moderation.warning.group', 'moderation.report.closed', 'instance.closed']" :key="type" :label="type" :value="type")
                    el-input(v-model="notificationTable.filters[1].value" :placeholder="$t('view.notification.search_placeholder')" style="flex:none;width:150px;margin:0 10px")
                    el-tooltip(placement="bottom" :content="$t('view.notification.refresh_tooltip')" :disabled="hideTooltips")
                        el-button(type="default" :loading="API.isNotificationsLoading" @click="API.refreshNotifications()" icon="el-icon-refresh" circle style="flex:none")
            el-table-column(:label="$t('table.notification.date')" prop="created_at" sortable="custom" width="120")
                template(v-once #default="scope")
                    el-tooltip(placement="right")
                        template(#content)
                            span {{ scope.row.created_at | formatDate('long') }}
                        span {{ scope.row.created_at | formatDate('short') }}
            el-table-column(:label="$t('table.notification.type')" prop="type" width="180")
                template(v-once #default="scope")
                    el-tooltip(v-if="scope.row.type === 'invite'" placement="top")
                        template(#content)
                            location(v-if="scope.row.details" :location="scope.row.details.worldId" :hint="scope.row.details.worldName" :grouphint="scope.row.details.groupName" :link="false")
                        span.x-link(v-text="scope.row.type" @click="showWorldDialog(scope.row.details.worldId)")
                    el-tooltip(v-else-if="scope.row.type === 'group.queueReady' || scope.row.type === 'instance.closed'" placement="top")
                        template(#content)
                            location(v-if="scope.row.location" :location="scope.row.location" :hint="scope.row.worldName" :grouphint="scope.row.groupName" :link="false")
                        span.x-link(v-text="scope.row.type" @click="showWorldDialog(scope.row.location)")
                    template(v-else-if="scope.row.link")
                        el-tooltip(placement="top" :content="scope.row.linkText" :disabled="hideTooltips")
                            span.x-link(v-text="scope.row.type" @click="openNotificationLink(scope.row.link)")
                    span(v-else v-text="scope.row.type")
            el-table-column(:label="$t('table.notification.user_group')" prop="senderUsername" width="150")
                template(v-once #default="scope")
                    template(v-if="scope.row.type === 'groupChange'")
                        span.x-link(v-text="scope.row.senderUsername" @click="showGroupDialog(scope.row.senderUserId)")
                    template(v-else-if="scope.row.senderUserId")
                        span.x-link(v-text="scope.row.senderUsername" @click="showUserDialog(scope.row.senderUserId)")
                    template(v-else-if="scope.row.link && scope.row.data?.groupName")
                        span.x-link(v-text="scope.row.data?.groupName" @click="openNotificationLink(scope.row.link)")
                    template(v-else-if="scope.row.link")
                        span.x-link(v-text="scope.row.linkText" @click="openNotificationLink(scope.row.link)")
            el-table-column(:label="$t('table.notification.photo')" width="100" prop="photo")
                template(v-once #default="scope")
                    template(v-if="scope.row.details && scope.row.details.imageUrl")
                        el-popover(placement="right" width="500px" trigger="click")
                            img.x-link(slot="reference" v-lazy="scope.row.details.imageUrl" style="flex:none;height:50px;border-radius:4px")
                            img.x-link(v-lazy="scope.row.details.imageUrl" style="width:500px" @click="showFullscreenImageDialog(scope.row.details.imageUrl)")
                    template(v-else-if="scope.row.imageUrl")
                        el-popover(placement="right" width="500px" trigger="click")
                            img.x-link(slot="reference" v-lazy="scope.row.imageUrl" style="flex:none;height:50px;border-radius:4px")
                            img.x-link(v-lazy="scope.row.imageUrl" style="width:500px" @click="showFullscreenImageDialog(scope.row.imageUrl)")
            el-table-column(:label="$t('table.notification.message')" prop="message")
                template(v-once #default="scope")
                    span.x-link(v-if="scope.row.type === 'invite'")
                        location(v-if="scope.row.details" :location="scope.row.details.worldId" :hint="scope.row.details.worldName" :grouphint="scope.row.details.groupName" :link="true")
                        br
                    span(v-if="scope.row.message && scope.row.message !== `This is a generated invite to ${scope.row.details?.worldName}`" v-text="scope.row.message")
                    span(v-else-if='scope.row.details && scope.row.details.inviteMessage' v-text="scope.row.details.inviteMessage")
                    span(v-else-if='scope.row.details && scope.row.details.requestMessage' v-text="scope.row.details.requestMessage")
                    span(v-else-if='scope.row.details && scope.row.details.responseMessage' v-text="scope.row.details.responseMessage")
            el-table-column(:label="$t('table.notification.action')" width="100" align="right")
                template(v-once #default="scope")
                    template(v-if="scope.row.senderUserId !== API.currentUser.id && !scope.row.$isExpired")
                        template(v-if="scope.row.type === 'friendRequest'")
                            el-tooltip(placement="top" content="Accept" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-check" size="mini" @click="acceptNotification(scope.row)")
                        template(v-else-if="scope.row.type === 'invite'")
                            el-tooltip(placement="top" content="Decline with message" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-chat-line-square" size="mini" @click="showSendInviteResponseDialog(scope.row)")
                        template(v-else-if="scope.row.type === 'requestInvite'")
                            template(v-if="lastLocation.location && isGameRunning && checkCanInvite(lastLocation.location)")
                                el-tooltip(placement="top" content="Invite" :disabled="hideTooltips")
                                    el-button(type="text" icon="el-icon-check" size="mini" @click="acceptRequestInvite(scope.row)")
                            el-tooltip(placement="top" content="Decline with message" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-chat-line-square" size="mini" style="margin-left:5px" @click="showSendInviteRequestResponseDialog(scope.row)")
                        template(v-if="scope.row.responses")
                            template(v-for="response in scope.row.responses")
                                el-tooltip(placement="top" :content="response.text" :disabled="hideTooltips")
                                    el-button(v-if="response.icon === 'check'" type="text" icon="el-icon-check" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, response.type)")
                                    el-button(v-else-if="response.icon === 'cancel'" type="text" icon="el-icon-close" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, response.type)")
                                    el-button(v-else-if="response.icon === 'ban'" type="text" icon="el-icon-circle-close" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, response.type)")
                                    el-button(v-else-if="response.icon === 'bell-slash'" type="text" icon="el-icon-bell" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, response.type)")
                                    el-button(v-else-if="response.icon === 'reply' && scope.row.type === 'boop'" type="text" icon="el-icon-chat-line-square" size="mini" style="margin-left:5px" @click="showSendBoopDialog(scope.row.senderUserId)")
                                    el-button(v-else-if="response.icon === 'reply'" type="text" icon="el-icon-chat-line-square" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, response.type)")
                                    el-button(v-else type="text" icon="el-icon-collection-tag" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, response.type)")
                        template(v-if="scope.row.type !== 'requestInviteResponse' && scope.row.type !== 'inviteResponse' && scope.row.type !== 'message' && scope.row.type !== 'boop' && scope.row.type !== 'groupChange' && !scope.row.type.includes('group.') && !scope.row.type.includes('moderation.') && !scope.row.type.includes('instance.')")
                            el-tooltip(placement="top" content="Decline" :disabled="hideTooltips")
                                el-button(v-if="shiftHeld" style="color:#f56c6c;margin-left:5px" type="text" icon="el-icon-close" size="mini" @click="hideNotification(scope.row)")
                                el-button(v-else type="text" icon="el-icon-close" size="mini" style="margin-left:5px" @click="hideNotificationPrompt(scope.row)")
                    template(v-if="scope.row.type === 'group.queueReady'")
                        el-tooltip(placement="top" content="Delete log" :disabled="hideTooltips")
                            el-button(v-if="shiftHeld" style="color:#f56c6c;margin-left:5px" type="text" icon="el-icon-close" size="mini" @click="deleteNotificationLog(scope.row)")
                            el-button(v-else type="text" icon="el-icon-delete" size="mini" style="margin-left:5px" @click="deleteNotificationLogPrompt(scope.row)")
                    template(v-if="scope.row.type !== 'friendRequest' && scope.row.type !== 'ignoredFriendRequest' && !scope.row.type.includes('group.') && !scope.row.type.includes('moderation.')")
                        el-tooltip(placement="top" content="Delete log" :disabled="hideTooltips")
                            el-button(v-if="shiftHeld" style="color:#f56c6c;margin-left:5px" type="text" icon="el-icon-close" size="mini" @click="deleteNotificationLog(scope.row)")
                            el-button(v-else type="text" icon="el-icon-delete" size="mini" style="margin-left:5px" @click="deleteNotificationLogPrompt(scope.row)")
