<div class="apps-grid-cell tooltip-centered" data-tooltip="{{ if this.user.isLocked 'Requires password reset to log in'}}">
    <LinkTo @route="settings.staff.user" @model={{this.user.slug}} data-test-user-id={{this.user.id}}>
    <article class="apps-card-app">
        <div class="apps-card-left">
            <span class="user-list-item-figure" style={{background-image-style this.user.profileImageUrl}}>
                <span class="hidden">Photo of {{this.user.name}}</span>
            </span>
            <div class="apps-card-meta">
                <h3 class="apps-card-app-title">{{this.user.name}}</h3>
                <p class="apps-card-app-desc">Last seen: {{this.component.lastLoginUTC}}</p>
            </div>
        </div>
        <div class="apps-card-right">
            {{#if this.user.isLocked}}
                <span class="gh-badge locked">{{svg-jar "lock"}}</span>
            {{/if}}
            <div class="apps-configured">
                {{#if this.user.isSuspended}}
                    <span class="gh-badge suspended">Suspended</span>
                {{else}}
                    {{#unless this.session.user.isAuthorOrContributor}}
                        {{#each this.user.roles as |role|}}
                            <span class="gh-badge {{role.lowerCaseName}}" data-test-role-name>{{role.name}}</span>
                        {{/each}}
                    {{/unless}}
                {{/if}}
                {{svg-jar "arrow-right" class="gh-user-arrow-icon"}}
            </div>
        </div>
    </article>
    </LinkTo>
</div>
