<template>
    <div class="container mx-auto mb-5 border-b">
        <div>
            <h2 class="text-gray-800 text-3xl text-right mt-3 mb-2 MvAamu"
                style="font-weight: 100;" 
                    >
               މިއަދުގެ ޚުލާޞާ
            </h2>
        </div>

        <div class="flex md:-mx-4 flex-wrap md:px-0 flex-row-reverse">
            <div class="w-full md:w-1/2 px-4 py-4">
                <div>
                    <img :src="article.featured_image" class="rounded" />
                </div>
                <div class="flex flex-col justify-end">
                    <a
                        :href="'/article/' + article.id"
                        class="text-2xl md:text-3xl lg:text-3xl leading-11 text-gray-700 pb-4 pt-4 MvTyper font-semibold hover:underline"
                        style="direction:rtl;"
                        v-text="article.title"
                    ></a>
                      <p
                        class="ml-1 mb-4 text-gray-600 text-right MvTyper"
                        style="direction:rtl;"
                    >
                        {{ article.body[0].slice(0,200) }}...
                    </p>
                </div>
             

                <div class="flex justify-end items-center mt-3">
                    <div>
                        <a
                            :href="'/source/' + article.source.slug"
                            class="hover:underline"
                        >
                            <p
                                class="font-semibold text-gray-700 text-sm capitalize MvTyper"
                                v-text="article.source.name"
                            ></p>
                        </a>
                    </div>

                    <img
                        :src="article.source.logo"
                        class="h-10 w-10 rounded-full ml-1 object-cover"
                    />
                </div>

                <div
                    class="text-gray-600 text-md mt-4 flex justify-end items-center mb-3"
                >
                    <p
                        class="ml-1 text-gray-600 text-right MvTyper"
                        style="direction:rtl;"
                    >
                        {{ article.published_date | dhivehiDate }}
                    </p>
                </div>
            </div>

            <div class="w-full md:w-1/4">
                <div class="flex md:-mx-4 flex-wrap mb-7 md:px-0 rtl">
                    <div
                        class="w-1/2 md:w-full lg:w-full px-4 md:px-8 lg:px-8 py-4"
                        v-for="subarticle in subarticles"
                        :key="subarticle.id"
                    >
                        <div class="flex justify-end">
                            <img
                                :src="subarticle.featured_image"
                                class="rounded"
                            />
                        </div>
                        <div class="flex justify-end">
                            <a
                                :href="'/article/' + subarticle.id"
                                class="text-md leading-9 font-semibold py-3 text-gray-700 MvTyper"
                                v-text="subarticle.title"
                                style="direction:rtl;"
                            ></a>
                        </div>

                        <div class="flex flex-row-reverse justify-between mt-2">
                            <div class="flex justify-end items-center">
                                <div>
                                    <p
                                        class="font-semibold text-gray-600 text-sm capitalize MvTyper"
                                        v-text="subarticle.source.name"
                                    ></p>
                                </div>

                                <img
                                    :src="subarticle.source.logo"
                                    class="h-8 w-8 rounded-full ml-1 object-cover"
                                />
                            </div>

                           
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-full md:w-1/4 px-4 py-4">
                <ul
                    style="list-style: none; float: right; padding: 0px;"
                    class="mt-8 sm:mt-8 md:mt-0 lg:mt-0"
                >
                    <li
                        class="pb-8"
                        v-for="listarticle in listarticles"
                        :key="listarticle.id"
                    >
                        <div class="flex justify-end">
                            <a
                                :href="'/article/' + listarticle.id"
                                class="text-md leading-normal text-gray-800 pb-4 MvTyper text-right hover:underline"
                                style="direction:rtl;"
                                v-text="listarticle.title"
                            >
                            </a>
                        </div>
                        <div class="border-b mb-3"></div>
                        <div class="flex justify-between items-center flex-row-reverse">
                            <div class="flex items-end flex-col">
                                 <a
                                :href="'/source/' + listarticle.source.slug"
                                class="hover:underline"
                            >
                                <span
                                    class="MvTyper text-sm text-gray-600"
                                    v-text="listarticle.source.name"
                                ></span>
                                 </a>
                            </div>

                            <div>
                                <span class="MvTyper text-sm text-gray-600">{{listarticle.published_date | dhivehiDate}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import * as moment from "moment";

export default {
    name: "todays-pick",
    data() {
        return {
            article: [],
            subarticles: [],
            listarticles: []
        };
    },

    filters: {
        dhivehiDate: function(date) {
            if (!date) return "";
            moment.locale("dv");
            return moment(date).format("Do MMMM YYYY  h:mm");
        }
    },

    mounted() {
        axios
            .get("api/today")
            .then(response => {
                this.article = response.data[0];
                this.subarticles = response.data.slice(1, 3);
                this.listarticles = response.data.slice(3, 7);
            })
            .catch(error => {
                console.log(error);
            });
    }
};
</script>
