<div id="app">
  <div class="container">

  <main>
    <keep-alive>
      <component :is="selected">
        <svg class="winebottle" aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 155 140 300">
          <defs>
            <filter id="inverse">
              <feComponentTransfer>
                <feFuncR type="table" tableValues="1 0"/>
                <feFuncG type="table" tableValues="1 0"/>
                <feFuncB type="table" tableValues="1 0"/>
              </feComponentTransfer>
            </filter>
          </defs>
          <title id="title">Wine Bottle</title>
          <g>
              <path class="bottle" d="M80.8,465.7c40.6,0,56.8-4.5,56.8-4.5,12-3.2,12-17.2,12-17.2v-148c0-57.4-18.5-90.6-18.5-90.6-24-45.1-27.9-95.4-27.9-95.4l-2.3-64.6c0-4.2,2.9-5.5,2.9-5.5V25.2l-2.9-1.9V18.7c-4.2-5.5-20.1-4.9-20.1-4.9s-15.9-.6-20.1,4.9v4.5l-2.9,1.9V39.8s2.9,1.3,2.9,5.5l-2.3,64.6s-3.9,50.3-27.9,95.4c0,0-18.5,33.1-18.5,90.6v148s0,14,12,17.2C24,461.1,40.2,465.7,80.8,465.7Z" transform="translate(-12 -13.8)" />
              <path class="label" d="M12,295.9s56.5,5,137.6,0V409S78.1,423.6,12,409Z" transform="translate(-12 -13.8)" :style="{ fill: labelColor }"/>
              <image class="bkimg" x="0" y="293" width="138" height="100" xmlns:xlink="http://www.w3.org/1999/xlink" 
              :xlink:href="'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/' + wineImg + '.png'" 
              :style="{opacity: imgOpacity }"></image>
          </g>
          <g :style="{transform: 'translateY(' + labelPlacement + 'px)'}">
              <text class="wine-text" transform="translate(68 308.2)" text-anchor="middle" font-size="14" :style="{fontFamily: wineFont}">
                {{ label }}
              </text>
              <g class="flor" id="bottomflor1" v-if="flourish === 'A'">
                <app-flor1></app-flor1>
              </g>
              <g class="flor" id="bottomflor2" v-if="flourish === 'B'">
                <app-flor2></app-flor2>
              </g>
              <g class="flor" id="bottomflor3" v-if="flourish === 'C'">
                <app-flor3></app-flor3>
              </g>
              <g v-else></g>
          </g>
      </svg>
      </component>
      </keep-alive>
    </main>

    <aside>
      <h4>Name your Wine</h4>
      <input v-model="label" maxlength="18">
      <div class="button-row">
        <h4>Color</h4>
        <button @click="selected ='appBlack', labelColor = '#000000'">Black Label</button>
        <button @click="selected ='appWhite', labelColor = '#ffffff'">White Label</button>
        <input type="color" v-model="labelColor" defaultValue="#ff0000">
      </div>
      <div class="button-row">
        <h4>Font</h4>
        <button @click="wineFont ='Alegreya SC'">Alegreya SC</button>
        <button @click="wineFont ='Anton'">Anton</button>
        <button @click="wineFont ='Bigelow Rules'">Bigelow Rules</button>
        <button @click="wineFont ='Cormorant Garamond'">Cormorant Garamond</button>
        <button @click="wineFont ='IM Fell English'">IM Fell English</button>
        <button @click="wineFont ='Londrina Shadow'">Londrina Shadow</button>
        <button @click="wineFont ='Megrim'">Megrim</button>
      </div>
      <div class="button-row">
        <h4>Flourish</h4>
        <button @click="flourish ='A'">Flourish A</button>
        <button @click="flourish ='B'">Flourish B</button>
        <button @click="flourish ='C'">Flourish C</button>
        <button @click="flourish ='none'">None</button>
      </div>
      <div class="button-row">
        <h4>Background Image</h4>
        <button @click="wineImg ='geo'">Geo</button>
        <button @click="wineImg ='phone'">Phone</button>
        <button @click="wineImg ='burst'">Burst</button>
        <button @click="wineImg ='abstract'">Abstract</button>
        <button @click="wineImg ='cards'">Cards</button>
        <button @click="wineImg ='circuit'">Circuit</button>
        <button @click="wineImg ='woodgrain'">Woodgrain</button>
        <button @click="wineImg ='none'">None</button>
      </div>
      <div class="button-row">
        <h4>Image Opacity</h4>
        <div class="v-range-slider">
          <input type="range" min="0" v-model="imgOpacity" max="1" step="0.01" name="opacity">
        </div>
      </div>
      <div class="button-row">
        <h4>Label Placement</h4>
        <div class="v-range-slider">
          <input type="range" min="0" v-model="labelPlacement" max="75" step="1" name="label placement">
        </div>
      </div>
    </aside>
  </div>
