mixin moderationTab()
    .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'moderation'" v-if="$refs.menu && $refs.menu.activeIndex === 'moderation'")
        data-tables(v-bind="playerModerationTable" ref="playerModerationTableRef" v-loading="API.isPlayerModerationsLoading")
            template(#tool)
                div(style="margin:0 0 10px;display:flex;align-items:center")
                    el-select(v-model="playerModerationTable.filters[0].value" @change="saveTableFilters" multiple clearable collapse-tags style="flex:1" :placeholder="$t('view.moderation.filter_placeholder')")
                        el-option(v-once v-for="type in ['block', 'unblock', 'mute', 'unmute', 'interactOn', 'interactOff', 'muteChat']" :key="type" :label="type" :value="type")
                    el-input(v-model="playerModerationTable.filters[1].value" :placeholder="$t('view.moderation.search_placeholder')" style="flex:none;width:150px;margin:0 10px")
                    el-tooltip(placement="bottom" :content="$t('view.moderation.refresh_tooltip')" :disabled="hideTooltips")
                        el-button(type="default" :loading="API.isPlayerModerationsLoading" @click="API.refreshPlayerModerations()" icon="el-icon-refresh" circle style="flex:none")
            el-table-column(:label="$t('table.moderation.date')" prop="created" sortable="custom" width="120")
                template(v-once #default="scope")
                    el-tooltip(placement="right")
                        template(#content)
                            span {{ scope.row.created | formatDate('long') }}
                        span {{ scope.row.created | formatDate('short') }}
            el-table-column(:label="$t('table.moderation.type')" prop="type" width="100")
            el-table-column(:label="$t('table.moderation.source')" prop="sourceDisplayName")
                template(v-once #default="scope")
                    span.x-link(v-text="scope.row.sourceDisplayName" @click="showUserDialog(scope.row.sourceUserId)")
            el-table-column(:label="$t('table.moderation.target')" prop="targetDisplayName")
                template(v-once #default="scope")
                    span.x-link(v-text="scope.row.targetDisplayName" @click="showUserDialog(scope.row.targetUserId)")
            el-table-column(:label="$t('table.moderation.action')" width="80" align="right")
                template(v-once #default="scope")
                    el-button(v-if="scope.row.sourceUserId === API.currentUser.id" type="text" icon="el-icon-close" size="mini" @click="deletePlayerModeration(scope.row)")