<!DOCTYPE html>
<html lang="en">
 <head>
 </head>
 <body translate="no">
  <div id="app" v-bind:class="styles + ' ' + dynamicStyles" v-cloak="">
   <h2 v-show="!readonly">
    Tap to edit your Valentine!
   </h2>
   <div class="heart">
    <div class="heart-container">
     <div class="message">
      <div v-bind:contenteditable="!readonly" v-on:blur="updateMessage" v-on:delete="updateMessage" v-on:keypress="updateMessage" v-on:paste="updateMessage">
       {{ message || '' }}
      </div>
     </div>
    </div>
    <div v-if="!readonly">
     <label class="color-selector" v-for="color in colors">
      <input class="hidden" name="color" type="radio" v-bind:checked="color == selectedColor" v-bind:value="selectedColor" v-on:click="selectedColor = color"/>
      <span class="color-label" v-bind:color="color" v-bind:style="{ color: color }">
       {{color}}
      </span>
     </label>
    </div>
    <div v-if="!readonly">
     <a class="create" target="_blank" v-bind:href="url">
      Create shareable link &gt;
     </a>
    </div>
    <div v-if="readonly">
     <a class="create" href="/notoriousb1t/full/WRLRdQ/" target="_blank">
      &lt; Make your own
     </a>
    </div>
   </div>
  </div>
 </body>
</html>
