<template>
<div v-if='posts'>
  <h3 class="font-extrabold text-3xl text-pink-500 p-2 mt-10 rounded border-2 border-pink-500">{{cohort.name}}</h3>
  <div v-for='post in posts' :key="post.URL" class='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'></span>
  </div>
</div>
</template>
<script>
export default {
  props: {
    cohort: Object
  },
  async fetch(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 lang="scss" scoped>
.card {
  @apply w-full rounded-md border-2 bg-stone-800 mt-3 inline-block
    max-w-sm border-pink-500;
  
  .title {
    @apply text-lime-300 p-0 m-2;
  }
}
</style>




