<template>

    <form>
        <button @click="close" type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <div class="form-group" v-bind:class="titleFormGroup" style="clear: both;">
            <label class="control-label">Titre</label>
            <input name="title" v-model="title" type="text" class="form-control input-sm" placeholder="Donnez un titre court">
        </div>
        <div class="form-group">
            <label class="control-label">Description</label>
            <textarea name="description" v-model="description" class="form-control input-sm" placeholder="Décrivez ce que vous voyez"></textarea>
        </div>
        <div class="form-group">
            <label class="control-label">Mots-clé</label>
            <tag-list ref="taglist" v-bind:original-tags="originalTags"></tag-list>
        </div>
        <button @click="save" class="btn btn-block btn-sm btn-primary">Valider</button>
    </form>

</template>

<script>

    import TagList from '../tagform/TagList.vue'

    export default {
        props: [
            'original-title',
            'original-description',
            'original-tags'
        ],
        components: {
            'tag-list': TagList
        },
        data() {
            return {
                title: '',
                description: '',
                tags: [],
                error: false
            }
        },
        computed: {
            titleFormGroup: function() {
                return {
                    'has-error': this.error
                }
            }
        },
        mounted() {
            if (this.originalTitle) {
                this.title = this.originalTitle;
            }
            if (this.originalDescription) {
                this.description = this.originalDescription;
            }
            this.$on('error', (err) => {
                if (err.title) {
                    this.error = true;
                }
            });
        },
        methods: {
            close: function(e) {
                e.preventDefault();
                this.$emit('close');
            },
            save: function(e) {
                e.preventDefault();

                this.error = false;
                if (this.title.trim().length === 0) {
                    this.$emit('error', {
                        title: true
                    });
                    return;
                }

                this.$emit('save', {
                    title: this.title,
                    description: this.description,
                    tags: this.$refs.taglist.tags
                });
            }
        }
    }

</script>

<style>
.popover {
    min-width: 300px;
}
.popover-content .form-group {
    margin-bottom: 10px;
}
.popover-content .form-group label {
    font-size: 12px;
}
.popover-content .taglist {
    margin: 10px 0 15px;
}
</style>