<template>
    <v-container grid-list-md>
        <!-- <h1>Mountaiins</h1> -->
        <!-- <ul v-for="wn in worldNews.slice(-4)" :key="wn.slug">
        <li>{{ wn.title }}</li>
        <li>{{ wn.image.url }}</li>
      </ul> -->
        <v-layout row wrap v-if="worldNews.length > 0">
            <v-flex v-for="wn in worldNews" :key="worldNews.slug" xs12 md6 lg3>
                <nuxt-link :to="`/en/${wn.slug}`">
                    <v-card width="95%">
                        <v-img :src="`https://api5.siliconpin.com${wn.image.url}`" aspect-ratio="2.75"></v-img>
                            <span class="px-4">On : {{wn.created_at.slice(0,10)}},
                           at{{wn.created_at.slice(0,10)}} </span>

                        <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 v-else>
            <h4 style="margin-left: 20px;">No news available in this topic now! Please visit again.</h4>
        </v-layout>
    </v-container>
</template>
<script>
    export default {
        layout: 'en',
        async asyncData({ $axios, route }) {
            let worldNews = await $axios.$get(
                `/bartas/?category=` + route.params.slug + `&lang=en&_sort=id:DESC`
            );
            // console.log(worldNews);
            worldNews = JSON.parse(JSON.stringify(worldNews).replace(/\:null/gi, "\:\"\""));

            return { worldNews };
        },
    };
</script>