<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js github commits example</title>
    <style>
      #demo {
        font-family: 'Helvetica', Arial, sans-serif;
      }
      a {
        text-decoration: none;
        color: #f66;
      }
      li {
        line-height: 1.5em;
        margin-bottom: 20px;
      }
      .author, .date {
        font-weight: bold;
      }
    </style>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../dist/vue.min.js"></script>
  </head>
  <body>
    <div id="demo">
      <h1>Latest Vue.js Commits</h1>
      <template v-for="branch in branches">
        <input type="radio"
          :id="branch"
          :value="branch"
          name="branch"
          v-model="currentBranch">
        <label :for="branch">{{ branch }}</label>
      </template>
      <p>vuejs/vue@{{ currentBranch }}</p>
      <ul>
        <li v-for="record in commits">
          <a :href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(0, 7) }}</a>
          - <span class="message">{{ record.commit.message | truncate }}</span><br>
          by <span class="author"><a :href="record.author.html_url" target="_blank">{{ record.commit.author.name }}</a></span>
          at <span class="date">{{ record.commit.author.date | formatDate }}</span>
        </li>
      </ul>
    </div>
    <script src="mock.js"></script>
    <script src="app.js"></script>
  </body>
</html>
