<template>
  <v-row class="pb-3" no-gutters>
    <v-col cols="12" class="d-flex align-center">
      <v-avatar
        color="#ec905a"
        size="28"
        class="mr-2 text-uppercase black--text caption"
      >{{ author().substr(0,2) }}</v-avatar>
      <div class="body-2 text--primary mr-4">{{ author() }}</div>
      <div class="caption grey--text mr-4">{{ comment.timestamp }}</div>
    </v-col>
    <v-col cols="2" />
    <v-col cols="8">
      <v-card class="mt-1">
        <v-card-text class="text--primary">
          {{ comment.text }}
        </v-card-text>
      </v-card>
    </v-col>
    <v-col cols="2" class="d-flex align-end pl-1">
      <v-icon small @click.prevent="$emit('delete-comment', comment.id)">mdi-delete-outline</v-icon>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "SingleComment",
  props: ['comment'],
  methods: {
    author() {
      return this.$store.getters["site/getTeam"].name
    },
  }
}
</script>

<style scoped>

</style>