﻿<template>


  <div class="border-2 shadow-2xl mb-4 ">
    <div class="mt-1">

      <v-img class="mt-1 rounded-t-2xl " :src="props.post.banner"
             v-if="!isHttpUrl">
      </v-img>


      <iframe  style="min-height: 400px" class="w-full rounded-t-2xl"
           v-if="isHttpUrl"
              :src="props.post.banner"
              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="text-lg font-bold m-4">{{ props.post.title }}</div>
    <div class="text-sm text-gray-500 m-4">{{ props.post.title }}</div>
    <div class="text-base text-gray-700 m-4 text-justify">{{ props.post.content }}</div>
  </div>

</template>

<script setup>
import {defineProps, computed} from 'vue';

const isHttpUrl = computed(() => props.post.banner.startsWith('http'))

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


</script>