mixin previousInstances
    //- dialog Table: Previous Instances User
    el-dialog.x-dialog(
        :before-close='beforeDialogClose'
        @mousedown.native='dialogMouseDown'
        @mouseup.native='dialogMouseUp'
        ref='previousInstancesUserDialog'
        :visible.sync='previousInstancesUserDialog.visible'
        :title='$t("dialog.previous_instances.header")'
        width='1000px')
        div(style='display: flex; align-items: center; justify-content: space-between')
            span(v-text='previousInstancesUserDialog.userRef.displayName' style='font-size: 14px')
            el-input(
                v-model='previousInstancesUserDialogTable.filters[0].value'
                :placeholder='$t("dialog.previous_instances.search_placeholder")'
                style='display: block; width: 150px')
        data-tables(
            v-if='previousInstancesUserDialog.visible'
            v-bind='previousInstancesUserDialogTable'
            v-loading='previousInstancesUserDialog.loading'
            style='margin-top: 10px')
            el-table-column(:label='$t("table.previous_instances.date")' prop='created_at' sortable width='170')
                template(#default='scope')
                    span {{ scope.row.created_at | formatDate('long') }}
            el-table-column(:label='$t("table.previous_instances.world")' prop='name' sortable)
                template(#default='scope')
                    location(
                        :location='scope.row.location'
                        :hint='scope.row.worldName'
                        :grouphint='scope.row.groupName')
            el-table-column(:label='$t("table.previous_instances.instance_creator")' prop='location' width='170')
                template(#default='scope')
                    display-name(
                        :userid='scope.row.$location.userId'
                        :location='scope.row.$location.tag'
                        :force-update-key='previousInstancesUserDialog.forceUpdate')
            el-table-column(:label='$t("table.previous_instances.time")' prop='time' width='100' sortable)
                template(#default='scope')
                    span(v-text='scope.row.timer')
            el-table-column(:label='$t("table.previous_instances.action")' width='90' align='right')
                template(#default='scope')
                    el-button(
                        type='text'
                        icon='el-icon-switch-button'
                        size='mini'
                        @click='showLaunchDialog(scope.row.location)')
                    el-button(
                        type='text'
                        icon='el-icon-s-data'
                        size='mini'
                        @click='showPreviousInstanceInfoDialog(scope.row.location)')
                    el-button(
                        v-if='shiftHeld'
                        style='color: #f56c6c'
                        type='text'
                        icon='el-icon-close'
                        size='mini'
                        @click='deleteGameLogUserInstance(scope.row)')
                    el-button(
                        v-else
                        type='text'
                        icon='el-icon-close'
                        size='mini'
                        @click='deleteGameLogUserInstancePrompt(scope.row)')

    //- dialog Table: Previous Instances World
    el-dialog.x-dialog(
        :before-close='beforeDialogClose'
        @mousedown.native='dialogMouseDown'
        @mouseup.native='dialogMouseUp'
        ref='previousInstancesWorldDialog'
        :visible.sync='previousInstancesWorldDialog.visible'
        :title='$t("dialog.previous_instances.header")'
        width='1000px')
        div(style='display: flex; align-items: center; justify-content: space-between')
            span(v-text='previousInstancesWorldDialog.worldRef.name' style='font-size: 14px')
            el-input(
                v-model='previousInstancesWorldDialogTable.filters[0].value'
                :placeholder='$t("dialog.previous_instances.search_placeholder")'
                style='display: block; width: 150px')
        data-tables(
            v-if='previousInstancesWorldDialog.visible'
            v-bind='previousInstancesWorldDialogTable'
            v-loading='previousInstancesWorldDialog.loading'
            style='margin-top: 10px')
            el-table-column(:label='$t("table.previous_instances.date")' prop='created_at' sortable width='170')
                template(#default='scope')
                    span {{ scope.row.created_at | formatDate('long') }}
            el-table-column(:label='$t("table.previous_instances.instance_name")' prop='name')
                template(#default='scope')
                    location-world(
                        :locationobject='scope.row.$location'
                        :grouphint='scope.row.groupName'
                        :currentuserid='API.currentUser.id'
                        @show-launch-dialog='showLaunchDialog')
            el-table-column(:label='$t("table.previous_instances.instance_creator")' prop='location')
                template(#default='scope')
                    display-name(
                        :userid='scope.row.$location.userId'
                        :location='scope.row.$location.tag'
                        :force-update-key='previousInstancesWorldDialog.forceUpdate')
            el-table-column(:label='$t("table.previous_instances.time")' prop='time' width='100' sortable)
                template(#default='scope')
                    span(v-text='scope.row.timer')
            el-table-column(:label='$t("table.previous_instances.action")' width='90' align='right')
                template(#default='scope')
                    el-button(
                        type='text'
                        icon='el-icon-s-data'
                        size='mini'
                        @click='showPreviousInstanceInfoDialog(scope.row.location)')
                    el-button(
                        v-if='shiftHeld'
                        style='color: #f56c6c'
                        type='text'
                        icon='el-icon-close'
                        size='mini'
                        @click='deleteGameLogWorldInstance(scope.row)')
                    el-button(
                        v-else
                        type='text'
                        icon='el-icon-close'
                        size='mini'
                        @click='deleteGameLogWorldInstancePrompt(scope.row)')

previous-instance-info-dialog(
    :visible.sync='previousInstanceInfoDialogVisible'
    :instance-id='previousInstanceInfoDialogInstanceId'
    :game-log-is-friend='gameLogIsFriend'
    :game-log-is-favorite='gameLogIsFavorite'
    :lookup-user='lookupUser'
    :is-dark-mode='isDarkMode')