﻿<template>

  <div class="shadow-md rounded-lg bg-gray-50">

    <div class="text-lg font-bold">
      {{ props.content.title }}
      <span class="text-md-caption">
      {{ time_ago(props.content.createdAt) }}
        </span>
    </div>

    <div v-if="props.content.url !== null || props.content.uri !== null"
         class="h-48 object-cover bg-gray-300 rounded-md">

      <v-img :src="props.content.url"
             v-if="!isHttpUrl">
      </v-img>

      <iframe v-if="isHttpUrl"
              :src="props?.content?.uri"
              title="YouTube video player"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen>
      </iframe>

    </div>


    <div class="flex flex-row">

      <div>
        <div class="text-sm text-gray-500">{{ props.content.description }}</div>
      </div>

      <div>
        <router-link :to="'content/' + props?.content?.id">
          <div class="bg-blue-500 rounded-lg py-1 px-2">Plus ...</div>
        </router-link>
      </div>

    </div>

    <div>

      <div>
        <h2 class="font-sans font-semibold">Commentaires</h2>
        <message-list :subject-id="props.content.id" :messages="messages">
        </message-list>
      </div>

      <div class="border-t-2 border-gray-300 mt-4 pt-4">
        <post-message :subject-id="props.content.id" @message-posted="addMessage">
        </post-message>
      </div>

    </div>

  </div>

</template>

<script setup>

import {computed, reactive} from 'vue';
import {time_ago} from "@/internal_time_ago.js";
import MessageList from "@/views/messages/MessageList.vue";
import PostMessage from "@/views/messages/PostMessage.vue";

const isHttpUrl = computed(() => props.content?.uri?.startsWith('http'))

const props = defineProps({
  content: {
    type: Object,
    required: true,
  }
});

const messages = reactive([]);

function addMessage(newMessage) {
  messages.unshift(newMessage)
}

</script>