<template>
    <div>
        <div class="card">
            <div v-if="loading">
                <h2>Memos</h2>
                <Loader />
            </div>
            <div v-else-if="memos.length === 0">
                <router-link :to="'/memos/create'" class="mb-4 no-underline"><h2>No Memo</h2></router-link>
                <div class="flex justify-center items-center">
                    <router-link :to="'/memos/create'" class="btn-primary mt-6">Add Memos</router-link>
                </div>
            </div>
            <div v-else>
                <router-link to="/memos" class="mb-4 no-underline"><h2>{{ memos.count }} Memos</h2></router-link>
                <router-link :to="memos.last_updated.links.self" class="m-2 block no-underline">
                    <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-marine">
                <router-link :to="memos.last_created.links.self" class="m-2 block no-underline">
                    <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 => {
                if (response.data.data.count !== 0) {
                    this.memos = response.data.data
                }
                this.loading = false
            })
            .catch(() => {
                this.loading = false
            })
    }
}
</script>

<style scoped>

</style>
