crude deck edit form

frontend/src/components/Deck.vue

@@ -4,12 +4,12 @@
       <span class="subheading">{{ deck.name }}</span>
     </template>
 
-    <v-alert :value="deck.note" type="info">
+    <v-alert v-if="!editing" :value="deck.note" type="info">
       {{ deck.note }}
     </v-alert>
 
-    <v-container grid-list-md fluid>
-      <v-layout row wrap>
+    <v-container style="position: relative" grid-list-md fluid>
+      <v-layout v-if="!editing" row wrap>
         <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm6 md4>
           <v-card>
             <v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
@@ -24,7 +24,18 @@
             </v-list>
           </v-card>
         </v-flex>
+        
+        <v-btn fab absolute bottom right @click.native="editing = true">
+          <v-icon>edit</v-icon>
+        </v-btn>
       </v-layout>
+      <v-form v-if="editing" lazy-validation>
+        <v-textarea
+          label="Edit Deck"
+          value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
+          hint="Paste a deck list"
+        ></v-textarea>
+      </v-form>
     </v-container>
   </v-expansion-panel-content>
 </template>
@@ -43,6 +54,10 @@ export default {
     Card
   },
 
+  data: () => ({
+    editing: false
+  }),
+
   computed: {
     deck_parts() {
       let retval = {