<div>

        <button v-if="annotation" @click="readonly = !readonly"

            class="btn btn-xs pull-right"

            v-bind:class="{ 'btn-primary': readonly, 'btn-warning': !readonly }">

            <i class="fa fa-edit" v-if="readonly"></i>

            <span v-if="readonly">Modifier</span>

            <i class="fa fa-ban" v-if="!readonly"></i>

            <span v-if="!readonly">Annuler</span>

        </button>

        <form v-bind:action="formAction" method="post">

            <slot>

                <!-- CSRF token -->

            </slot>

            <input type="hidden" name="fragment" v-model="fragment">

            <div v-if="annotation" class="form-group form-group-sm">

                <label class="control-label">Titre</label>

                <input type="text" class="form-control" name="title" v-model="title" v-if="!readonly">

                <p v-if="readonly" class="small" v-bind:class="{ 'text-muted': !title }">{{ title || 'Pas de titre' }}</p>

            </div>

            <div v-if="annotation" class="form-group form-group-sm">

                <label class="control-label">Description</label>

                <textarea class="form-control" name="description" v-model="description" v-if="!readonly" placeholder="Décrivez ce que vous voyez"></textarea>

                <p v-if="readonly" class="small" v-bind:class="{ 'text-muted': !description }">{{ description || 'Pas de description' }}</p>

            </div>

            <div v-if="annotation" class="form-group form-group-sm">

                <label class="control-label">Mots-clé</label>

                <tag-list ref="taglist"

                    v-bind:original-tags="annotation.tags"

                    v-bind:readonly="readonly"

                    @change="onTagsChange($event.tags)"></tag-list>

                <input type="hidden" name="tags" v-model="serializedTags">

            </div>

            <button type="submit" v-if="annotation &amp;&amp; !readonly" v-bind:class="{ disabled: !hasChanged }"

                class="btn btn-block btn-sm btn-primary">Enregistrer une nouvelle version</button>

        </form>

    </div>

        title: '',

        description: '',

        fragment: '',

        tags: [],

        readonly: true,

        props: {

            action: String,

            annotation: {

                type: Object,

                default: function () {

                    return null;

                }

            },

        },

                        title: annotation.title,

                        description: annotation.description,

                        fragment: annotation.fragment,

                        tags: annotation.tags.slice(),

                        readonly: true,

    clear: both;