hummingbird-me/hummingbird

<div class="container">
  <!-- Left side start -->
  <div class="series-column">
    <div class="series-panel">

      <div class="poster-container">
        <div class="poster-actions">
          <img class="series-poster" src="{{model.posterImage}}">
          {{#if mangaLibraryEntryExists}}
            {{#if model.mangaLibraryEntry.isFavorite}}
              <a data-tooltip="You favorited this!" class="favorite-link" {{action "toggleFavorite"}}>
                <i class="fa fa-heart"></i>
              </a>
            {{else}}
              <a data-tooltip="Favorite this?" class="favorite-link" {{action "toggleFavorite"}}>
                <i class="fa fa-heart-o"></i>
              </a>
            {{/if}}
          {{/if}}
        </div>
      </div>

      <div class="series-info">

        <h3 class="series-title">
          {{model.romajiTitle}}
          {{#if model.englishTitle}}
            <small class="alternate-title">
              {{model.englishTitle}}
            </small>
          {{/if}}
        </h3>

        <div class="series-infobar">{{partial "manga/infobar"}}</div>

        <div class="synopsis">
          <p>{{{truncate-text text=model.synopsis length=200 breakLines=true}}}</p>
        </div>

        <div class="genres">
          <h5 class="small-label">Genres:</h5>
          <ul class="inline-list">
            {{#each model.genres as |genre|}}
              <li>{{genre}}</li>
            {{/each}}
          </ul>
        </div>

        {{#if currentUser.isSignedIn}}
          <div class="user-actions {{unless model.mangaLibraryEntryExists 'no-entry'}}">
            <div class="btn-group">

              <button class="library-button library-entry dropdown-toggle {{if model.mangaLibraryStatus 'active'}}" type="button" data-toggle="dropdown">
                {{#if mangaLibraryEntryExists}}
                  {{model.mangaLibraryEntry.status}}&nbsp;&nbsp;<i class="fa fa-caret-down"></i>
                {{else}}
                  Add to Library&nbsp;&nbsp;<i class="fa fa-caret-down"></i>
                {{/if}}
              </button>

              <ul class="dropdown-menu">
                <li><a {{action "setLibraryStatus" "Currently Reading"}}>Currently Reading</a></li>
                <li><a {{action "setLibraryStatus" "Plan to Read"}}>Plan to Read</a></li>
                <li><a {{action "setLibraryStatus" "Completed"}}>Completed</a></li>
                <li><a {{action "setLibraryStatus" "On Hold"}}>On Hold</a></li>
                <li><a {{action "setLibraryStatus" "Dropped"}}>Dropped</a></li>
                <li><a {{action "removeFromLibrary"}}>Remove from Library</a></li>
              </ul>
            </div>
            {{#if mangaLibraryEntryExists}}
              <div class="personal-rating active">
                {{awesome-rating type=currentUser.ratingType editable="true" action="setLibraryRating" rating=model.mangaLibraryEntry.rating}}
              </div>
            {{/if}}
          </div>
        {{/if}}
      </div>
    </div>
    <!-- End series panel -->

    <div class="series-panel">
      <div class="panel-title has-button">
        <h4>Characters</h4>
      </div>
      <div class="series-cast">
        <ul class="cast">
          {{partial "manga/characters"}}
        </ul>

        <div class="view-more">
          {{#if showFullCharacters}}
            {{#if fullCharacters}}
              <a {{action "showFewerCharacters"}}>View Fewer Characters</a>
            {{else}}
              <i class="fa fa-spinner fa-spin"></i> Loading...
            {{/if}}
          {{else}}
            <a {{action "showMoreCharacters"}}>View More Characters</a>
          {{/if}}
        </div>
      </div>
    </div>
    <!-- End cast -->
  </div>
  <!-- Left side End -->

  <!-- Right Side Start -->
  <div class="community-column">
    {{#if roundedBayesianRating}}
      <div class="hb-score">
        <h3>Hummingbird Score: <span class="highlight">{{roundedBayesianRating}}</span></h3>
      </div>
    {{/if}}
    <div class="histogram">
      {{community-rating model.communityRatings}}
      <div class="rating-legend">
        <span class="lowest-rating">
          <i class="fa fa-star-half-o"></i>
          <i class="fa fa-long-arrow-right"></i>
        </span>
        <span class="highest-rating">
          <i class="fa fa-long-arrow-left"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
        </span>
      </div>
    </div>
  </div>
</div>