crude deck edit form

frontend/src/components/Card.vue

@@ -2,10 +2,29 @@
   <v-list-tile avatar>
     <v-tooltip @input="booted = true" bottom>
       <template v-slot:activator="{ on }">
-        <v-list-tile-avatar :color="color" v-on="on">
+        <v-list-tile-avatar v-on="on">
-          <span class="headline font-weight-bold white--text">
+          <svg
-            {{ dbentry.cost }}
+            x="0px"
-          </span>
+            y="0px"
+            width="16px"
+            height="30px"
+            viewBox="0 0 16 30"
+            style="enable-background:new 0 0 16 30;"
+            xml:space="preserve"
+          >
+            <polygon points="0,5 8,0 16,5 16,25 8,30 0,25" :fill="color" />
+            <text
+              x="2.5"
+              y="22"
+              font-size="20"
+              font-family="sans-serif"
+              fill="white"
+              font-weight="bold"
+              class="ng-binding"
+            >
+              {{ dbentry.cost }}
+            </text>
+          </svg>
         </v-list-tile-avatar>
       </template>
       <v-img

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-container style="position: relative" grid-list-md fluid>
-      <v-layout row wrap>
+      <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 = {