<template>
    <div>
        <div class="py-6 flex justify-center lg:justify-end md:justify-end">
            <h3
                class="text-gray-800 font-bold text-3xl MvAamu"
                style="direction: rtl;"
            >
                މިއަދުގެ ޙުލާސާ
            </h3>
        </div>
        <!-- featured section -->
        <div
            class="flex flex-wrap md:flex-no-wrap space-x-0 md:space-x-6 mb-5 border-b"
        >
            <!-- sub-main posts -->
            <div class="md:w-4/7">
                <div v-for="subarticle in subarticles" :key="subarticle.id">
                    <a
                        href=""
                        class="rounded w-full flex flex-col md:flex-row mb-10"
                    >
                        <div class="bg-white rounded px-4">
                            <div
                                class="md:mt-0 text-gray-800 font-semibold text-xl xl:text-md lg:text-md mb-2  text-right leading-8 sm:leading-9 md:leading-9 MvTyper hover:underline"
                                v-text="subarticle.title"
                                style="direction:rtl;"
                            ></div>

                            <div class="flex justify-end items-center">
                                <div>
                                    <p
                                        class="font-semibold text-gray-700 text-sm capitalize MvTyper"
                                        v-text="subarticle.source.name"
                                    ></p>
                                </div>

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

                            <div
                                class="text-gray-600 text-md mt-1 flex justify-end items-center"
                            >
                                <svg
                                    class="h-4 w-4"
                                    viewBox="0 0 443.294 443.294"
                                    fill="currentColor"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
                                    />
                                    <path
                                        d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
                                    />
                                </svg>
                                <span
                                    class="ml-1"
                                    v-text="subarticle.readtime"
                                ></span>

                                <p
                                    class="text-gray-600 text-sm text-right mb-2"
                                >
                                    &#8210;
                                    {{
                                        subarticle.published_date
                                            | moment("calendar")
                                    }}
                                </p>
                            </div>

                            <p
                                class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600 MvTyper"
                                style="direction:rtl;"
                                v-text="subarticle.body[0]"
                            ></p>
                        </div>
                        <img
                            :src="subarticle.featured_image"
                            class="block md:hidden lg:block rounded-md h-64 md:h-32 m-4 md:m-0"
                        />
                    </a>
                </div>
            </div>

            <!-- main post -->
            <div
                class="mb-4 lg:mb-0 p-4 lg:p-0 w-full md:w-4/7 relative rounded block"
                v-if="article"
            >
                <a
                    href="#"
                >
                    <img
                        :src="article.featured_image"
                        class="rounded-md object-cover w-full h-3/4"
                    />
                </a>

                <a
                    href="#"
                >
                    <h1
                        class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvTyper"
                        style="direction:rtl;"
                        v-text="article.title"
                    ></h1>
                </a>

                <div class="flex justify-end items-center">
                    <div>
                        <p
                            class="font-semibold text-gray-700 text-sm capitalize MvTyper"
                            v-text="article.source.name"
                        ></p>
                    </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"
                >
                    <span class="mr-1 ml-1" v-text="article.readtime"></span>

                    <svg
                        class="h-4 w-4"
                        viewBox="0 0 443.294 443.294"
                        fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
                        />
                        <path
                            d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
                        />
                    </svg>
                    <p class="ml-1 text-gray-600 text-right">
                        &#8210;
                        {{ article.published_date | moment("calendar") }}
                    </p>
                </div>
            </div>
        </div>
        <!-- end featured section -->
    </div>
</template>

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

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