</script>
</div>

<script type="text/x-template" id="black">
  <div class="black">
	  <slot></slot>
  </div>
</script>

<script type="text/x-template" id="white">
  <div class="white">
	  <slot></slot>
  </div>
</script>

<script type="text/x-template" id="flor1">
  	<g>
		<path d="M63.5,344.8a4.4,4.4,0,0,1-5.3,2.1,5.5,5.5,0,0,1-3.8-4.6,5.3,5.3,0,0,1,3.2-5,5.5,5.5,0,0,1,5.5.7c3.4,2.2,5.3,6.9,9.1,9a12.7,12.7,0,0,0,5.9,1.5,7.3,7.3,0,0,0,5.6-2.4,7,7,0,0,1-5.6,2,12.4,12.4,0,0,1-5.8-1.6c-3.6-2.1-5.4-6.7-9-9.2a6,6,0,0,0-6.1-.6,5.9,5.9,0,0,0-3.4,5.6,5.8,5.8,0,0,0,4.1,4.9A4.6,4.6,0,0,0,63.5,344.8Z" transform="translate(-12 -13.8)" />
	  <path d="M66.4,338a7.4,7.4,0,0,1,3.5-3.1,6.5,6.5,0,0,1,4.3-.1,8.2,8.2,0,0,1,5.6,6.8,8,8,0,0,1-4.7,7.5c-2.7,1.4-5.8.7-8.3-1-5.1-3.3-7.9-10.2-13.4-13.3a18.5,18.5,0,0,0-8.7-2.3,10.5,10.5,0,0,0-8.2,3.4,10.3,10.3,0,0,1,8.2-3.1,18.2,18.2,0,0,1,8.5,2.4c5.4,3.1,8,9.9,13.3,13.5,2.6,1.7,6,2.4,8.8.9a8.1,8.1,0,0,0-1.1-15.2,6.8,6.8,0,0,0-4.5.3A7.6,7.6,0,0,0,66.4,338Z" transform="translate(-12 -13.8)" />
	  <path d="M91.7,344.8a4.4,4.4,0,0,0,5.3,2.1,5.5,5.5,0,0,0,3.8-4.6,5.3,5.3,0,0,0-3.2-5,5.5,5.5,0,0,0-5.5.7c-3.4,2.2-5.3,6.9-9.1,9a12.7,12.7,0,0,1-5.9,1.5,7.3,7.3,0,0,1-5.6-2.4,7,7,0,0,0,5.6,2,12.4,12.4,0,0,0,5.7-1.6c3.6-2.1,5.4-6.7,9-9.2a6,6,0,0,1,6.1-.6,5.9,5.9,0,0,1,3.4,5.6,5.8,5.8,0,0,1-4.1,4.9A4.6,4.6,0,0,1,91.7,344.8Z" transform="translate(-12 -13.8)" />
	  <path d="M88.9,338a7.4,7.4,0,0,0-3.5-3.1,6.5,6.5,0,0,0-4.3-.1,8.2,8.2,0,0,0-5.7,6.8,8,8,0,0,0,4.7,7.5c2.7,1.4,5.8.7,8.3-1,5.1-3.3,7.9-10.2,13.4-13.3a18.5,18.5,0,0,1,8.7-2.3,10.5,10.5,0,0,1,8.2,3.4,10.3,10.3,0,0,0-8.2-3.1,18.2,18.2,0,0,0-8.5,2.4c-5.4,3.1-8,9.9-13.3,13.5-2.6,1.7-6,2.4-8.8.9A8.1,8.1,0,0,1,81,334.5a6.8,6.8,0,0,1,4.5.3A7.6,7.6,0,0,1,88.9,338Z" transform="translate(-12 -13.8)" />
	  <rect x="22.6" y="314" width="88.1" height="0.62" />
  </g>
