<template>
  <div class="flex items-start no-wrap">
    <slot name="title">{{ _title }}</slot>

    <template v-if="!isEditMode">
      <q-space />
      <list-card-menu
        @edit="edit"
        @remove="remove"
        :is-edit-mode="isEditMode"
      />
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { QSpace } from 'quasar'
import ListCardMenu from './ListCardMenu.vue'

@Component({
  components: { ListCardMenu, QSpace },
  inheritAttrs: false,
})
export default class ListCardHeader extends Vue {
  @Prop({ type: String }) title!: string
  @Prop({ type: String }) titleEdit!: string
  @Prop({ type: Boolean, required: true }) isEditMode!: boolean

  get _title(): string {
    return this.isEditMode ? this.titleEdit : this.title
  }

  @Emit()
  edit() {
    return true
  }

  @Emit()
  remove() {
    return true
  }
}
</script>
