<script setup>
const router = useRouter()

const props = defineProps({
  params: Object
})

const viewHandler = () => {
  router.push(`/assets/assets/${props.params.data.id}/view`)
}
const duplicateHandler = () => {
  router.push(`/assets/assets/${props.params.data.id}/duplicate`)
}
const editHandler = () => {
  router.push(`/assets/assets/${props.params.data.id}/edit`)
}
const deleteHandler = async () => {
  const confirmation = confirm('Are you sure want to delete this record?')
  if(confirmation) {
    await $fetch('/api/assets/assets/'+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" @click="viewHandler"></span>
    <span class="tf-icon ti ti-copy ti-sm me-1 fg-info cursor-pointer" @click="duplicateHandler"></span>
    <span class="tf-icon ti ti-pencil ti-sm me-1 fg-warning cursor-pointer" @click="editHandler"></span>
    <span class="tf-icon ti ti-trash ti-sm me-1 fg-danger cursor-pointer" @click="deleteHandler"></span>
  </div>
</template>