</script>

<script type="text/x-template" id="flor2">
	<g>
		<path d="M85.4,341.4a3.1,3.1,0,0,1-2.5-.8,6.1,6.1,0,0,1-1.7-2.4,5.8,5.8,0,0,1-.4-3,4.4,4.4,0,0,1,1.4-2.6,5.3,5.3,0,0,1,5.2-.9,5.8,5.8,0,0,1,2.4,1.5,16.5,16.5,0,0,1,1.7,2.4,27.4,27.4,0,0,0,3.2,4.8,6.2,6.2,0,0,0,2.2,1.5,5.3,5.3,0,0,0,2.5.3,5.4,5.4,0,0,0,4.2-2.9,7.3,7.3,0,0,0,.8-2.8,8.9,8.9,0,0,0-.2-2.9,7.8,7.8,0,0,0-3.1-4.5,9.8,9.8,0,0,0-4.9-1.7,9.3,9.3,0,0,0-5.1,1,8.2,8.2,0,0,0-3.7,4,9,9,0,0,0-.3,5.8,12.4,12.4,0,0,0,2.7,5.1,10.3,10.3,0,0,0,4.5,3.1,6.6,6.6,0,0,0,5.2-.4,6.7,6.7,0,0,1-5.2.6,10.4,10.4,0,0,1-4.6-3,12.7,12.7,0,0,1-2.9-5.2,9.4,9.4,0,0,1,.3-6.1,8.5,8.5,0,0,1,3.8-4.3,9.8,9.8,0,0,1,5.3-1.1,10.2,10.2,0,0,1,5.2,1.8,8.3,8.3,0,0,1,3.3,4.8,9.6,9.6,0,0,1,.2,3.1,7.9,7.9,0,0,1-.8,3,5.9,5.9,0,0,1-4.6,3.2,5.7,5.7,0,0,1-2.7-.4,6.6,6.6,0,0,1-2.3-1.7,26.4,26.4,0,0,1-3.2-4.9,16.2,16.2,0,0,0-1.6-2.4,5.4,5.4,0,0,0-2.2-1.5,5,5,0,0,0-5,.7,4.1,4.1,0,0,0-1.4,2.4,5.6,5.6,0,0,0,.4,2.9,6.1,6.1,0,0,0,1.6,2.4A3.1,3.1,0,0,0,85.4,341.4Z" transform="translate(-12 -13.8)" />
    <path d="M93.1,329.8a1.5,1.5,0,0,0-1.2-.1l-1.2.5a8.3,8.3,0,0,0-2,1.7,3.8,3.8,0,0,0-1.1,2.4,2.6,2.6,0,0,0,1.5,2,4.2,4.2,0,0,0,4.7-.1,27.1,27.1,0,0,0,4.1-3.2c1.3-1.2,2.6-2.4,4-3.5a14.1,14.1,0,0,1,4.5-2.6,10.1,10.1,0,0,1,5.1-.5,3.8,3.8,0,0,1,2.3,1.4,4.7,4.7,0,0,1,.8,2.9,4.3,4.3,0,0,1-1,2.8,7.5,7.5,0,0,1-2.2,1.6,24.7,24.7,0,0,1-4.8,2l-1.3.2a2.1,2.1,0,0,1-1.4-.3,2.3,2.3,0,0,1-.9-1.2,2.2,2.2,0,0,1,.2-1.6,6.4,6.4,0,0,1,1.9-2,8.1,8.1,0,0,1,2.3-1.2,19.8,19.8,0,0,1,19.1,4.4,14.3,14.3,0,0,0-4.3-2.8,26.7,26.7,0,0,0-4.8-1.6,16,16,0,0,0-4.9-.4,18.3,18.3,0,0,0-4.9.9,7.6,7.6,0,0,0-2.2,1.2,5.9,5.9,0,0,0-1.7,1.9,1.5,1.5,0,0,0-.2,1.1,1.7,1.7,0,0,0,.7.9,3,3,0,0,0,2.3,0,24.4,24.4,0,0,0,4.6-2,6.8,6.8,0,0,0,2-1.5,3.5,3.5,0,0,0,.8-2.4,3.9,3.9,0,0,0-.7-2.5,3.3,3.3,0,0,0-2-1.2,9.7,9.7,0,0,0-4.8.5,13.6,13.6,0,0,0-4.4,2.5l-4,3.5a27.6,27.6,0,0,1-4.2,3.2l-1.2.6-1.3.2a5.2,5.2,0,0,1-2.5-.7,3.6,3.6,0,0,1-1-.9,2.4,2.4,0,0,1-.5-1.4,2.8,2.8,0,0,1,.4-1.4,5.6,5.6,0,0,1,.8-1.1,8.3,8.3,0,0,1,2.1-1.6l1.2-.5A1.5,1.5,0,0,1,93.1,329.8Z" transform="translate(-12 -13.8)" />
    <path d="M77.7,341.4a3.1,3.1,0,0,0,2.5-.8,6.1,6.1,0,0,0,1.7-2.4,5.8,5.8,0,0,0,.4-3,4.4,4.4,0,0,0-1.4-2.6,5.3,5.3,0,0,0-5.2-.9,5.8,5.8,0,0,0-2.4,1.5,16.3,16.3,0,0,0-1.7,2.4,27.7,27.7,0,0,1-3.2,4.8,6.1,6.1,0,0,1-2.2,1.5,5.2,5.2,0,0,1-2.5.3,5.4,5.4,0,0,1-4.2-2.9,7.3,7.3,0,0,1-.8-2.8,8.8,8.8,0,0,1,.2-2.9,7.7,7.7,0,0,1,3.1-4.5,9.8,9.8,0,0,1,4.9-1.7,9.3,9.3,0,0,1,5.1,1,8.2,8.2,0,0,1,3.7,4,9,9,0,0,1,.3,5.8,12.5,12.5,0,0,1-2.7,5.1,10.3,10.3,0,0,1-4.5,3.1,6.6,6.6,0,0,1-5.2-.4,6.7,6.7,0,0,0,5.2.6,10.4,10.4,0,0,0,4.6-3,12.7,12.7,0,0,0,2.9-5.2,9.5,9.5,0,0,0-.3-6.1,8.5,8.5,0,0,0-3.8-4.3,9.8,9.8,0,0,0-5.3-1.1,10.2,10.2,0,0,0-5.2,1.8,8.3,8.3,0,0,0-3.3,4.8,9.6,9.6,0,0,0-.2,3.1,8,8,0,0,0,.8,3,5.9,5.9,0,0,0,4.6,3.2,5.7,5.7,0,0,0,2.7-.4,6.6,6.6,0,0,0,2.3-1.7,26.4,26.4,0,0,0,3.2-4.9,16.2,16.2,0,0,1,1.6-2.4,5.5,5.5,0,0,1,2.2-1.5,5,5,0,0,1,5,.7,4.1,4.1,0,0,1,1.4,2.4,5.6,5.6,0,0,1-.4,2.9,6.1,6.1,0,0,1-1.6,2.4A3.1,3.1,0,0,1,77.7,341.4Z" transform="translate(-12 -13.8)" />
    <path d="M65.1,329.8a1.4,1.4,0,0,1,1.2-.1l1.2.5a8.3,8.3,0,0,1,2,1.7,3.8,3.8,0,0,1,1.1,2.4,2.6,2.6,0,0,1-1.5,2,4.2,4.2,0,0,1-4.7-.1,27.3,27.3,0,0,1-4.1-3.2c-1.3-1.2-2.6-2.4-4-3.5a14.1,14.1,0,0,0-4.5-2.6,10.1,10.1,0,0,0-5.1-.5,3.8,3.8,0,0,0-2.4,1.4,4.7,4.7,0,0,0-.8,2.9,4.3,4.3,0,0,0,1,2.8,7.4,7.4,0,0,0,2.2,1.6,24.8,24.8,0,0,0,4.8,2l1.3.2a2.1,2.1,0,0,0,1.4-.3,2.3,2.3,0,0,0,.9-1.2,2.2,2.2,0,0,0-.2-1.6,6.4,6.4,0,0,0-1.9-2,8.1,8.1,0,0,0-2.3-1.2,19.8,19.8,0,0,0-19.1,4.4,14.2,14.2,0,0,1,4.3-2.8,26.7,26.7,0,0,1,4.8-1.6,16,16,0,0,1,4.9-.4,18.3,18.3,0,0,1,4.9.9,7.7,7.7,0,0,1,2.2,1.2,5.9,5.9,0,0,1,1.7,1.9,1.5,1.5,0,0,1,.2,1.1,1.8,1.8,0,0,1-.7.9,3,3,0,0,1-2.3,0,24.4,24.4,0,0,1-4.6-2,6.8,6.8,0,0,1-2-1.5,3.5,3.5,0,0,1-.8-2.4,3.9,3.9,0,0,1,.7-2.5,3.3,3.3,0,0,1,2-1.2,9.7,9.7,0,0,1,4.8.5,13.6,13.6,0,0,1,4.4,2.5l4,3.5a27.6,27.6,0,0,0,4.2,3.2l1.2.6,1.3.2a5.2,5.2,0,0,0,2.5-.7,3.6,3.6,0,0,0,1-.9,2.4,2.4,0,0,0,.5-1.4,2.8,2.8,0,0,0-.4-1.4,5.7,5.7,0,0,0-.8-1.1,8.3,8.3,0,0,0-2.1-1.6l-1.2-.5A1.5,1.5,0,0,0,65.1,329.8Z" transform="translate(-12 -13.8)" />
  </g>
