<template>
    <div class="mb-10">
        <div>
            <h3
                class="text-gray-800 text-3xl text-center mt-5 mb-2 mr-3 MvAamu"
                style="font-weight: 100;"
            >
                ފަހުގެ ޙަބަރުތަށް
            </h3>
        </div>

        <div class="container mx-auto">
            <div class="flex md:-mx-4 flex-row-reverse flex-wrap mb-7 md:px-0">
                <div
                    class="w-1/2 md:w-1/4 px-4 py-4 flex-grow"
                    v-for="story in recentStories"
                    :key="story.id"
                >
                    <a :href="'/article/' + story.id">
                        <div
                            class="w-full h-auto overflow-hidden relative rounded"
                        >
                            <img :src="story.featured_image" />
                        </div>
                    </a>
                    <div class="w-full h-auto text-right overflow-hidden mt-3">
                        <a
                            :href="'/article/' + story.id"
                            class="text-md leading-9 font-semibold text-right text-gray-700 py-3 MvTyper hover:underline"
                            style="direction:rtl;"
                            v-text="story.title"
                        ></a>
                        <div class="flex items-center justify-end mt-3 mb-3">
                            <a :href="'/source/' + story.source.slug">
                                <div class="flex justify-end items-center">
                                    <div>
                                        <p
                                            class="font-semibold text-gray-700 text-sm capitalize MvTyper"
                                            v-text="story.source.name"
                                        ></p>
                                    </div>

                                    <img
                                        :src="story.source.logo"
                                        class="h-10 w-10 rounded-full ml-1 object-cover"
                                    />
                                </div>
                            </a>
                        </div>
                        <span class="text-gray-600 text-xs ml-1">
                            {{ story.published_date | moment("calendar") }}
                        </span>
                    </div>
                </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>

<style>
.dark-img {
    filter: brightness(90%);
}
</style>
