<template>
    <v-card height="100%">
        <v-card-title>{{ title }}</v-card-title>
        <v-card-text>
            <slot></slot>
        </v-card-text>

        <div class="tags">
            <v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip>
        </div>

        <v-divider class="mt-auto"></v-divider>

        <v-card-actions>
            <v-btn
                text
                color="deep-purple accent-4" dark>
                <v-icon left>mdi-eye</v-icon>
                View
            </v-btn>
            <v-spacer/>
            <v-btn
                text
                color="deep-purple accent-4">
                <v-icon left>mdi-pencil</v-icon>
                Edit
            </v-btn>
        </v-card-actions>
    </v-card>
</template>

<script>
    export default {
        name: "Note",
        props: {
            title: {
                type: String,
                required: true
            },
            tags: {
                type: Array
            }
        }
    }
</script>

<style>
    .tags {
        padding: 16px;
    }

    .tags .v-chip {
        margin: 4px 8px 4px 0;
    }
</style>
