hummingbird-me/hummingbird

<div class="quick-update">
  <div class="container no-padding">
    <div class="series-slider">
      <ul>
        <li class="update-arrow">
          <a {{bind-attr class=":arrow-nav canGoBack::inactive"}} {{action "goBack"}}><i class="fa fa-angle-left"></i></a>
        </li>
        {{#if loading}}
          {{#repeat 6}}
            <li class="watched-series"><div class="update-loading"><i class="fa fa-spin fa-spinner"></i></div></li>
          {{/repeat}}
        {{else}}
          {{#each libraryEntries itemController="quick-update-item" as |entry|}}
            <li {{bind-attr class=":watched-series entry.isPTW:plan-to-watch"}}>
              <div class="overlay-wrapper">
                <div class="overlay-panel">
                  {{#link-to 'anime' entry.model.anime.id class="quick-update-title-link" title=entry.model.anime.displayTitle}}
                    <h4 class="series-title">
                      {{entry.model.anime.displayTitle}}
                    </h4>
                  {{/link-to}}
                  <div class="actionable">
                    {{#if entry.loading}}
                      <a class="episode-button"><i class="fa fa-spin fa-spinner"></i></a>
                    {{else}}
                      {{#if entry.isComplete}}
                        <a class="episode-button"><strong>Completed!</strong></a>
                      {{else}}
                        <a class="episode-button" {{action "markViewed"}}>
                          Mark <strong>EP {{entry.nextEpisodeNumber}}</strong>
                        </a>
                      {{/if}}
                    {{/if}}
                  </div>
                  <div class="stats">
                    <h4>
                      {{#if entry.isPTW}}
                        Plan to Watch
                      {{else}}
                        {{entry.percentComplete}}% Complete
                      {{/if}}
                    </h4>
                    <p>Seen {{entry.model.episodesWatched}} of {{entry.model.anime.displayEpisodeCount}}</p>
                  </div>
                </div>

                <img class="responsive-image" {{bind-attr src="entry.model.anime.posterImage"}}>
              </div>
            </li>
          {{/each}}
        {{/if}}
        <li class="update-arrow">
          <a {{bind-attr class=":arrow-nav canGoForward::inactive"}} {{action "goForward"}}><i class="fa fa-angle-right"></i></a>
        </li>
      </ul>
    </div>
  </div>
</div>