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")
            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', 'hiddenFriendRequest', 'message', 'group.announcement', 'group.informative', 'group.invite', 'group.joinRequest', 'group.queueReady', 'moderation.warning.group']" :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="160")
                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'" 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')" prop="senderUsername" width="150")
                template(v-once #default="scope")
                    span.x-link(v-text="scope.row.senderUsername" @click="showUserDialog(scope.row.senderUserId)")
            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="downloadAndSaveImage(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="downloadAndSaveImage(scope.row.imageUrl)")
            el-table-column(:label="$t('table.notification.message')" prop="message")
                template(v-once #default="scope")
                    span(v-if="scope.row.title") {{ scope.row.title }}, {{ scope.row.message }}
                    span(v-else-if="scope.row.message" 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-else-if="scope.row.type === 'group.invite'")
                            el-tooltip(placement="top" content="Accept" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-check" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, 'accept')")
                            el-tooltip(placement="top" content="Decline" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-close" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, 'decline')")
                            el-tooltip(placement="top" content="Block invites from group" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-circle-close" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, 'block')")
                        template(v-else-if="scope.row.type === 'group.joinRequest'")
                            el-tooltip(placement="top" content="Accept" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-check" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, 'accept')")
                            el-tooltip(placement="top" content="Decline" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-close" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, 'reject')")
                            el-tooltip(placement="top" content="Block user from requesting" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-circle-close" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, 'block')")
                        template(v-else-if="scope.row.type === 'group.announcement'")
                            el-tooltip(placement="top" content="Dismiss" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-check" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, 'delete')")
                            el-tooltip(placement="top" content="Unsubscribe" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-close" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, 'unsubscribe')")
                        template(v-else-if="scope.row.type === 'group.informative'")
                            el-tooltip(placement="top" content="Dismiss" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-check" size="mini" style="margin-left:5px" @click="sendNotificationResponse(scope.row.id, scope.row.responses, 'delete')")
                        template(v-if="scope.row.type !== 'requestInviteResponse' && scope.row.type !== 'inviteResponse' && scope.row.type !== 'message' && !scope.row.type.includes('group.') && !scope.row.type.includes('moderation.')")
                            el-tooltip(placement="top" content="Decline" :disabled="hideTooltips")
                                el-button(type="text" icon="el-icon-close" size="mini" style="margin-left:5px" @click="hideNotification(scope.row)")
                    template(v-if="scope.row.type === 'group.queueReady'")
                        el-tooltip(placement="top" content="Delete log" :disabled="hideTooltips")
                            el-button(type="text" icon="el-icon-delete" size="mini" style="margin-left:5px" @click="deleteNotificationLog(scope.row)")
                    template(v-if="scope.row.type !== 'friendRequest' && scope.row.type !== 'hiddenFriendRequest' && !scope.row.type.includes('group.') && !scope.row.type.includes('moderation.')")
                        el-tooltip(placement="top" content="Delete log" :disabled="hideTooltips")
                            el-button(type="text" icon="el-icon-delete" size="mini" style="margin-left:5px" @click="deleteNotificationLog(scope.row)")