<template>
  <button
    v-if="crud.getPermission('delete')"
    type="button"
    class="vm-crud-toolbar__btn is-danger"
    :disabled="!crud.selection.value.length"
    @click="crud.rowDelete()"
  >
    <i class="ri-delete-bin-line" />
    {{ crudLabel('multiDelete', crud.dict.label) }}
  </button>
</template>

<script setup lang="ts">
import { useCrud } from './useCrud'
import { crudLabel } from './style'

defineOptions({ name: 'vm-multi-delete-btn' })
const crud = useCrud()
</script>

<style lang="scss" scoped>
.vm-crud-toolbar__btn {
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  &.is-danger {
    background: var(--danger-soft);
    color: var(--danger);

    &:hover:not(:disabled) {
      background: color-mix(in srgb, var(--danger-soft) 70%, var(--danger) 12%);
    }
  }
}
</style>
