hummingbird-me/kitsu-web

<div class="time-spent-card">
  <div class={{concat "time-spent-badge time-spent-" kind "-" primaryUnit.index}}>
    {{svg-jar (concat kind "-" primaryUnit.index)}}
  </div>
  <div class="time-spent-text">
    <div class="time-spent-primary">
      {{#if (eq kind "anime")}}
        {{t "users.activity.stats.time-watched" count=(format-number primaryUnit.count maximumFractionDigits=1) timeUnit=(t (concat "timeUnits." primaryUnit.name) count=primaryUnit.count)}}
      {{else}}
        {{t "users.activity.stats.chapters-read" count=(format-number primaryUnit.count maximumFractionDigits=1)}}
      {{/if}}
    </div>
    <div class="time-spent-secondary">
      {{#if (gt stat.completed 0)}}
        {{t "users.activity.stats.completed" count=(format-number stat.completed)}}
      {{/if}}
      {{#if (gt percentile 0)}}
        {{t "users.activity.stats.more-than" htmlSafe=true percentage=(decimal-number percentile 0)}}
      {{/if}}
    </div>
  </div>

  {{#if (eq kind "anime")}}
    <div class="time-spent-info {{if showTooltip "active"}}" id="time-spent-info">
      {{svg-jar "info-button"}}
    </div>
    {{#if showTooltip}}
      <div>
        {{#ember-tether
          class="time-spent-tooltip"
          target="#time-spent-info"
          attachment="bottom right"
          targetAttachment="top center"
          offset="15px -20px"
        }}
        {{! TODO: Make this friendlier for translation }}
          <span class="time-spent-breakdown">
            {{#each breakdown as |unit index|}}
              <span>
                {{if (gt index 0) (t "users.activity.stats.time-breakdown.seperator")}}
                {{t "users.activity.stats.time-breakdown.time-segment" count=(format-number unit.count) timeUnit=(t (concat "timeUnits." unit.name) count=unit.count)}}
              </span>
            {{/each}}
          </span>
          {{t "users.activity.stats.time-breakdown.total"}}
          <div class="attach" />
        {{/ember-tether}}
      </div>
    {{/if}}
  {{/if}}
</div>