hummingbird-me/kitsu-web

<h6 class="panel-heading">{{t "dashboard.groups.header"}}</h6>
{{#if getGroupsTask.isRunning}}
  <div class="w-100 text-xs-center m-t-1 m-b-1">
    {{loading-spinner size="large"}}
  </div>
{{else if getGroupsTask.last.error}}
  <p>{{t "errors.load"}}</p>
{{else if getGroupsTask.last.value}}
  {{! Show 8 most recently updated groups, along with count of updates they've missed }}
  <ul class="my-groups-widget">
    {{#each getGroupsTask.last.value as |group-member|}}
      {{#with group-member.group as |group|}}
        <li class="joined-group">
          <a href={{href-to "groups.group.group-page.index" group.slug}}>
            <span class="group-avatar">
              {{lazy-image src=(image group.avatar "small") imgClass="avatar-image--small"}}
            </span>
            <span class="group-name">{{group.name}}</span>
            {{! Max value should display as 99+ }}
            <span class="unread-counter">
              {{#if (gt group.unreadCount 99)}}
                {{format-number 99}}+
              {{else}}
                {{format-number group-member.unreadCount fallback="-"}}
              {{/if}}
            </span>
          </a>
        </li>
      {{/with}}
    {{/each}}
    {{#if (gt getGroupsTask.last.value.meta.count 8)}}
      <li class="joined-group view-more">
        <a href={{href-to "users.groups" session.account}}>{{t "button.view-all"}}</a>
      </li>
    {{/if}}
  </ul>
{{else if (not session.hasUser)}}
  {{t "groups.index.call-to-action"}}
  <a href="#" {{action "signUp"}}>Join Kitsu</a> to get started!
{{else}}
  <p>{{t "errors.contentEmpty"}}</p>
{{/if}}