hummingbird-me/kitsu-web

<div class="checklist card">
  <h6>{{t "users.activity.onboarding.title"}}</h6>
  <div class="steps-remaining">
    {{t "onboarding.checklist.steps" count=(dec stepsCompleted 6)}}
    <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 hasAvatar "step--complete"}}">
      <span class="step-status">
        {{#if hasAvatar}}
          ☑️
        {{else}}
          😎
        {{/if}}
      </span>
      <span class="step-description">{{t "onboarding.checklist.avatar"}}</span>
    </li>

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

    <li class="step {{if hasAbout "step--complete"}}">
      <span class="step-status">
        {{#if hasAbout}}
          ☑️
        {{else}}
          📖
        {{/if}}
      </span>
      <span class="step-description">{{t "onboarding.checklist.about-me" htmlSafe=true}}</span>
    </li>

    <li class="step {{if hasFavorites "step--complete"}}">
      <span class="step-status">
        {{#if hasFavorites}}
          ☑️
        {{else}}
          💯
        {{/if}}
      </span>
      <span class="step-description">{{t "onboarding.checklist.favorite"}}</span>
    </li>
  </ul>
</div>