<template>
    <div class="p-2">
        <div class="flex-between flex-center mb-1">
            <a href="#" class="btn" @click="$router.back()">< Back</a>
            <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
        </div>
        <Loader v-if="loading" />
        <div v-else class="container-cards-list">
            <div v-if="memos.lenght === 0">
                <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
            </div>
            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="card">
                <div>
                    <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="cover">
                    <h1 class="p-1">{{ memo.data.name }}</h1>
                </div>
                <div class="memo-date p-1">{{ memo.data.last_updated }}</div>
            </router-link>
        </div>
    </div>
</template>

<script>
    import Loader from "../../components/Loader";

    export default {
        name: "MemoIndex",
        components: {
            Loader
        },
        data: function () {
            return {
                loading: true,
                memos: null,
            }
        },
        mounted() {
            axios.get('/api/memos')
                .then(response => {
                    this.memos = response.data.data
                    this.loading = false
                })
                .catch(error => {
                    this.loading = false
                    console.log('Unable to fetch memos.')
                })
        }
    }
</script>
