<template>
    <v-card>
        <v-card-title>
            {{ note.title }}
            <v-spacer />
            <TagsGroup :tags="note.tags" />
        </v-card-title>
        <v-card-text>
            <!-- html is sanitized -->
            <!-- eslint-disable-next-line -->
            <div v-html="renderedMarkdown"></div>
        </v-card-text>
    </v-card>
</template>

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

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