</script>


<script type="text/x-template" id="flor3">
<g>
		<path d="M51.7,328.3c-.7-.6-4.3.9-5,1.4a19.3,19.3,0,0,0-3.8,3.6,8.2,8.2,0,0,1-6.6,2.4c-4.5-.4-8.1-6.7-4.7-10.3a4.8,4.8,0,0,1,3.1-1.8c-1.3,1.4-3.2,4.8-1.5,6.8s5.4,1,4.5-1.7a1.3,1.3,0,0,0-1.4.7c-1.3-2.6,1.9-4,3.4-2a4.6,4.6,0,0,1-.4,5.8c2.1-.8,2-4.1,1.8-6s1.9-.8,2.3.6-.4,2.1-.7,3c.3-1.1,1.8-3.6,2.8-4.1S50,326.8,51.7,328.3Z" transform="translate(-12 -13.8)" />
    <rect x="37" y="313.8" width="37.7" height="0.55" />
    <path d="M108.6,328.3c.7-.6,4.3.9,5,1.4a19.2,19.2,0,0,1,3.8,3.6,8.2,8.2,0,0,0,6.6,2.4c4.5-.4,8.1-6.7,4.7-10.3a4.8,4.8,0,0,0-3.1-1.8c1.3,1.4,3.2,4.8,1.5,6.8s-5.4,1-4.5-1.7a1.3,1.3,0,0,1,1.4.7c1.3-2.6-1.9-4-3.4-2a4.6,4.6,0,0,0,.4,5.8c-2.1-.8-2-4.1-1.8-6s-1.9-.8-2.3.6.4,2.1.7,3c-.3-1.1-1.8-3.6-2.8-4.1S110.3,326.8,108.6,328.3Z" transform="translate(-12 -13.8)" />
    <rect x="61.5" y="313.8" width="37.7" height="0.55" />
    <path d="M113,330.2l-.4-.4h-65l-.5.3-.7.7h67.1Z" transform="translate(-12 -13.8)" />
  </g>
