<script setup>
const router = useRouter()

const props = defineProps({
  params: Object
})

const viewHandler = () => {
  router.push(`/settings/printers/${props.params.data.id}/view`)
}
const editHandler = () => {
  router.push(`/settings/printers/${props.params.data.id}/edit`)
}
const cloneHandler = () => {
  router.push(`/settings/printers/${props.params.data.id}/duplicate`)
}
const deleteHandler = async () => {
  const confirmation = confirm('Are you sure want to delete this record?')
  if(confirmation) {
    await $fetch('/api/settings/printers/'+props.params.data.id, {
      method: 'DELETE',
      headers: useRequestHeaders(['cookie'])
    })
    location.reload()
  }
}
</script>

<template>
  <div class="d-inlineFlex items-center gap-5px">
    <span class="tf-icon ti ti-eye ti-sm me-1 fg-info cursor-pointer" title="View" @click="viewHandler"></span>
    <span class="tf-icon ti ti-pencil ti-sm me-1 fg-warning cursor-pointer" title="Edit" @click="editHandler"></span>
    <span class="tf-icon ti ti-copy ti-sm me-1 fg-success cursor-pointer" title="Clone" @click="cloneHandler"></span>
    <span class="tf-icon ti ti-trash ti-sm me-1 fg-danger cursor-pointer" title="Delete" @click="deleteHandler"></span>
  </div>
</template>
