<template>
    <v-card>
        <v-card-title>
            {{ note.title }}
            <v-spacer />
            <TagsGroup :tags="note.tags" />
        </v-card-title>
        <v-card-text>
            <div v-html="renderedMarkdown"></div>
        </v-card-text>
    </v-card>
</template>

<script>
import TagsGroup from '@/components/TagsGroup'
import renderMarkdown from '@/utils/markdown'

export default {
    name: 'Note',
    components: {
        TagsGroup,
    },
    data: () => ({
        note: {
            tags: [],
        },
    }),
    computed: {
        renderedMarkdown() {
            if (!this.note.chapters) return ''
            return renderMarkdown(this.note.chapters[0].content).contents
        },
    },
    mounted() {
        this.$axios
            .$get(`/notes/${this.$route.params.uuid}`)
            .then((note) => (this.note = note))
    },
}
</script>
