<script setup lang="ts">
const props = defineProps<{
  note: Note
}>()
const emit = defineEmits<{
  delete: [close: () => void]
  setRoot: [close: () => void]
}>()
</script>
<template>
  <div class="mb-2 flex items-center">
    <h1
      class="mr-2 flex flex-grow items-center rounded-md pr-2 text-3xl font-semibold hover:bg-gray-200"
    >
      <slot name="title"></slot>
    </h1>
    <div class="btn-group flex items-center" v-if="!props.note.isRoot">
      <Modal>
        <template #activator="{ open }">
          <button class="btn-toolbar btn-sm btn" @click="open">
            <i class="fas fa-fw fa-trash" />
          </button>
        </template>
        <template #default>Are you sure you want to delete this note?</template>
        <template #actions="{ close }">
          <button class="btn-primary btn-sm btn" @click="emit('delete', close)">Delete note</button>
          <button class="btn-sm btn" @click="close">Close</button>
        </template>
      </Modal>
      <Modal>
        <template #activator="{ open }">
          <button class="btn-toolbar btn-sm btn" @click="open">
            <i class="fas fa-fw fa-sitemap" />
          </button>
        </template>
        <template #default>Are you sure you want to set this note as root note?</template>
        <template #actions="{ close }">
          <button class="btn-sm btn" @click="close">Close</button>
          <button class="btn-primary btn-sm btn" @click="emit('setRoot', close)">
            Set current note as root
          </button>
        </template>
      </Modal>
    </div>
  </div>
</template>
