<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>