<template>
    <v-container fluid>
        <v-row dense align-content="stretch" align="stretch">
            <v-col
                v-for="(note, index) in notes"
                :key="index"
                cols="12"
                sm="6"
                md="4"
                xl="3"
                class="viewer"
            >
                <v-hover v-slot:default="{ hover }">
                    <Note
                        :hover="hover"
                        :title="note.title"
                        :tags="note.tags"
                        :updated-at="format(note.updatedAt)"
                    >
                        {{ note.content }}
                    </Note>
                </v-hover>
            </v-col>
        </v-row>

        <v-btn to="/create" fab fixed bottom right large color="accent">
            <v-icon>mdi-plus</v-icon>
        </v-btn>
    </v-container>
</template>

<script>
import Note from '@/components/Note';
import { format } from 'timeago.js';

export default {
    name: 'notes',
    title: 'Notes',
    components: { Note },
    data: () => ({
        notes: [],
    }),
    methods: { format },
    mounted() {
        this.$axios.get('/notes').then(e => (this.notes = e.data));
    },
};
</script>
