<template>
<section>
  <section>
    <!-- <v-btn-toggle
      v-model="selectedCohorts"
      dense
      tile
      color="deep-purple accent-3"
      group> -->
      <v-tabs color='pink'>
        <v-tab class='font-weight-bold' v-for='cohort in cohorts' :key='cohort.id' @click='selectCohort(cohort.id)' v-text='cohort.name'></v-tab>
      </v-tabs>      
    <!-- </v-btn-toggle> -->
  </section>
  <h3 class="font-weight-bold text-h4 p-2 mt-10 rounded border-2 border-pink-500">{{selectedCohort.name}}</h3>
  <v-container class='px-6 mx-6 max-w-80'>
    <Post v-for='post in posts' :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: () => ({ posts: [], cohorts: [], selectedCohort: {} }),
  async fetch() {
    this.posts = await this.$http.$get(`${process.env.baseUrl}/api/posts`)
    this.cohorts = await this.$http.$get(`${process.env.baseUrl}/api/cohorts`)
    this.cohorts.unshift({ id: -1, name: 'Latest' })
    // const cohorts = []
  },
  methods: {
    addCohort (cohort) {
      console.error('dentro add cohort', cohort)
      this.cohorts.push(cohort)
    },
    async selectCohort (id) {
      this.selectedCohort = this.cohorts.find(c => c.id === id)
      if (id === -1) {
        this.posts = await this.$http.$get(`${process.env.baseUrl}/api/posts`)
      } else {
        const cohort = await this.$http.$get(`/api/cohort/${id}`)
        this.posts = cohort.posts
      }
    }
  }
}
</script>