<template>
  <div class="chat-container"
       :class="activeChat ? 'selected' : ''"
       @click="$emit('chat:select', chat.id)" style="cursor: pointer">
    <div class="chat-card-header">
      <div class="chat-name">
        {{ otherUser }}
      </div>
      <div class="chat-updated">
        {{ chat.updated_at }}
      </div>
    </div>
    <div class="chat-object">
      {{ `${chat.chatable_name} #${chat.chatable_id}` }}
    </div>
    <template v-if="chat.last_message">
      <div class="last-message">
          <span class="text-muted">{{ chat.last_message.user_id != userId ? otherUser : 'Me' }}:</span>
          {{ chat.last_message.message}}
      </div>
    </template>
  </div>
</template>

 <script>
  export default {
    name: 'ChatElement',
    props: {
      chat: Object,
      userId: Number,
      otherUser: String,
      activeChat: Boolean
    },
  }
</script>