<template>
    <v-card flat>
        <v-toolbar
            color="primary"
            dark
            extended
            prominent
        >
            <v-app-bar-nav-icon></v-app-bar-nav-icon>
            <v-toolbar-title>Notes</v-toolbar-title>
        </v-toolbar>

        <v-card
            class="mx-auto"
            max-width="700"
            style="margin-top: -64px;"
        >
            <v-toolbar flat>
                <v-toolbar-title class="grey--text">Create a note</v-toolbar-title>
            </v-toolbar>

            <v-divider></v-divider>

            <v-card-text>
                <v-text-field label="Title" value="My new note"></v-text-field>

                <v-textarea
                    label="Text"
                    counter
                    loader-height="5"
                    spellcheck="false"
                    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse"
                ></v-textarea>

                <v-combobox
                    v-model="tags"
                    :items="possibleTags"
                    :delimiters="delimiters"
                    label="Tags"
                    multiple
                    chips
                    deletable-chips
                ></v-combobox>
            </v-card-text>

            <v-divider></v-divider>


            <v-card-actions>
                <v-btn
                    color="success"
                    class="mx-auto"
                    depressed
                    block
                >
                    Create
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-card>
</template>

<script>
    export default {
        name: "new",
        layout: "empty",
        data: () => ({
            delimiters: [" ", ","],
            tags: [],
            possibleTags: ["Dev", "Ephec", "Java"]
        })
    }
</script>

<style scoped>

</style>
