<template>
    <div>
        <v-progress-circular
            v-if="!isInitialized"
            :size="100"
            :width="7"
            color="purple"
            indeterminate
        ></v-progress-circular>
        <v-card v-if="isEmpty">
            <v-card-text>No notes yet :/</v-card-text>
        </v-card>
        <v-row v-else>
            <v-col
                v-for="note in notes"
                :key="note.uuid"
                cols="12"
                md="6"
                lg="4"
                xl="3"
            >
                <NoteCard
                    :uuid="note.uuid"
                    :title="note.title"
                    :updated-at="note.updatedAt"
                    :tags="note.tags"
                />
            </v-col>
        </v-row>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
    name: 'Notes',
    data: () => ({
        loading: true,
    }),
    computed: {
        ...mapState('notes', ['notes', 'isInitialized']),
        ...mapGetters('notes', ['isEmpty']),
    },
    mounted() {
        if (!this.isInitialized) this.load()
    },
    methods: {
        ...mapActions('notes', ['load']),
    },
    head: () => ({
        title: 'My notes',
    }),
}
</script>
