<template>
  <v-row class='post mb-8'>
    <v-col cols=12 lg=4 class='py-0 pa-md-2'>
      <a :href='post.URL' target='_blank'><v-img class='rounded-lg' max-height="250" :src="post.image" alt=""></v-img></a>
    </v-col>
    <v-col cols=12 lg=8 class='py-0 pl-md-3'>
      <div>{{post.source.name}}</div>
      <a class='text-h6 pa-1 font-weight-bold' :href='post.URL' target='_blank'>{{post.title}}</a>
      <p class='font-weight-light'>{{new Date(post.date).toLocaleString('it-IT', { weekday: 'long', month: 'long', day: 'numeric'})}}</p>
      <v-chip v-for='tag in post.tags' :key='tag.id' label small
        class='ma-1 yellow accent-1'
        v-text='`#${tag.name}`'></v-chip>
    </v-col>
  </v-row>
<!-- <div class='post p-2 mb-10  bg-white'>
  <div role='title' class="block pt-2 mb-3 border-b-2" >
      <a target="_blank" :href='post.URL' v-html='post.title' class='text-xl font-bold text-violet-500'></a>
      <span class="font-base text-base float-right">{{new Date(post.date).toLocaleString()}} - <b><a :href='post.source.link'>{{post.source.name}} <img class="inline h-5 w-5 rounded-full" :src="post.source.image || post.source.link + 'favicon.ico'" alt="" /></a></b></span>
  </div>
  <span class='text-xl' v-html='post.summary || post.content'></span>
</div> -->
</template>
<script>
export default {
  props: {
    post: Object
  },
//   async setup(props) {
//     const res = await fetch(`http://localhost:3000/api/cohort/${props.cohort.id}`).then(res => res.json())
//     return { cohort: res.cohort, posts: res.posts }
//   },
}
</script>
<style>
.post img {
  max-width: 500px;
  max-height: 400px;
}

.post a{
  color: black;
  text-decoration: none;
}

.post a:hover {
  background-color: #fff;
  text-decoration: underline;
}
</style>



