mixin friendLogTab
    .x-container(v-if='$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-for='type in ["Friend", "Unfriend", "FriendRequest", "CancelFriendRequest", "DisplayName", "TrustLevel"]'
                            :key='type'
                            :label='$t("view.friend_log.filters." + 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(#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.friendLog.type")' prop='type' width='150')
                template(#default='scope')
                    span(v-text='$t("view.friend_log.filters." + scope.row.type)')
            el-table-column(:label='$t("table.friendLog.user")' prop='displayName')
                template(#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(#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)')