<template>
  <v-container>
    <v-row class="px-lg-14 ">
      <v-col cols="12" sm="12" md="12" lg="6">
        <nuxt-link :to="`/en/${worldNews[0].slug}`">
          <v-card>
            <v-img :src="`https://api5.siliconpin.com${worldNews[0].image.url}`" aspect-ratio="1.75">
              <span v-text="worldNews[0].text_over_image" class="text_over_image"></span>
            </v-img>

            <v-card-title primary-title>

             <p> <span>Publish on : {{ worldNews[0].created_at.slice(0, 10) }}, </span>
                      <span>at : {{ worldNews[0].created_at.slice(11, -5) }} </span></p>

              <p v-text="worldNews[0].title" class="text-lg-h4 text-sm-h5"></p>
              <!-- <v-text class="text-lg-h4 text-sm-h5">{{worldNews[0].title}}</v-text> -->

            </v-card-title>
          </v-card>
        </nuxt-link>
      </v-col>

      <v-col sm="12" md="12" lg="6">
        <v-row>
          <v-col lg="6" sm="6">
            <nuxt-link :to="`/en/${worldNews[1].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${worldNews[1].image.url}`" aspect-ratio="1.75">
                  <span v-text="worldNews[1].text_over_image" class="text_over_image"></span>
                </v-img>


                <p class="pa-2"> <span>On : {{ worldNews[1].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ worldNews[1].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{worldNews[1].title}}</span></p>

               
              </v-card>
            </nuxt-link>
          </v-col>
          <v-col sm="6" lg="6">

            <nuxt-link :to="`/en/${worldNews[2].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${worldNews[2].image.url}`" aspect-ratio="1.75">
                  <span v-text="worldNews[2].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ worldNews[2].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ worldNews[2].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{worldNews[2].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
        </v-row>
        <v-row>
          <v-col lg="6" sm="6">
            <nuxt-link :to="`/en/${worldNews[3].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${worldNews[3].image.url}`" aspect-ratio="1.75">
                  <span v-text="worldNews[3].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ worldNews[3].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ worldNews[3].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{worldNews[3].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
          <v-col sm="6" lg="6">

            <nuxt-link :to="`/en/${worldNews[4].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${worldNews[4].image.url}`" aspect-ratio="1.75">
                  <span v-text="worldNews[4].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ worldNews[4].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ worldNews[4].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{worldNews[4].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
        </v-row>

      </v-col>
    </v-row>
    <!-- ////////////////////////////////////// -->
    <v-row class="px-lg-14 ">
      <v-col cols="12" sm="12" md="12" lg="6">
        <nuxt-link :to="`/en/${localNews[0].slug}`">
          <v-card>
            <v-img :src="`https://api5.siliconpin.com${localNews[0].image.url}`" aspect-ratio="1.75">
              <span v-text="localNews[0].text_over_image" class="text_over_image"></span>
            </v-img>

            <v-card-title primary-title>
              <p> <span>Publish on : {{ worldNews[0].created_at.slice(0, 10) }}, </span>
                      <span>at : {{ worldNews[0].created_at.slice(11, -5) }} </span></p>

              <span v-text="localNews[0].title" class="text-lg-h4 text-sm-h5"></span>
              <!-- <v-text class="text-lg-h4 text-sm-h5">{{localNews[0].title}}</v-text> -->
            </v-card-title>
          </v-card>
        </nuxt-link>
      </v-col>

      <v-col sm="12" md="12" lg="6">
        <v-row>
          <v-col lg="6" sm="6">
            <nuxt-link :to="`/en/${localNews[1].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${localNews[1].image.url}`" aspect-ratio="1.75">
                  <span v-text="localNews[1].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ localNews[1].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ localNews[1].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{localNews[1].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
          <v-col sm="6" lg="6">

            <nuxt-link :to="`/en/${localNews[2].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${localNews[2].image.url}`" aspect-ratio="1.75">
                  <span v-text="localNews[2].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ localNews[2].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ localNews[2].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{localNews[2].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
        </v-row>
        <v-row>
          <v-col lg="6" sm="6">
            <nuxt-link :to="`/en/${localNews[3].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${localNews[3].image.url}`" aspect-ratio="1.75">
                  <span v-text="localNews[3].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ localNews[3].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ localNews[3].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{localNews[3].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
          <v-col sm="6" lg="6">

            <nuxt-link :to="`/en/${localNews[4].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${localNews[4].image.url}`" aspect-ratio="1.75">
                  <span v-text="localNews[4].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ localNews[4].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ localNews[4].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{localNews[4].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
        </v-row>

      </v-col>
    </v-row>
    <!-- /////////////////////////////////////////////// -->
    <v-row class="px-lg-14 ">
      <v-col cols="12" sm="12" md="12" lg="6">
        <nuxt-link :to="`/en/${nationalNews[0].slug}`">
          <v-card>
            <v-img :src="`https://api5.siliconpin.com${nationalNews[0].image.url}`" aspect-ratio="1.75">
              <span v-text="nationalNews[0].text_over_image" class="text_over_image"></span>
            </v-img>

            <v-card-title primary-title>
              <p> <span>Publish on : {{ nationalNews[0].created_at.slice(0, 10) }}, </span>
                      <span>at : {{ nationalNews[0].created_at.slice(11, -5) }} </span></p>

              <span v-text="nationalNews[0].title" class="text-lg-h4 text-sm-h5"></span>
              <!-- <v-text class="text-lg-h4 text-sm-h5">{{nationalNews[0].title}}</v-text> -->
            </v-card-title>
          </v-card>
        </nuxt-link>
      </v-col>

      <v-col sm="12" md="12" lg="6">
        <v-row>
          <v-col lg="6" sm="6">
            <nuxt-link :to="`/en/${nationalNews[1].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${nationalNews[1].image.url}`" aspect-ratio="1.75">
                  <span v-text="nationalNews[1].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ nationalNews[1].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ nationalNews[1].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{nationalNews[1].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
          <v-col sm="6" lg="6">

            <nuxt-link :to="`/en/${nationalNews[2].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${nationalNews[2].image.url}`" aspect-ratio="1.75">
                  <span v-text="nationalNews[2].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ nationalNews[2].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ nationalNews[2].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{nationalNews[2].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
        </v-row>
        <v-row>
          <v-col lg="6" sm="6">
            <nuxt-link :to="`/en/${nationalNews[3].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${nationalNews[3].image.url}`" aspect-ratio="1.75">
                  <span v-text="nationalNews[3].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ nationalNews[3].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ nationalNews[3].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{nationalNews[3].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
          <v-col sm="6" lg="6">

            <nuxt-link :to="`/en/${nationalNews[4].slug}`">
              <v-card>
                <v-img :src="`https://api5.siliconpin.com${nationalNews[4].image.url}`" aspect-ratio="1.75">
                  <span v-text="nationalNews[4].text_over_image" class="text_over_image"></span>
                </v-img>

                <p class="pa-2"> <span>On : {{ nationalNews[4].created_at.slice(0, 10) }} , </span>
                      <span>at : {{ nationalNews[4].created_at.slice(11, -5) }} </span><br>
                  <span class="font-weight-bold">{{nationalNews[4].title}}</span></p>
              </v-card>
            </nuxt-link>
          </v-col>
        </v-row>

      </v-col>
    </v-row>


    <!-- ////////////////////////////////////////// -->


    <!-- <v-layout row wrap >
            <v-flex v-for="wn in latestNews" :key="latestNews.slug" xs12 md6 lg3>
              <nuxt-link :to="`/${wn.slug}`">
              
                <v-card >
                  
                  <v-img
                    :src="`https://api5.siliconpin.com${wn.image.url}`"
                    aspect-ratio="1.75"
                  >
                  <span v-text="wn.text_over_image" class="text_over_image"></span>
                  </v-img>
                  
                  <v-card-title primary-title>
                    <div>
                      <h3 class="headline mb-0" v-text="wn.title"></h3>
                    </div>
                  </v-card-title>
                </v-card>
              </nuxt-link>
            </v-flex>
        </v-layout>-->

    <v-layout row wrap>
      <v-flex v-for="wn in worldNews" :key="worldNews.slug" xs6 md6 lg3>
        <nuxt-link :to="`/en/${wn.slug}`">
          <v-card class="mx-2 mb-2">
            <v-img :src="`https://api5.siliconpin.com${wn.image.url}`" aspect-ratio="1.75">
              <span v-text="wn.text_over_image" class="text_over_image"></span>
            </v-img>

            <div class="pa-4">

              <p>On : <span >{{wn.created_at.slice(0,10)}} ,</span>
              at : <span >{{wn.created_at.slice(11,-5)}} </span></p>

              <div>
                <h3 class="headline mb-0" v-text="wn.title"></h3>
              </div>
            </div>
          </v-card>
        </nuxt-link>
      </v-flex>
    </v-layout>
    <v-layout row wrap>
      <v-flex v-for="wn in nationalNews" :key="nationalNews.slug" xs6 md6 lg3>
        <nuxt-link :to="`/en/${wn.slug}`">
          <v-card class="mx-2 mt-8">
            <v-img :src="`https://api5.siliconpin.com${wn.image.url}`" aspect-ratio="1.75">
              <span v-text="wn.text_over_image" class="text_over_image"></span>
            </v-img>

            <div class="pa-4">

              <p>On : <span >{{wn.created_at.slice(0,10)}} ,</span>
              at : <span >{{wn.created_at.slice(11,-5)}} </span></p>

              <div>
                <h3 class="headline mb-0" v-text="wn.title"></h3>
              </div>
            </div>
          </v-card>
        </nuxt-link>
      </v-flex>
    </v-layout>
    <v-layout row wrap>
      <v-flex v-for="wn in localNews" :key="localNews.slug" xs6 md6 lg3>
        <nuxt-link :to="`/en/${wn.slug}`">
          <v-card class="mx-2 mt-8">
            <v-img :src="`https://api5.siliconpin.com${wn.image.url}`" aspect-ratio="1.75">
              <span v-text="wn.text_over_image" class="text_over_image"></span>
            </v-img>

            <div class="pa-4">

              <p>On : <span >{{wn.created_at.slice(0,10)}} ,</span>
              at : <span >{{wn.created_at.slice(11,-5)}} </span></p>

              <div>
                <h3 class="headline mb-0" v-text="wn.title"></h3>
              </div>
              </div>
          </v-card>
        </nuxt-link>
      </v-flex>
    </v-layout>
    <v-layout row wrap>
      <v-flex v-for="vn in videoNews" :key="videoNews.id" xs6 md6 lg3>
        <v-card width="95%">
          <lite-youtube v-bind:videoid="`${vn.content}`"
            params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1" />
          <v-card-title primary-title>
            <div>
              <h3 class="headline mb-0" v-text="vn.title"></h3>
            </div>
          </v-card-title>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
  export default {
    layout: 'en',
    async asyncData({ $axios, $config }) {
      let worldNews = await $axios.$get(`/bartas/?category=world&lang=en&_sort=id:DESC&_limit=8`)
      let nationalNews = await $axios.$get(`/bartas/?category=national&lang=en&_sort=id:DESC&_limit=8`)
      let localNews = await $axios.$get(`/bartas/?category=local&lang=en&_sort=id:DESC&_limit=8`)
      // let articleNews = await $axios.$get(`/bartas/?category=article&_sort=id:DESC&_limit=4`)
      // let editorialNews = await $axios.$get(`/bartas/?category=editorial&_sort=id:DESC&_limit=4`)
      let videoNews = await $axios.$get(`/bartas/?category=video&lang=en&_sort=id:DESC&_limit=8`)

      //_ne:category=video&
      // let latestNews = await $axios.$get(`/bartas/?_sort=id:DESC&_limit=40&category=:video`)

      // need to create the json / var first
      // if(worldNews.length < 1) { worldNews[0].image.url="", worldNews[0].slug="404", worldNews[0].slug="not found";}
      // if(nationalNews.length < 1) { nationalNews[0].image.url="", nationalNews[0].slug="404", nationalNews[0].slug="not found";}
      // if(localNews.length < 1) { localNews[0].image.url="", localNews[0].slug="404", localNews[0].slug="not found";}
      // if(articleNews.length < 1) { articleNews[0].image.url="", articleNews[0].slug="404", articleNews[0].slug="not found";}
      // if(editorialNews.length < 1) { editorialNews[0].image.url="", editorialNews[0].slug="404", editorialNews[0].slug="not found";}
      // if(videoNews.length < 1) { videoNews[0].image.url="", videoNews[0].slug="404", videoNews[0].slug="not found";}

      worldNews = JSON.parse(JSON.stringify(worldNews).replace(/\:null/gi, "\:\"\""));
      nationalNews = JSON.parse(JSON.stringify(nationalNews).replace(/\:null/gi, "\:\"\""));
      localNews = JSON.parse(JSON.stringify(localNews).replace(/\:null/gi, "\:\"\""));
      // articleNews = JSON.parse(JSON.stringify(articleNews).replace(/\:null/gi, "\:\"\"")); 
      // editorialNews = JSON.parse(JSON.stringify(editorialNews).replace(/\:null/gi, "\:\"\"")); 
      videoNews = JSON.parse(JSON.stringify(videoNews).replace(/\:null/gi, "\:\"\""));

      // latestNews = JSON.parse(JSON.stringify(latestNews).replace(/\:null/gi, "\:\"\"")); 

      return { worldNews, nationalNews, localNews, videoNews }
    },
    head() {
      return {
        title: "barta-india.in news with views",
        meta: [
          // hid is used as unique identifier. Do not use `vmid` for it as it will not work
          {
            hid: 'description',
            name: 'description',
            content: "local news, national and international news with our views."
          },
          {
            hid: 'og:description',
            name: 'og:description',
            content: "local news, national and international news with our views."
          },
          {
            hid: 'og:title',
            name: 'og:title',
            content: "barta-india.in news with views"
          },
          {
            hid: 'og:url',
            name: 'og:url',
            content: 'https://barta-india.in/'
          },
          {
            hid: 'og:image',
            name: 'og:image',
            content: 'https://barta-india.in/icon.png'
          },
          {
            hid: 'og:image:secure_url',
            name: 'og:image:secure_url',
            content: 'https://barta-india.in/icon.png'
          },
          {
            hid: 'og:type',
            name: 'og:type',
            content: 'News list'
          }
        ]
      }
    }
  } 
</script>
<style scoped>

</style>