<dd {{action 'onClick'}} class="warp__item">
  <a class="js-username-hover" data-id="{{user.id}}" data-login="{{user.login}}">

    <figure class="warp__avatar">
      <img src="{{user.avatar}}" alt="{{user.displayName}}">
    </figure>

    <span class="warp__text ellipsis">
      <span class="js-display-name warp__title">{{format-display-name user.login user.displayName}}</span>
      {{#if user.isFriend}}
        {{#if userLocation}}
          <a href={{userLocation}} class="rich-presence" data-tt_medium="friends" data-tt_content="friend_presence" onclick={{disable-bubbling-track-pageview (action 'clickPresence')}}>
            <span class="js-friend-online-status warp__status ellipsis" title={{statusString}}>
              {{statusString}}
            </span>
          </a>
        {{else}}
          <span class="js-friend-online-status warp__status ellipsis" title={{statusString}}>
            {{statusString}}
          </span>
        {{/if}}
      {{/if}}
      {{#if nonStrangerString}}
        <span class="warp__status ellipsis" title="{{nonStrangerString}}">
          {{nonStrangerString}}
        </span>
      {{/if}}
      {{#if user.recommendedReason}}
        <span class="warp__status ellipsis" title="{{user.recommendedReason}}">
          {{user.recommendedReason}}
        </span>
      {{/if}}
    </span>

    {{yield}}

    {{#if shouldShowPresence}}
      {{twitch-friends-list/twitch-friend-online-status userId=user.id}}
    {{/if}}

  </a>
</dd>
