<div class='container show-badge'>
  <h1>
    {{#link-to 'badges.index'}}{{i18n badges.title}}{{/link-to}}
    <i class='fa fa-angle-right'></i>
    {{displayName}}
  </h1>

  <table class='badges-listing'>
    <tbody>
      <tr>
        <td class='badge'>{{user-badge badge=this}}</td>
        <td class='description'>{{displayDescription}}</td>
        <td class='grant-count'>{{i18n badges.granted count=grant_count}}</td>
        <td class='info'>{{i18n badges.allow_title}} {{{view.allowTitle}}}<br>{{i18n badges.multiple_grant}} {{{view.multipleGrant}}}
        </td>
      </tr>
    </tbody>
  </table>

  {{#if userBadges}}
    <div class={{unbound layoutClass}}>
    {{#each userBadges}}
        <div class="badge-user">
          {{#link-to 'user' user classNames="badge-info"}}
              {{avatar user imageSize="large"}}
              <div class="details">
                <span class="username">{{user.username}}</span>
                {{format-date granted_at}}
              </div>
          {{/link-to}}

          {{#if post_number}}
            <a class="post-link" href="{{unbound topic.url}}/{{unbound post_number}}">{{topic.title}}</a>
          {{/if}}
        </div>
      {{/each}}
    </div>
    {{#if canLoadMore}}
      <div class='spinner'></div>
    {{/if}}
  {{else}}
    {{#unless userBadgesLoaded}}
      <div class='spinner'></div>
    {{/unless}}
  {{/if}}
</div>
