hummingbird-me/kitsu-web

<div class="checklist card">
  <h6>{{t "onboarding.checklist.header"}}</h6>
  <div class="steps-remaining">
    {{t "onboarding.checklist.steps" count=(dec stepsCompleted 5)}}
    <svg class="rc-progress-line progressBar_35bcd" viewBox="0 0 100 4" preserveAspectRatio="none" data-reactid="1130">
      <path class="rc-progress-line-trail" d="M 2,2 L 98,2" stroke-linecap="round" stroke="#D9D9D9" stroke-width="1" fill-opacity="0" data-reactid="1131"></path>
      <path class="rc-progress-line-path" d="M 2,2 L 98,2" stroke-linecap="round" stroke="#FD755C" stroke-width="4" fill-opacity="0" style="stroke-dasharray:100px, 100px; stroke-dashoffset:{{percentageComplete}}px; transition:stroke-dashoffset 0.3s ease 0s, stroke 0.3s linear;" data-reactid="1132"></path>
    </svg>
  </div>
  <ul>
    {{! default checked }}
    <li class="step step--complete">
      <span class="step-status">☑️</span>
      <span class="step-description">{{t "onboarding.checklist.feed"}}</span>
    </li>

    <li class="step {{if hasRatings "step--complete"}}">
      <span class="step-status">
        {{#if hasRatings}}
          ☑️
        {{else}}
          ⭐
        {{/if}}
      </span>
      <span class="step-description">
        {{#if hasRatings}}
          {{t "onboarding.checklist.rate"}}
        {{else}}
          {{t "onboarding.checklist.rate-incomplete" count=ratingsLeft}}
        {{/if}}
      </span>
    </li>

    <li class="step {{if hasFollows "step--complete"}}">
      <span class="step-status">
        {{#if hasFollows}}
          ☑️
        {{else}}
          👀
        {{/if}}
      </span>
      <span class="step-description">
        {{#if hasFollows}}
          {{t "onboarding.checklist.follow"}}
        {{else}}
          {{t "onboarding.checklist.follow-incomplete" count=followsLeft}}
        {{/if}}
      </span>
    </li>

    <li class="step {{if hasComments "step--complete"}}">
      <span class="step-status">
        {{#if hasComments}}
          ☑️
        {{else}}
          ✍️
        {{/if}}
      </span>
      <span class="step-description">{{t "onboarding.checklist.comment"}}</span>
    </li>

    <li class="step {{if hasLikes "step--complete"}}">
      <span class="step-status">
        {{#if hasLikes}}
          ☑️
        {{else}}
          😍
        {{/if}}
      </span>
      <span class="step-description">
        {{#if hasLikes}}
          {{t "onboarding.checklist.like"}}
        {{else}}
          {{t "onboarding.checklist.like-incomplete" count=likesLeft}}
        {{/if}}
      </span>
    </li>
  </ul>
</div>