hummingbird-me/hummingbird

<div class="container">
  <div class="back-to-anime">
    <span>
      {{#link-to 'anime.index'}}
        <i class="fa fa-caret-left"></i> Back to anime page
      {{/link-to}}
    </span>
    <span>
      {{#if writtenBySelf}}
      <a {{bind-attr href=editPath}}>
        <i class="fa fa-pencil"></i> edit review
      </a>
      {{/if}}
    </span>
  </div>

  <!-- Left Side -->
  <div class="review-wrapper">
    <div class="series-panel">
      <div class="review-content">
        <h1 class="review-title"> {{model.anime.displayTitle}} Review</h1>
        <div class="spoiler-block" style="display:none"> Tread carefully! This review contains spoilers!!</div>
        <div class="progress-block" style="display:none"> This is a review up until episode 17!</div>
        {{{model.formattedContent}}}
      </div>

      <div class="review-breakdown">
        <div class="breakdown-header">
          <div class="verdict-title">
            <h4> Verdict</h4>
          </div>
          <div class="breakdown-title">
            <h4> Breakdown</h4>
          </div>
        </div>
        <div class="breakdown-content">
          <div class="score-block">
            <h1 class="score"> {{ratingFirstDigit}}</h1>
            <h5 class="decimal-score"> {{ratingDecimalPart}}</h5>
          </div>
          <div class="breakdown-block">
            <div class="breakdown-content">
              <ul>
                {{#each breakdown as |rating|}}
                  <li class="clearfix">
                  <div class="col-xs-9">
                    <i {{bind-attr class=":fa rating.positive:fa-plus-circle:fa-minus-circle"}}></i>
                    &nbsp; {{rating.title}}...
                  </div>
                  <div class="dec-score">
                    <strong>{{rating.rating}}</strong>
                  </div>
                  </li>
                {{/each}}
              </ul>
            </div>
          </div>
        </div>
        <div class="summary-block">
          <p>{{model.summary}}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- End Left Side -->

  <!-- Right Side -->
  <div class="review-sidebar">
    <div class="series-panel">
      <div class="review-avatar">
        {{#link-to 'user' model.user}}
          {{avatar model.user 'thumb'}}
        {{/link-to}}
      </div>
      <div class="reviewer-information">
        <h5>{{#link-to 'user' model.user}}{{model.user.username}}{{/link-to}}</h5>
        {{follow-button user=model.user classes="btn-default btn-lg"}}
      </div>
    </div>
    <div class="series-panel">
      <h4>Was this review well-written?</h4>
      <div class="recommend">
        <a {{action "upvote"}} {{bind-attr class="upvoted:active"}}>
          {{#if upvoted}}
            Liked!
          {{else}}
            Like this review
          {{/if}}
        </a>
      </div>
      <div class="dislike">
        <a {{action "downvote"}} {{bind-attr class="downvoted:active"}}>
          <i class="fa fa-thumbs-o-down"></i>
        </a>
      </div>
      <div class="review-likes" style="margin-top: 10px">
        {{model.positiveVotes}} out of {{model.totalVotes}} users found this review helpful.
      </div>
    </div>
  </div>
  <!-- End Right Side -->
</div>

{{!--
<div class="comment-section">
  <div class="comment-title">
    <h4> There are <span>12</span> comments.</h4>
  </div>
  <div class="comment-form">
    <div class="user-thumb">
      <img src="http://static.hummingbird.me/users/avatars/000/000/001/thumb/tumblr_mj083fBShe1r0p39zo1_500.gif?1390539323" />
    </div>
    <div class="user-form">
      <textarea type="text" placeholder="Join the discussion"></textarea>
    </div>
  </div>

  <div class="comments">
    <div class="comment">
      <div class="user-thumb">
        <img src="http://static.hummingbird.me/users/avatars/000/000/001/thumb/tumblr_mj083fBShe1r0p39zo1_500.gif?1390539323" />
      </div>
      <div class="comment-info">
        <h4 class="username">
          Username
          <span class="time-ago">23 minutes ago</span>
        </h4>
        <p>
          Please let's both of us stop trying to justify this whole thing and admit you're in danger.
        </p>
        <div class="comment-votes">
          <a href="#">
            <div class="positive-vote">
              <span class="vote-count"> 18 &nbsp;</span>
              <i class="fa fa-angle-up"></i>
            </div>
          </a>
          <a href="#">
            <div class="negative-vote">
              <i class="fa fa-angle-down"></i>
            </div>
          </a>
          <span class="bullet"> •</span>
          <a href="#">Reply</a>
        </div>
      </div>
    </div>

    <div class="comment-reply">
      <div class="user-thumb">
        <img src="http://static.hummingbird.me/users/avatars/000/000/001/thumb/tumblr_mj083fBShe1r0p39zo1_500.gif?1390539323" />
      </div>
      <div class="comment-info">
        <h4 class="username">
          Username
          <span class="time-ago">23 minutes ago</span>
        </h4>
        <p>
          Please let's both of us stop trying to justify this whole thing and admit you're in danger.
        </p>
        <div class="comment-votes">
          <a href="#">
            <div class="positive-vote">
              <span class="vote-count"> 18 &nbsp;</span>
              <i class="fa fa-angle-up"></i>
            </div>
          </a>
          <a href="#">
            <div class="negative-vote">
              <i class="fa fa-angle-down"></i>
            </div>
          </a>
          <span class="bullet"> •</span>
          <a href="#">Reply</a>
        </div>
      </div>
    </div>
  </div>
</div>
--}}