<template>
    <div class="container mx-auto">
        <form @submit.prevent="submit">
            <textarea
                v-model="content"
                aria-label="markdown input"
                name="content"
                rows="30"
                style="outline: none !important;"
                class="w-full bg-gray-800 p-5"
                spellcheck="false"
            ></textarea>
            <button
                class="block bg-blue-700 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded"
                type="submit"
            >
                Save
            </button>
        </form>
    </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
    name: 'New',
    data: () => ({
        title: 'Test',
        tags: [],
        content: '',
    }),
    methods: {
        ...mapActions('notes', ['create']),
        submit() {
            this.create({
                title: this.title,
                tags: this.tags,
                content: this.content,
            })
        },
    },
}
</script>
