--- a/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Wed Feb 22 12:10:03 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Wed Feb 22 13:16:21 2017 +0100
@@ -1,28 +1,43 @@
 <template>
-    <form v-bind:action="formAction" method="post">
-        <slot>
-            <!-- CSRF token -->
-        </slot>
-        <input type="hidden" name="fragment" v-model="fragment">
+    <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>
         <div v-if="!annotation" class="alert alert-warning">
             Aucune annotation sélectionnée.
         </div>
-        <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">
-        </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"></textarea>
-        </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" @change="onTagsChange($event.tags)"></tag-list>
-            <input type="hidden" name="tags" v-model="serializedTags">
-        </div>
-        <button type="submit" v-if="annotation" v-bind:class="{ disabled: !hasChanged }"
-            class="btn btn-block btn-sm btn-primary">Sauvegarder</button>
-    </form>
+        <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>
 </template>
 
 <script>
@@ -31,14 +46,23 @@
     import _ from 'lodash'
 
     var defaults = {
-        'title': '',
-        'description': '',
-        'fragment': '',
-        'tags': [],
+        title: '',
+        description: '',
+        fragment: '',
+        tags: [],
+        readonly: true,
     }
 
     export default {
-        props: ['action', 'annotation'],
+        props: {
+            action: String,
+            annotation: {
+                type: Object,
+                default: function () {
+                    return null;
+                }
+            },
+        },
         components: {
             'tag-list': TagList
         },
@@ -50,10 +74,11 @@
                 if (annotation) {
                     // Make sure we have an actual copy
                     Object.assign(this, {
-                        'title': annotation.title,
-                        'description': annotation.description,
-                        'fragment': annotation.fragment,
-                        'tags': annotation.tags.slice()
+                        title: annotation.title,
+                        description: annotation.description,
+                        fragment: annotation.fragment,
+                        tags: annotation.tags.slice(),
+                        readonly: true,
                     });
                 } else {
                     this.reset();
@@ -101,5 +126,6 @@
 <style scoped>
 form {
     margin-bottom: 20px;
+    clear: both;
 }
 </style>