client/index.html

<head>
  <meta charset="utf-8">
  <title>Favs.fm</title>
  <link rel="stylesheet" href="stylesheets/application.css">
  <!-- <script src="http://connect.soundcloud.com/sdk.js"></script> -->
  <script type="text/javascript" src="//use.typekit.net/rkw1rla.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>

<body>
  {{> RenderTemplate}}
</body>

<template name="RenderTemplate">
  {{#if has_username.length}}
    {{> RenderPlaylist}}
  {{else}}
    {{> Username}}
  {{/if}}
</template>

<template name="Username">
  <section class="main landing">
    <div class="overlay">
      <input type="text" id="username-input" placeholder="ex.fm username..." autofocus>
    </div>
  </section>
</template>

<template name="RenderPlaylist">
  {{> Header}}
  <section class="main playlist">
    <ol id="tracks">
      {{> Songs}}
    </ol>
  </section>
</template>

<template name="Header">
  <header class="playlist-header">
    <h1>myfaves.fm</h1>
    <input type="text" value="{{ current_username }}">
  </header>
</template>

<template name="Songs">
  {{#each Track}}
    <li class="track not-playing">
      <a href="#" id="{{ id }}">
        <span class="playtoggle"></span>
        <div class="track-title">
          <span class='artist'>{{ artist }}</span> &ndash; <span class='title'>{{ title }}</span>
        </div>
      </a>
      <div class="progress"></div>
      <div class="buffer"></div>
      <audio preload="none">
        <source src="{{ url }}">
      </audio>
    </li>
  {{/each}}
</template>