<template>
  <div class="comment-list">
    <q-list v-if="comments">
      <q-item v-for="comment in comments" :key="comment['.key']">
        <q-item-section avatar>
          <q-avatar>
            <q-img :src="comment.userAvatar" />
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label caption lines="1">{{$niceTime(comment.created)}}</q-item-label>
          <q-item-label caption lines="1">{{comment.username}}</q-item-label>
          <q-item-label lines="3">{{comment.body}}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
    <div v-if="!comments || comments.length == 0" class="text-caption">No comments yet</div>
  </div>
</template>

<script>
export default {
  props: ["comments"],
  // name: 'ComponentName',
  data() {
    return {};
  }
};
</script>