<template>
  <ui-list :title="title" separator>
    <ui-list-item v-for="item in items" :key="item._id">
      {{ itemText(item) }}
      <slot name="item-popup" :item="item" />
    </ui-list-item>
    <ui-list-item v-if="isEditMode" class="text-blue-grey">
      {{ itemPlaceholder }}
      <slot name="new-item-popup" />
    </ui-list-item>
    <q-separator />
  </ui-list>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { QSeparator } from 'quasar'
import UiList from '../../UiList.vue'
import UiListItem from '../../UiListItem.vue'

@Component({
  components: { UiListItem, UiList, QSeparator },
  inheritAttrs: false,
})
export default class ListCardItems<ItemType> extends Vue {
  @Prop({ type: String, required: true })
  title!: string

  @Prop({ type: Array, required: true })
  items!: (ItemType & { _id: string })[]

  @Prop({ type: Function, required: true })
  itemText!: (item: ItemType) => string

  @Prop({ type: String, required: true })
  itemPlaceholder!: string

  @Prop({ type: Boolean, required: true })
  isEditMode!: boolean
}
</script>