</script>

body {
	background-color: black;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
}

.winebottle {
	height: 600px;
	margin-left: 15px;
}

.container {
	max-width: 900px;
	margin: 40px auto;
}

.button-row {
	margin: 0 0 20px;
}

h4 {
	text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 10px 0 5px 5px;
}

button {
	background: white;
	border: 2px solid black;
	font-family: 'Montserrat', sans-serif;
	padding: 5px 12px;
	border-radius: 1000px;
	font-size: 12px;
	cursor: pointer;
	margin: 5px 5px 5px 0;
	transition: 0.2s all ease-in;
	outline: none;
}

button:hover {
	background: #eee;
	transition: 0.2s all ease-out;
}

main {
	width: calc(38% - 40px);
	float: left;
	padding: 20px;
	background: #e8e5e5;
	display: flex;
	align-items: center;
}

aside {
	background: #aba8a8;
	width: calc(60% - 40px);
	float: left;
	padding: 20px;
}

input {
	font-family: 'Montserrat', sans-serif;
	border: 1px solid black;
	padding: 5px 12px;
	border-radius: 5px;
	width: 90%;
	margin: 10px 5px;
	font-size: 13px;
	outline: none;
	color: #aaa;
}

input[type="color"] {
	width: 15%;
	padding: 1px 3px;
}

