login.hbs

<h1 class="auth-logo">Soundem</h1>
<div class="auth-form-wrapper">
  <h3>Login</h3>
  <form {{action 'authenticate' on='submit'}}>
    <p>{{input type="text" value=identification placeholder="Email" autofocus="autofocus"}}</p>
    <p>{{input type="password" value=password placeholder="Password"}}</p>
    <p><button>Login</button> or {{link-to 'Register' 'register'}}</p>
  </form>
</div>

music.hbs

<div class="invisible">{{render 'audio'}}</div>
<section class="controls">
  {{se-control isPlaying=audioIsPlaying
               onPlay='onSongPlay'
               onPause='onSongPause'
               onNext='onSongNext'
               onPrev='onSongPrev'}}

  {{se-display isPlaying=audioIsPlaying songInPlayer=songInPlayer}}

  <a href="#" {{ action 'invalidateSession' }} class="logout-image">
    <img src="images/logout.svg"> Logout
  </a>
</section>

<section class="sidebar">
  <div class="sidebar-navigation-component">
    <h6 class="sidebar-title">YOUR MUSIC</h6>
    <ul class="sidebar-list">
      <li class="sidebar-item">{{link-to 'Albums' 'albums'}}</li>
      <li class="sidebar-item">{{link-to 'Songs' 'songs'}}</li>
      <li class="sidebar-item">{{link-to 'Favorites' 'favorites'}}</li>
    </ul>
  </div>
</section>

<section class="content">
  {{outlet}}
</section>

<section class="status">
  <div class="status-message">Your collection has <strong>{{user.songTotal}}
 songs</strong>, <strong>{{user.albumTotal}} albums</strong>, about <strong>{{user.durationTotal}} seconds</strong> of music</div>
</section>

register.hbs

<h1 class="auth-logo">Soundem</h1>
<div class="auth-form-wrapper">
  <h3>Register</h3>
  <form {{action 'submitForm' on='submit'}}>
    <p>{{input type="text" value=email placeholder="Email" autofocus="autofocus"}}</p>
    <p>{{input type="password" value=password placeholder="Password"}}</p>
    <p>{{input type="password" value=password2 placeholder="Confirm Password"}}</p>
    <p><button>Register</button> or {{link-to 'Login' 'login'}}</p>
  </form>
</div>

se-control.hbs

<a href="#" {{action 'prev'}} class="se-ctrl-btn-link">
  <img src="images/previous.svg" class="se-ctrl-btn-img se-ctrl-btn-previous">
</a>

{{#if isPlaying}}
  <a href="#" {{action 'pause'}} class="se-ctrl-btn-link">
    <img src="images/pause.svg" class="se-ctrl-btn-img se-ctrl-btn-pause">
  </a>
{{else}}
  <a href="#" {{action 'play'}} class="se-ctrl-btn-link">
    <img src="images/play.svg" class="se-ctrl-btn-img se-ctrl-btn-play">
  </a>
{{/if}}

<a href="#" {{action 'next'}} class="se-ctrl-btn-link">
  <img src="images/next.svg" class="se-ctrl-btn-img se-ctrl-btn-next">
</a>