<div id="app" class="container">
   
   <!-- Components -->
   <div class="row">
      <h4>Components</h4>
      <!-- Props kebob-case in HTML-->
      <my-component comp-label="Label Title"></my-component>
      <my-component comp-label="Another Label"></my-component>
      <my-component></my-component>
   </div>
   
   <!-- Template -->
   <template id="textComponent">      
      <strong>{{compLabel}}</strong>
      <p>This text stays the same!</p>
   </template>
   
   

   <!-- Form Input Bindings -->
   <div class="row">
      <h4>Form Input Bindings <small>v-model</small></h4>
      <span>Message is: {{ message }}</span>
      <br />
      <input type="text" class="u-full-width" v-model="message" lazy placeholder="Edit me... I'm in lazy mode">
      <br />
      <label for="checkbox">
         <input type="checkbox" id="checkbox" v-model="checked"> {{ checked }}
      </label>
      <br />
      <label for="jack">
         <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> Jack
      </label>
      <label for="john">
         <input type="checkbox" id="john" value="John" v-model="checkedNames"> John
      </label>
      <label for="mike">
         <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> Mike
      </label>
      <br>
      <span>Checked names: {{ checkedNames | json }}</span>
      <br />

      <label for="one">
         <input type="radio" id="one" value="One" v-model="picked"> One
      </label>
      <br>
      <label for="two">
         <input type="radio" id="two" value="Two" v-model="picked"> Two
      </label>
      <br>
      <span>Picked: {{ picked }}</span>
      <br />
      <select class="u-full-width" v-model="selected">
         <option selected>Choose One...</option>
         <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
         </option>
      </select>
      <span>Selected: {{ selected }}</span>
   </div>


   <!-- Events/Methods -->
   <div class="row">
      <h4>Events/Methods</h4>
      <button v-on:click="greet">Greet</button>
      <button v-on:click="say('hi', $event)">Say Hi</button>
      <button type="submit" v-on:click="say('hello!', $event)">Submit</button>
      <input type="text" v-on:keyup.enter="say('Submitted', $event)" placeholder="Press Enter">
   </div>


   <!-- List Rendering -->
   <div class="row">
      <h4>List Rendering</h4>
      <ul>
         <li v-for="item in items">
            {{ parentMessage }} - {{ $index }} - {{ item.message }}
         </li>
      </ul>
   </div>
   <!-- Spcecify Alias for $index in a template -->
   <ul class="list-unstyled">
      <template v-for="(index, item) of items">
       <li>{{ index }} {{ item.message }}</li>
       <li class="divider"></li>
     </template>
   </ul>


   <!-- Conditional -->
   <div class="row">
      <h4>Conditionals <small>v-if/v-else</small></h4>
      <h5 v-if="ok">Yes</h5>
      <h5 v-else>No</h5>
   </div>
   <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
   </template>
   <p>NOTE: Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.</p>


   <!-- HTML Class Bindings -->
   <div class="row">
      <h4>Class/Style Bindings</h4>
      <p class="text-center" :class="{ 'class-a': classA }">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut iusto quo recusandae sed sapiente molestiae consequatur itaque rerum eos facilis, molestias ex ipsam commodi omnis, nisi exercitationem facere blanditiis modi!</p>
   </div>


   <!-- Computed Properties -->
   <div class="row">
      <h4>Computed Properties</h4>
      <p>a = {{ a }}, b = {{ double }}</p>
      <input type="number" class="u-full-width" v-model="a" placeholder="Enter a number">
      <hr />
      <h5>Hello<span v-if="firstName || lastName"> {{ fullName }}</span></h5>
      <div class="row">
         <div class="six columns">
            <input type="text" class="u-full-width" v-model="firstName" placeholder="Enter a First Name">
         </div>
         <div class="six columns">
            <input type="text" class="u-full-width" v-model="lastName" placeholder="Enter a Last Name Name">
         </div>
      </div>
   </div>


   <!-- Basic Binding with v-model -->
   <div class="row">
      <h4>Hello {{ message }}</h4>
      <label class="u-full-width">Username:</label>
      <input type="text" class="u-full-width" v-model="message" placeholder="Enter a username">
   </div>


   <!-- Data -->
   <div class="row">
      <pre><code>{{ $data | json }}</code></pre>
   </div>
   <!-- closes #app -->
</div>