<template>
    <div class="border-b mb-10">
        <div>
            <h3
                class="text-gray-800 font-bold text-3xl text-right mt-3 mb-2 mr-3 MvAamu"
            >
                ފަހުގެ ޙަބަރުތަށް
            </h3>
        </div>

        <div class="flex justify-end">
            <!-- post cards -->
            <div class="w-full lg:w-2/3">
                <div v-for="story in recentStories" :key="story.id">
                    <router-link
                        :to="{ name: 'article.show', params: { id: story.id } }"
                        class="block w-full lg:flex mb-10 shadow rounded-lg"
                    >
                        <div
                            class="bg-white rounded px-4 flex flex-col justify-between leading-normal"
                        >
                            <div>
                                <div
                                    class="mt-5 text-gray-700 font-semibold text-2xl mb-2 text-right MvTyper hover:underline"
                                    style="direction:rtl;"
                                    v-text="story.title"
                                ></div>

                                <div
                                    class="flex items-center justify-end mt-3 mb-2"
                                >
                                    <p
                                        class="font-semibold text-gray-700 text-sm capitalize MvTyper"
                                        v-text="story.source.name"
                                    ></p>
                                    <p class="text-gray-600 text-xs ml-1">
                                        &mdash;
                                        {{
                                            story.published_date
                                                | moment("calendar")
                                        }}
                                    </p>
                                </div>

                                <p
                                    class="text-gray-700 text-base text-right MvTyper"
                                    style="direction:rtl;"
                                >
                                    {{ story.body[0] }}
                                </p>
                            </div>
                        </div>

                        <div
                            class="h-48 lg:w-48 flex-none bg-cover text-center overflow-hidden opacity-75 rounded-lg object-right"
                            :style="{
                                'background-image':
                                    'url(' + story.featured_image + ')'
                            }"
                            :title="story.meta.title"
                        ></div>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "recent-stories",

    data() {
        return {
            recentStories: []
        };
    },

    mounted() {
        axios
            .get("api/recent")
            .then(response => {
                this.recentStories = response.data.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
};
</script>
