<template>
    <div>
        <div class="card m-2">
            <div v-if="loading"  class="p-2">
                <h2>Memos</h2>
                <Loader />
            </div>
            <div v-else class="p-2">
                <router-link to="/memos"><h2 class="mb-4 text-gray-900">{{ memos.count }} Memos</h2></router-link>
                <router-link :to="memos.last_updated.links.self" class="m-2 block">
                    <div class="flex justify-between text-black">
                        Dernier édité
                        <span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_updated.data.last_updated }}</span>
                    </div>
                    <div class="text-2xl font-bold">{{ memos.last_updated.data.name }}</div>
                </router-link>
                <hr class="border border-gray-900">
                <router-link :to="memos.last_created.links.self" class="m-2 block">
                    <div class="flex justify-between text-black">
                        Dernier créé
                        <span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_created.data.last_updated }}</span>
                    </div>
                    <div class="text-2xl font-bold">{{ memos.last_created.data.name }}</div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import Loader from '../../components/Loader'

export default {
    name: 'MemoHome',
    components: {
        Loader
    },
    data: function () {
        return {
            loading: true,
            memos: '',
        }
    },
    mounted() {
        // eslint-disable-next-line no-undef
        axios.get('/api/memos/home')
            .then(response => {
                this.memos = response.data.data
                console.log(this.memos)
                this.loading = false
            })
            .catch(() => {
                this.loading = false
                console.log('Unable to fetch memos.')
            })
    }
}
</script>

<style scoped>

</style>
