mixin friendLogTab()
    .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'friendLog'")
        data-tables(v-bind="friendLogTable" ref="friendLogTableRef")
            template(#tool)
                div(style="margin:0 0 10px;display:flex;align-items:center")
                    el-select(v-model="friendLogTable.filters[0].value" @change="saveTableFilters" multiple clearable style="flex:1" :placeholder="$t('view.friend_log.filter_placeholder')")
                        el-option(v-once v-for="type in ['Friend', 'Unfriend', 'FriendRequest', 'CancelFriendRequest', 'DisplayName', 'TrustLevel']" :key="type" :label="type" :value="type")
                    el-input(v-model="friendLogTable.filters[1].value" :placeholder="$t('view.friend_log.search_placeholder')" style="flex:none;width:150px;margin-left:10px")
            el-table-column(:label="$t('table.friendLog.date')" prop="created_at" sortable="custom" width="200")
                template(v-once #default="scope")
                    span {{ scope.row.created_at | formatDate('long') }}
            el-table-column(:label="$t('table.friendLog.type')" prop="type" width="150")
            el-table-column(:label="$t('table.friendLog.user')" prop="displayName")
                template(v-once #default="scope")
                    span(v-if="scope.row.type === 'DisplayName'") {{ scope.row.previousDisplayName }} #[i.el-icon-right] 
                    span.x-link(v-text="scope.row.displayName || scope.row.userId" @click="showUserDialog(scope.row.userId)" style="padding-right:10px")
                    template(v-if="scope.row.type === 'TrustLevel'")
                        span  ({{ scope.row.previousTrustLevel }} #[i.el-icon-right] {{ scope.row.trustLevel }})
            el-table-column(:label="$t('table.friendLog.action')" width="80" align="right")
                template(v-once #default="scope")
                    el-button(v-if="shiftHeld" style="color:#f56c6c" type="text" icon="el-icon-close" size="mini" @click="deleteFriendLog(scope.row)")
                    el-button(v-else type="text" icon="el-icon-delete" size="mini" @click="deleteFriendLogPrompt(scope.row)")