<div id="app">
  <header class="ml-4 mb-3 text-indigo-darker">
    <h1>
      Sunrise and Sunset
    </h1>
  </header>
  <content class="flex flex-col w-1/2">
    <label for="search" class="ml-2 text-indigo-dark">Search for a city</label>
    <input type="text" id="search" v-model="search" class="p-2 m-2 bg-grey-lighter rounded border border-indigo-dark">
    <!-- A few things to note:
      * We're already making use of tailwind css, which 
        offers excellent utility classes
      * v-model makes our data reactive, meaning we can
        read in user input with ease
    -->
    <div v-for="datum in citiesToDisplay"
         class="bg-white m-3 p-4 rounded text-blue-darker">
        <!-- Here, instead of looping through the whole list,
             we can loop through a computed property, where 
             filter our original list based on our search term.
             These are a useful (and performant) feature in Vue
        -->
        <h3 class="mb-2">
          {{datum.city}}
        </h3>
        <div>
          <sunrise-sunset-viz 
            :sunrise="datum.sunrise" 
            :sunset="datum.sunset">
          </sunrise-sunset-viz>
        </div>
    </div>
  </content>
</div>

<script type="text/x-template" id="sunrise-sunset-viz-template">
  <div>
    <!-- We'll use <slider>, which is an open-source component
         called vue-slider component: 
         https://github.com/NightCatSama/vue-slider-component
    -->
    <slider 
      :value="sliderValue"
      width="100%"
      :min="min" 
      :max="max"
      :style="{
        marginTop: '2.5em'
      }"
      :processStyle="{
        backgroundColor: 'darkorange'
      }"
      :bgStyle="{
        backgroundColor: 'darkslateblue'   
      }"
      :sliderStyle="{
        backgroundColor: 'darkorange', 
        boxShadow: 'none'
      }"
      >
    <template slot="tooltip" scope="tooltip">
      <!-- Here we're using a scoped-slot. It's an
           advanced, but incredibly useful pattern.
           However, explaining it is outside the 
           scope of this example. 
           Here's a great explanation of them:
           https://adamwathan.me/renderless-components-in-vuejs/
      -->
      <div v-if="tooltip.index === 0">
        {{formatTime(sunrise)}}
      </div >
      <div v-else>
        {{formatTime(sunset)}}
      </div>
    </template>
    </slider>
  </div>
</script>