diff --git a/src/bot/database/entity/cooldown.ts b/src/bot/database/entity/cooldown.ts
index 198b5d4debd..d4be4bb2a92 100644
--- a/src/bot/database/entity/cooldown.ts
+++ b/src/bot/database/entity/cooldown.ts
@@ -3,9 +3,12 @@ import { ColumnNumericTransformer } from './_transformer';
 
 export interface CooldownInterface {
   id?: string;
-  name: string;
+  value: string[];
   miliseconds: number;
+  usageLimit: number;
   type: 'global' | 'user';
+  pool: 'per-item' | 'shared';
+  wipeType: 'full' | 'full-last' | 'gradual';
   timestamp?: number;
   isErrorMsgQuiet: boolean;
   isEnabled: boolean;
@@ -27,7 +30,7 @@ export const Cooldown = new EntitySchema<Readonly<Required<CooldownInterface>>>(
   name: 'cooldown',
   columns: {
     id: { type: 'uuid', primary: true, generated: 'uuid' },
-    name: { type: String },
+    value: { type: 'simple-json' },
     miliseconds: { type: Number },
     type: { type: 'varchar', length: 10 },
     timestamp: { type: 'bigint', transformer: new ColumnNumericTransformer(), default: 0 },
diff --git a/src/bot/message.ts b/src/bot/message.ts
index 489ae3518e7..9b179c72368 100644
--- a/src/bot/message.ts
+++ b/src/bot/message.ts
@@ -614,8 +614,9 @@ class Message {
             })).sort().join(', ');
           case 'cooldown':
             listOutput = _.map(cooldowns, function (o, k) {
-              const time = o.miliseconds;
-              return o.name + ': ' + (time / 1000) + 's';
+              // const time = o.miliseconds;
+              // return o.name + ': ' + (time / 1000) + 's';
+              return '';
             }).sort().join(', ');
             return listOutput.length > 0 ? listOutput : ' ';
           case 'price':
diff --git a/src/panel/views/managers/cooldowns/components/global-permission-to-apply.vue b/src/panel/views/managers/cooldowns/components/global-permission-to-apply.vue
new file mode 100644
index 00000000000..aebcb6c3bb8
--- /dev/null
+++ b/src/panel/views/managers/cooldowns/components/global-permission-to-apply.vue
@@ -0,0 +1,58 @@
+<template>
+  <b-form-group
+    :label="translate('permissions-to-apply')"
+    label-for="name"
+  >
+    <b-spinner v-if="state.loading !== $state.success"/>
+    <b-list-group v-else>
+      <b-list-group-item @click="value = []" :variant="value.length === 0 ? 'success' : ''">All <fa v-if="value.length === 0" icon="check" style="float:right; height: 24px"/></b-list-group-item>
+      <b-list-group-item
+        v-for="permission of permissions" :key="permission.id"
+        :variant="value.includes(permission.id) ? 'success' : ''"
+        @click="toggle(permission.id)"
+      >
+        {{permission.name}}
+        <fa v-if="value.includes(permission.id)" icon="check" style="float:right; height: 24px"/>
+      </b-list-group-item>
+    </b-list-group>
+  </b-form-group>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+import { getSocket } from 'src/panel/helpers/socket';
+import type { PermissionsInterface } from 'src/bot/database/entity/permissions';
+import { orderBy, xor } from 'lodash-es';
+
+@Component({})
+export default class extends Vue {
+  psocket = getSocket('/core/permissions')
+
+  value: string[] = []
+
+  state: {
+    loading: number;
+  } = {
+    loading: this.$state.progress,
+  }
+
+  permissions: PermissionsInterface[] = [];
+
+  toggle(id: string) {
+    this.value = xor(this.value, [id])
+  }
+
+  async mounted() {
+    await new Promise((resolve) => {
+      this.psocket.emit('permissions', (err: string | null, data: Readonly<Required<PermissionsInterface>>[]) => {
+        if(err) {
+          return console.error(err);
+        }
+        this.permissions = orderBy(data, 'order', 'asc');
+        resolve()
+      })
+    })
+    this.state.loading = this.$state.success;
+  }
+};
+</script>
diff --git a/src/panel/views/managers/cooldowns/components/name.vue b/src/panel/views/managers/cooldowns/components/name.vue
new file mode 100644
index 00000000000..c9eab8a6b73
--- /dev/null
+++ b/src/panel/views/managers/cooldowns/components/name.vue
@@ -0,0 +1,65 @@
+<template>
+  <b-form-group
+    :label="'Type to add command, keyword or group'"
+    label-for="name"
+  >
+    <b-form-tags
+      input-id="tags-basic"
+      v-model="_value"
+      class="p-1"
+      placeholder="Type to add !command, keyword or group:nameOfGroup"
+      :style="{
+        height: value.length === 0 ? '48px !important' : 'inherit'
+      }"
+      no-outer-focus
+      :remove-on-delete="true">
+      <template v-slot="{tags, inputId, placeholder, disabled, addTag, removeTag }">
+        <b-input-group style="height:2rem;">
+          <b-form-input
+            v-model="newTag"
+            :id="inputId"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            @keydown.delete="newTag.length === 0 ? removeTag(tags[tags.length - 1]) : null"
+            @keydown.enter="addTag(newTag); newTag = ''"
+          ></b-form-input>
+          <b-input-group-append>
+            <b-button @click="addTag(newTag)" :disabled="disabled" variant="primary">Add</b-button>
+          </b-input-group-append>
+        </b-input-group>
+        <ul class="list-inline d-inline-block mt-3 mb-0">
+          <li v-for="tag in tags" :key="tag" class="b-form-tag d-inline-flex align-items-baseline mw-100">
+            <span class="b-form-tag-content flex-grow-1 p-1" :class="{
+              'badge-info': tag.startsWith('!'),
+              'badge-success': tag.startsWith('group:'),
+              'badge-danger': !tag.startsWith('!') && !tag.startsWith('group:'),
+            }">
+              <template v-if="tag.startsWith('!')">{{ translate('command') }}</template>
+              <template v-else-if="tag.startsWith('group:')">{{ translate('group') }}</template>
+              <template v-else>{{ translate('keyword') }}</template>
+            </span>
+            <span class="b-form-tag-content flex-grow-1 text-truncate p-1 pr-3 badge-secondary">{{ tag.replace('group:', '') }}
+              <button @click="removeTag(tag)" aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove" style="position:absolute; transform: translateX(3px) translateY(-2px);">×</button>
+            </span>
+          </li>
+        </ul>
+      </template>
+    </b-form-tags>
+  </b-form-group>
+</template>
+
+<script lang="ts">
+import { Vue, Component, PropSync } from 'vue-property-decorator';
+import type { CooldownInterface } from 'src/bot/database/entity/cooldown';
+
+@Component({})
+export default class extends Vue {
+  @PropSync('value') _value!: CooldownInterface['value'];
+
+  newTag = '';
+
+  touch() {
+    this.$emit('touch')
+  }
+};
+</script>
diff --git a/src/panel/views/managers/cooldowns/cooldowns-edit.vue b/src/panel/views/managers/cooldowns/cooldowns-edit.vue
new file mode 100644
index 00000000000..5eaf817cabc
--- /dev/null
+++ b/src/panel/views/managers/cooldowns/cooldowns-edit.vue
@@ -0,0 +1,267 @@
+<template>
+  <b-container fluid>
+    <b-row>
+      <b-col>
+        <span class="title text-default mb-2">
+          {{ translate('menu.manage') }}
+          <small><fa icon="angle-right"/></small>
+          {{ translate('menu.cooldown') }}
+          <template v-if="$route.params.id">
+            <small><fa icon="angle-right"/></small>
+            {{item.name}}
+            <small class="text-muted text-monospace" style="font-size:0.7rem">{{$route.params.id}}</small>
+          </template>
+        </span>
+      </b-col>
+    </b-row>
+
+    <panel>
+      <template v-slot:left>
+        <button-with-icon class="btn-secondary btn-shrink btn-reverse" icon="caret-left" href="#/manage/cooldowns/list">{{translate('commons.back')}}</button-with-icon>
+        <hold-button v-if="$route.params.id || null" @trigger="del()" icon="trash" class="btn-shrink btn-danger">
+          <template slot="title">{{translate('dialog.buttons.delete')}}</template>
+          <template slot="onHoldTitle">{{translate('dialog.buttons.hold-to-delete')}}</template>
+        </hold-button>
+        <button-with-icon :class="[ item.isEnabled ? 'btn-success' : 'btn-danger' ]" class="btn-shrink btn-reverse" icon="power-off" @click="item.isEnabled = !item.isEnabled">
+          {{ translate('dialog.buttons.' + (item.isEnabled? 'enabled' : 'disabled')) }}
+        </button-with-icon>
+      </template>
+      <template v-slot:right>
+        <b-alert show variant="info" v-if="state.pending" v-html="translate('dialog.changesPending')" class="mr-2 p-2 mb-0"></b-alert>
+        <state-button @click="save()" text="saveChanges" class="btn-shrink" :state="state.save" :invalid="!!$v.$invalid && !!$v.$dirty"/>
+      </template>
+    </panel>
+
+    <loading v-if="state.loading === 1"/>
+    <b-form v-else>
+      <name :value.sync="item.value" :forType="item.for" @touch="$v.item.name.$touch()" :state="$v.item.name.$invalid && $v.item.name.$dirty"/>
+
+      <b-row>
+        <b-col>
+          <b-form-group :label="translate('systems.cooldown.type')">
+            <b-btn :variant="item.type === 'global' ? 'secondary' : 'outline-secondary'" @click="item.type = 'global'"><strong>global</strong> <small class="text-muted">users will share cooldown</small></b-btn>
+            <b-btn :variant="item.type === 'user' ? 'secondary' : 'outline-secondary'"  @click="item.type = 'user'"><strong>user</strong> <small class="text-muted">users will have own cooldown</small></b-btn>
+          </b-form-group>
+
+          <b-form-group :label="translate('systems.cooldown.pool')">
+            <b-btn :variant="item.pool === 'per-item' ? 'secondary' : 'outline-secondary'" @click="item.pool = 'per-item'"><strong>per item</strong> <small class="text-muted">each command, keyword will have own cooldown</small></b-btn>
+            <b-btn :variant="item.pool === 'shared' ? 'secondary' : 'outline-secondary'"  @click="item.pool = 'shared'"><strong>shared</strong> <small class="text-muted">each command, keyword will have shared cooldown</small></b-btn>
+          </b-form-group>
+
+          <b-form-group :label="translate('systems.cooldown.announce')">
+            <b-btn :variant="item.isErrorMsgQuiet ? 'secondary' : 'outline-secondary'" @click="item.isErrorMsgQuiet = true"><strong>quiet</strong> <small class="text-muted">cooldown won't send message into chat</small></b-btn>
+            <b-btn :variant="!item.isErrorMsgQuiet ? 'secondary' : 'outline-secondary'"  @click="item.isErrorMsgQuiet = false"><strong>noisy</strong> <small class="text-muted">cooldown and time until cooldown expires will be announced in chat</small></b-btn>
+          </b-form-group>
+
+          <b-form-group :label="translate('systems.cooldown.wipeType')">
+            <b-btn :variant="item.wipeType === 'full' ? 'secondary' : 'outline-secondary'" @click="item.wipeType = 'full'"><strong>full</strong> <small class="text-muted">cooldown will reset {{seconds}} seconds after <strong>first</strong> command/keyword usage</small></b-btn>
+            <b-btn :variant="item.wipeType === 'full-last' ? 'secondary' : 'outline-secondary'" @click="item.wipeType = 'full-last'"><strong>full (last)</strong> <small class="text-muted">cooldown will reset  {{seconds}} seconds after <strong>last</strong> command/keyword usage</small></b-btn>
+            <b-btn :variant="item.wipeType === 'gradual' ? 'secondary' : 'outline-secondary'"  @click="item.wipeType = 'gradual'"><strong>gradual</strong> <small class="text-muted">cooldown will gradually reset to usage limit</small></b-btn>
+          </b-form-group>
+        </b-col>
+        <b-col>
+          <global-permission-to-apply/>
+        </b-col>
+        <b-col>
+          <b-form-group
+            :label="translate('cooldown') + ' (' + this.translate('in-seconds') + ')'"
+            label-for="seconds"
+          >
+            <b-input-group>
+              <b-form-input
+                id="seconds"
+                v-model.number="seconds"
+                type="number"
+                @input="$v.item.miliseconds.$touch()"
+                :state="$v.item.miliseconds.$invalid && $v.item.miliseconds.$dirty ? false : null"
+              ></b-form-input>
+            </b-input-group>
+            <b-form-invalid-feedback :state="!($v.item.miliseconds.$invalid && $v.item.miliseconds.$dirty)">{{ translate('dialog.errors.minValue').replace('$value', 10) }}</b-form-invalid-feedback>
+          </b-form-group>
+          <b-form-group
+            :label="translate('usageLimit')"
+            label-for="usageLimit"
+          >
+            <b-input-group>
+              <b-form-input
+                id="usageLimit"
+                v-model.number="item.usageLimit"
+                type="number"
+                @input="$v.item.usageLimit.$touch()"
+                :state="$v.item.usageLimit.$invalid && $v.item.usageLimit.$dirty ? false : null"
+              ></b-form-input>
+            </b-input-group>
+            <b-form-invalid-feedback :state="!($v.item.usageLimit.$invalid && $v.item.usageLimit.$dirty)">{{ translate('dialog.errors.minValue').replace('$value', 1) }}</b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-form>
+  </b-container>
+</template>
+<script lang="ts">
+import { Vue, Component, Watch } from 'vue-property-decorator';
+import { getSocket } from 'src/panel/helpers/socket';
+
+import { Route } from 'vue-router'
+import { NextFunction } from 'express';
+
+import { Validations } from 'vuelidate-property-decorators';
+import { required, minValue } from 'vuelidate/lib/validators'
+
+import { v4 as uuid } from 'uuid';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCheck, faTimes, faVolumeUp, faVolumeOff } from '@fortawesome/free-solid-svg-icons';
+import { CooldownInterface } from 'src/bot/database/entity/cooldown';
+library.add(faVolumeUp, faVolumeOff, faCheck, faTimes);
+
+Component.registerHooks([
+  'beforeRouteEnter',
+  'beforeRouteLeave',
+  'beforeRouteUpdate' // for vue-router 2.2+
+])
+
+@Component({
+  components: {
+    'name': () => import('./components/name.vue'),
+    'global-permission-to-apply': () => import('./components/global-permission-to-apply.vue'),
+    'loading': () => import('../../../components/loading.vue'),
+  },
+  filters: {
+    capitalize(value: string) {
+      if (!value) return ''
+      value = value.toString()
+      return value.charAt(0).toUpperCase() + value.slice(1)
+    }
+  }
+})
+export default class cooldownEdit extends Vue {
+  socket = getSocket('/systems/cooldown');
+
+  state: {
+    loading: number;
+    save: number;
+    pending: boolean;
+  } = {
+    loading: this.$state.progress,
+    save: this.$state.idle,
+    pending: false,
+  }
+
+  item: CooldownInterface = {
+    id: uuid(),
+    value: [],
+    miliseconds: 600000,
+    type: 'global',
+    pool: 'per-item',
+    wipeType: 'full',
+    usageLimit: 1,
+    timestamp: 0,
+    isErrorMsgQuiet: false,
+    isEnabled: true,
+    isOwnerAffected: true,
+    isModeratorAffected: true,
+    isSubscriberAffected: true,
+    isFollowerAffected: true,
+    viewers: [],
+  }
+
+  get seconds() {
+    return this.item.miliseconds / 1000;
+  }
+
+  set seconds(value: number) {
+    this.item.miliseconds = value * 1000;
+  }
+
+
+  @Validations()
+  validations = {
+    item: {
+      name: {required},
+      miliseconds: { required, minValue: minValue(10000) },
+      usageLimit: { required, minValue: minValue(1) }
+    }
+  }
+
+  @Watch('item', { deep: true })
+  pending() {
+    if (this.state.loading === this.$state.success) {
+      this.state.pending = true;
+    }
+  }
+
+  async mounted() {
+    if (this.$route.params.id) {
+      await new Promise((resolve, reject) => {
+        this.socket.emit('generic::getOne', this.$route.params.id, (err: string | null, data: CooldownInterface) => {
+          if (err) {
+            this.$router.push({ name: 'cooldownsManagerList' });
+            reject(err)
+          }
+          console.debug('Loaded', data);
+          this.item = data
+          resolve();
+        })
+      })
+    }
+
+    this.$nextTick(() => {
+      this.state.loading = this.$state.success;
+    })
+  }
+
+  del() {
+    this.socket.emit('generic::deleteById', this.$route.params.id, () => {
+      this.$router.push({ name: 'cooldownsManagerList' })
+    })
+  }
+
+  save() {
+    this.$v.$touch();
+    if (!this.$v.$invalid) {
+      this.state.save = this.$state.progress;
+
+      this.socket.emit('cooldown::save', this.item, (err: string | null, data: CooldownInterface) => {
+        if (err) {
+          this.state.save = this.$state.fail;
+          return console.error(err);
+        }
+
+        this.state.save = this.$state.success;
+        this.state.pending = false;
+        this.$router.push({ name: 'cooldownsManagerEdit', params: { id: String(data.id) } })
+        setTimeout(() => {
+          this.state.save = this.$state.idle;
+        }, 1000)
+      });
+    }
+  }
+
+  beforeRouteUpdate(to: Route, from: Route, next: NextFunction) {
+    if (this.state.pending) {
+      const isOK = confirm('You will lose your pending changes. Do you want to continue?')
+      if (!isOK) {
+        next(false);
+      } else {
+        next();
+      }
+    } else {
+      next();
+    }
+  }
+
+  beforeRouteLeave(to: Route, from: Route, next: NextFunction) {
+    if (this.state.pending) {
+      const isOK = confirm('You will lose your pending changes. Do you want to continue?')
+      if (!isOK) {
+        next(false);
+      } else {
+        next();
+      }
+    } else {
+      next();
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/panel/views/managers/cooldowns/cooldowns-list.vue b/src/panel/views/managers/cooldowns/cooldowns-list.vue
new file mode 100644
index 00000000000..a8df0e44135
--- /dev/null
+++ b/src/panel/views/managers/cooldowns/cooldowns-list.vue
@@ -0,0 +1,145 @@
+<template>
+  <b-container fluid>
+    <b-row>
+      <b-col>
+        <span class="title text-default mb-2">
+          {{ translate('menu.manage') }}
+          <small><fa icon="angle-right"/></small>
+          {{ translate('menu.cooldown') }}
+        </span>
+      </b-col>
+      <b-col v-if="!$systems.find(o => o.name === 'cooldown').enabled" style=" text-align: right;">
+        <b-alert show variant="danger" style="padding: .5rem; margin: 0; display: inline-block;">
+          <fa icon="exclamation-circle" fixed-width/> {{ translate('this-system-is-disabled') }}
+        </b-alert>
+      </b-col>
+    </b-row>
+
+    <panel search @search="search = $event">
+      <template v-slot:left>
+        <button-with-icon class="btn-primary btn-reverse" icon="plus" href="#/manage/cooldowns/edit">{{translate('systems.cooldown.new')}}</button-with-icon>
+      </template>
+    </panel>
+
+    <loading v-if="state.loading !== $state.success"/>
+    <b-alert show variant="danger" v-else-if="state.loading === $state.success && fItems.length === 0 && search.length > 0">
+      <fa icon="search"/> <span v-html="translate('systems.cooldown.emptyAfterSearch').replace('$search', search)"/>
+    </b-alert>
+    <b-alert show v-else-if="state.loading === $state.success && items.length === 0">
+      {{translate('systems.cooldown.empty')}}
+    </b-alert>
+    <b-table v-else striped small hover :items="fItems" :fields="fields" @row-clicked="linkTo($event)">
+      <template v-slot:cell(miliseconds)="data">
+        <span class="font-weight-bold text-primary font-bigger">{{Number(data.item.miliseconds / 60000).toFixed(1)}}</span> {{translate('minutes')}}
+      </template>
+      <template v-slot:cell(isErrorMsgQuiet)="data">
+        {{ data.item.isErrorMsgQuiet ? translate('commons.yes') : translate('commons.no') }}
+      </template>
+      <template v-slot:cell(isOwnerAffected)="data">
+        {{ data.item.isOwnerAffected ? translate('commons.yes') : translate('commons.no') }}
+      </template>
+      <template v-slot:cell(isModeratorAffected)="data">
+        {{ data.item.isModeratorAffected ? translate('commons.yes') : translate('commons.no') }}
+      </template>
+      <template v-slot:cell(isSubscriberAffected)="data">
+        {{ data.item.isSubscriberAffected ? translate('commons.yes') : translate('commons.no') }}
+      </template>
+      <template v-slot:cell(isFollowerAffected)="data">
+        {{ data.item.isFollowerAffected ? translate('commons.yes') : translate('commons.no') }}
+      </template>
+      <template v-slot:cell(buttons)="data">
+        <div class="float-right" style="width: max-content !important;">
+          <button-with-icon :class="[ data.item.isEnabled ? 'btn-success' : 'btn-danger' ]" class="btn-only-icon btn-reverse" icon="power-off" @click="data.item.isEnabled = !data.item.isEnabled; update(data.item)">
+            {{ translate('dialog.buttons.' + (data.item.isEnabled? 'enabled' : 'disabled')) }}
+          </button-with-icon>
+          <button-with-icon class="btn-only-icon btn-primary btn-reverse" icon="edit" v-bind:href="'#/manage/cooldowns/edit/' + data.item.id">
+            {{ translate('dialog.buttons.edit') }}
+          </button-with-icon>
+          <hold-button @trigger="remove(data.item.id)" icon="trash" class="btn-danger btn-reverse btn-only-icon">
+            <template slot="title">{{translate('dialog.buttons.delete')}}</template>
+            <template slot="onHoldTitle">{{translate('dialog.buttons.hold-to-delete')}}</template>
+          </hold-button>
+        </div>
+      </template>
+    </b-table>
+  </b-container>
+</template>
+
+<script lang="ts">
+import { getSocket } from 'src/panel/helpers/socket';
+import { capitalize } from 'src/panel/helpers/capitalize';
+
+import { Vue, Component/*, Watch */ } from 'vue-property-decorator';
+//import { isNil } from 'lodash-es';
+//import { escape } from 'xregexp';
+import { CooldownInterface } from 'src/bot/database/entity/cooldown';
+
+@Component({
+  components: {
+    loading: () => import('../../../components/loading.vue'),
+    'hold-button': () => import('../../../components/holdButton.vue'),
+  },
+})
+export default class cooldownList extends Vue {
+  socket = getSocket('/systems/cooldown');
+
+  items: CooldownInterface[] = [];
+  search: string = '';
+  state: {
+    loading: number;
+  } = {
+    loading: this.$state.progress,
+  }
+
+  fields = [
+    { key: 'name', label: '!' + this.translate('command') + ' ' + this.translate('or') + ' ' + this.translate('keyword'), sortable: true },
+    {
+      key: 'miliseconds',
+      label: this.translate('cooldown'),
+      sortable: true,
+    },
+    { key: 'type', label: this.translate('type'), sortable: true, formatter: (value: string) => this.translate(value) },
+    { key: 'isErrorMsgQuiet', label: capitalize(this.translate('quiet')), sortable: true },
+    { key: 'isOwnerAffected', label: capitalize(this.translate('core.permissions.casters')), sortable: true },
+    { key: 'isModeratorAffected', label: capitalize(this.translate('core.permissions.moderators')), sortable: true },
+    { key: 'isSubscriberAffected', label: capitalize(this.translate('core.permissions.subscribers')), sortable: true },
+    { key: 'isFollowerAffected', label: capitalize(this.translate('core.permissions.followers')), sortable: true },
+    { key: 'buttons', label: '' },
+  ];
+
+  get fItems() {
+    if (this.search.length === 0) return this.items
+    return this.items.filter((o) => {
+      //const isSearchInKey = !isNil(o.name.match(new RegExp(escape(this.search), 'ig')))
+      return true
+    })
+  }
+
+  created() {
+    this.state.loading = this.$state.progress;
+    this.socket.emit('generic::getAll', (err: string | null, items: CooldownInterface[]) => {
+      if (err) {
+        return console.error(err);
+      }
+      console.debug('Loaded', items)
+      this.items = items;
+      this.state.loading = this.$state.success;
+    })
+  }
+
+  linkTo(item: Required<CooldownInterface>) {
+    console.debug('Clicked', item.id);
+    this.$router.push({ name: 'cooldownsManagerEdit', params: { id: item.id } });
+  }
+
+  remove(id: string) {
+   this.socket.emit('generic::deleteById', id, () => {
+      this.items = this.items.filter((o) => o.id !== id)
+    })
+  }
+
+  update(item: Required<CooldownInterface>) {
+    this.socket.emit('cooldown::save', item , () => {});
+  }
+}
+</script>
\ No newline at end of file