.wine-text {
	text-align: center;
}

.flourish {
	transform: translateY(2px);
}

.label {
	background: url('geo.png');
}

/* -- slider --*/

.v-range-slider {
  display: flex;
  align-items: center;
  padding: 2px 11px;
}
.v-range-slider input[type=range] {
  -webkit-appearance: none;
  flex: 1;
  display: block;
  overflow: hidden;
  margin: 5px 0 10px -5px;
  padding: 8px 1px 8px;
  box-sizing: border-box;
  outline: none;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
}
.v-range-slider input::-webkit-slider-runnable-track {
  position: relative;
  height: 2px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}
.v-range-slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  margin-top: -7px;
  cursor: pointer;
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
.v-range-slider input::-webkit-slider-thumb:before {
  position: absolute;
  display: inline-block;
  content: '';
  top: 7px;
  left: -2001px;
  width: 2000px;
  height: 2px;
}

/* these are styles that would exist in style scoped in the actual application */

.black .label {
    fill: black;
  }
.black .bottle, .black .wine-text {
    fill: white;
  }
.black .flor {
    fill: #ccc;
  }
.black .bkimg {
    filter:url(#inverse)
  }

/*---*/

.white .label {
  fill: white;
}
.white .bottle, .white .wine-text {
  fill: black;
}
.white .flor {
  fill: #444;
}

/* end scoped */

@media only screen and (max-width: 800px) {
  main {
  	width: 90% !important;
    display: flex;
    justify-content: center;
  }
  aside {
  	width: 90% !important;
  	border-top: 2px solid black;
  }
}

@media only screen and (min-width: 800px) {
  .container {
  	display: flex;
  }
  aside {
  	border-left: 2px solid black;
  }
}

const app = new Vue({
  el: '#app',
  data: function() {
    return {
      selected: 'appBlack',
      label: 'Label Name',
      wineFont: 'Montserrat',
      flourish: 'none',
      wineImg: 'none',
      imgOpacity: 0.8,
      labelPlacement: 0,
      labelColor: '#000000'
    };
  },
  components: {
    'appBlack': {
      template: '#black'
    },
    'appWhite': {
      template: '#white'
    },
    'appFlor1': {
      template: '#flor1'
    },
    'appFlor2': {
      template: '#flor2'
    },
    'appFlor3': {
      template: '#flor3'
    },
  }
});