<template>
<section>
  <h3 class="font-weight-bold text-h4 p-2 mt-10 rounded border-2 border-pink-500">Latest posts</h3>
  <v-container class='px-6 mx-6 max-w-80'>
    <Post v-for='post in lastPosts' :key='post.URL' :post='post'/>
  </v-container>
  <!-- //- TextCohort.mt-1(v-for='cohort in cohorts' :key='cohort.id' :cohort='cohort')
    //- li(v-for='post, id in lastPosts' :key='id')
    //-   .title {{post.title}}
  //-  <div>
  //-   <p></p>
  //-   <ul v-for='post, id in posts' :key='id'>
  //-     <li>
  //-       <span>{{post.title}} {{post.date}} {{post.url}}</span>
  //-       <p v-html='post.content' />
  //-     </li>
  //-   </ul>
  //- </div> --> 
</section>
</template>
<script>
// import AddCohort from '@/components/AddCohort.vue'
// import Cohort from '@/components/Cohort.vue'
// import TextCohort from '@/components/TextCohort.vue'

export default {
  // components: { AddCohort, Cohort, TextCohort, Post },
  data: () => ({ lastPosts: [], cohorts: [] }),
  async fetch() {
    this.lastPosts = await this.$http.$get(`${process.env.baseUrl}/api/posts`)
    // this.cohorts = await this.$http.$get('http://localhost:3000/api/cohorts')
    // const cohorts = []
  },
  methods: {
    addCohort (cohort) {
      console.error('dentro add cohort', cohort)
      this.cohorts.push(cohort)
    }
  }
}
</script>