<template>
  <div :class="cls">
    <template v-if="this.$slots.avatar">
      <div :class="`${cls}-avatar`">
        <slot name="avatar" />
      </div>
    </template>
    <template v-if="showContent">
      <div :class="`${cls}-content`">
        <h4 v-if="title || this.$slots.title" :class="`${cls}-title`">
          <template v-if="title">
            {{ title }}
          </template>
          <template v-else>
            <slot name="title" />
          </template>
        </h4>
        <div v-if="description || this.$slots.description" :class="`${cls}-description` ">
          <template v-if="description">
            {{ description }}
          </template>
          <template v-else>
            <slot name="description" />
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      cls: 'ep-list-item-meta'
    }
  },
  computed: {
    showContent() {
      return !!(
        this.title ||
        this.$slots.title ||
        this.description ||
        this.$slots.description
      )
    }
  }
}
</script>
