{{#if visible}}
  <div class="card-content">
    {{#if loading}}
      <div class="card-row first-row">
        <div class="user-card-avatar">
          <div class="card-avatar-placeholder animated-placeholder placeholder-animation"></div>
        </div>
      </div>

      <div class="card-row second-row">
        <div class="animated-placeholder placeholder-animation"></div>
      </div>
      <div class="card-row">
        <div class="animated-placeholder placeholder-animation"></div>
      </div>
      <div class="card-row">
        <div class="animated-placeholder placeholder-animation"></div>
      </div>
      <div class="card-row">
        <div class="animated-placeholder placeholder-animation"></div>
      </div>
    {{else}}
      <div class="card-row first-row">
        <div class="user-card-avatar">
          {{#if user.profile_hidden}}
            <span class="card-huge-avatar">{{bound-avatar user "huge"}}</span>
          {{else}}
            <a href="{{user.path}}" {{action "showUser" user}} class="card-huge-avatar">{{bound-avatar user "huge"}}</a>
          {{/if}}
          {{#if user.primary_group_name}}
            {{avatar-flair
            flairURL=user.primary_group_flair_url
            flairBgColor=user.primary_group_flair_bg_color
            flairColor=user.primary_group_flair_color
            groupName=user.primary_group_name}}
          {{/if}}
          {{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}}
        </div>
        <div class="names">
          <h1 class="{{staff}} {{newUser}} {{if nameFirst "full-name" "username"}}">
            {{#if user.profile_hidden}}
              <span class="name-username-wrapper">
                {{if nameFirst user.name (format-username username)}}
              </span>
            {{else}}
              <a href="{{user.path}}" {{action "showUser" user}} class='user-profile-link'>
                <span class="name-username-wrapper">
                  {{if nameFirst user.name (format-username username)}}
                </span>
                {{user-status user currentUser=currentUser}}
              </a>
            {{/if}}
          </h1>
          {{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser" user)) tagName=''}}
          {{#unless nameFirst}}
            {{#if user.name}}
              <h2 class='full-name'>{{user.name}}</h2>
            {{/if}}
          {{else}}
            <h2 class='username'>{{username}}</h2>
          {{/unless}}
          {{#if user.title}}
            <h2>{{user.title}}</h2>
          {{/if}}
          {{#if user.staged}}
            <h2 class="staged">{{i18n 'user.staged'}}</h2>
          {{/if}}
          {{plugin-outlet name="user-card-post-names" args=(hash user=user) tagName='div'}}
        </div>
        <ul class="usercard-controls">
          {{#if user.can_send_private_message_to_user}}
            <li class='compose-pm'>
              {{d-button
              class="btn-primary"
              action=(action "composePM" user post)
              icon="envelope"
              label="user.private_message"}}
            </li>
          {{/if}}
          {{#if showFilter}}
            <li>
              {{d-button
              class="btn-default"
              action=(action "togglePosts" user)
              icon="filter"
              translatedLabel=togglePostsLabel}}
            </li>
          {{/if}}
          {{#if hasUserFilters}}
            <li>
              {{d-button
              action=(action "cancelFilter")
              icon="times"
              label="topic.filters.cancel"}}
            </li>
          {{/if}}
          {{#if showDelete}}
            <li>
              {{d-button
              class="btn-danger"
              action=(action "deleteUser")
              actionParam=user
              icon="exclamation-triangle"
              label="admin.user.delete"}}
            </li>
          {{/if}}
        </ul>
        {{plugin-outlet
        name="user-card-additional-controls"
        args=(hash user=user close=(action "close"))
        tagName=""}}
      </div>

      {{#if user.profile_hidden}}
        <div class="card-row second-row">
          <div class='profile-hidden'>
            <span>{{i18n "user.profile_hidden"}}</span>
          </div>
        </div>
      {{/if}}

      {{#if isSuspendedOrHasBio}}
        <div class="card-row second-row">
          {{#if user.suspend_reason}}
            <div class='suspended'>
              <div class="suspension-date">
                {{d-icon "ban"}}
                {{i18n 'user.suspended_notice' date=user.suspendedTillDate}}
              </div>
              <div class='suspension-reason'>
                <span class="suspension-reason-title">{{i18n 'user.suspended_reason'}}</span>
                <span class="suspension-reason-description">{{user.suspend_reason}}</span>
              </div>
            </div>
          {{else}}
            {{#if user.bio_excerpt}}
              <div class='bio'>{{text-overflow class="overflow" text=user.bio_excerpt}}</div>
            {{/if}}
          {{/if}}
        </div>
      {{/if}}

      {{#if showFeaturedTopic}}
        <div class="card-row">
          <div class="featured-topic">
            <span class="desc">{{i18n 'user.featured_topic'}}</span>
            {{#link-to "topic" user.featured_topic.slug user.featured_topic.id }}{{{user.featured_topic.fancy_title}}}{{/link-to}}
          </div>
        </div>
      {{/if}}

      {{#if hasLocationOrWebsite}}
        <div class="card-row">
          <div class="location-and-website">
            {{#if user.location}}
              <span class='location'>{{d-icon "map-marker-alt"}}
                <span>{{user.location}}</span></span>
            {{/if}}
            {{#if user.website_name}}
              <span class='website-name'>
                {{d-icon "globe"}}
                {{#if linkWebsite}}
                  <a href="{{user.website}}" rel={{unless removeNoFollow 'nofollow ugc noopener'}}
                   target="_blank">{{user.website_name}}</a>
                {{else}}
                  <span title={{user.website}}>{{user.website_name}}</span>
                {{/if}}
              </span>
            {{/if}}
            {{plugin-outlet name="user-card-location-and-website" args=(hash user=user)}}
          </div>
        </div>
      {{/if}}

      <div class="card-row">
        {{#unless user.profile_hidden}}
          <div class="metadata">
            {{#if user.last_posted_at}}
              <h3><span class='desc'>{{i18n 'last_post'}}</span>
                {{format-date user.last_posted_at leaveAgo="true"}}</h3>
            {{/if}}
            <h3><span class='desc'>{{i18n 'joined'}}</span>
              {{format-date user.created_at leaveAgo="true"}}</h3>
            {{#if user.time_read}}
              <h3 title="{{timeReadTooltip}}">
                <span class='desc'>{{i18n 'time_read'}}</span>
                {{format-duration user.time_read}}
                {{#if showRecentTimeRead}}
                  <span>({{i18n 'time_read_recently' time_read=recentTimeRead}})</span>
                {{/if}}
              </h3>
            {{/if}}
            {{#if showCheckEmail}}
              <h3 class="email">
                {{d-icon "far-envelope" title="user.email.title"}}
                {{#if user.email}}
                  {{user.email}}
                {{else}}
                  {{d-button
                    action=(action "checkEmail")
                    actionParam=user
                    icon="far-envelope"
                    label="admin.users.check_email.text"
                    class="btn-primary"}}
                {{/if}}
              </h3>
            {{/if}}
            {{plugin-outlet name="user-card-metadata" args=(hash user=user)}}
          </div>
        {{/unless}}
        {{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}}
      </div>

      {{#if publicUserFields}}
        <div class="card-row">
          <div class="public-user-fields">
            {{#each publicUserFields as |uf|}}
              {{#if uf.value}}
                <div class="public-user-field {{uf.field.dasherized_name}}">
                  <span class="user-field-name">{{uf.field.name}}:</span>
                  <span class="user-field-value">{{uf.value}}</span>
                </div>
              {{/if}}
            {{/each}}
          </div>
        </div>
      {{/if}}

      {{plugin-outlet name="user-card-before-badges" args=(hash user=user)}}

      {{#if showBadges}}
        <div class="card-row">
          {{#if user.featured_user_badges}}
            <div class="badge-section">
              {{#each user.featured_user_badges as |ub|}}
                {{user-badge badge=ub.badge user=user}}
              {{/each}}
              {{#if showMoreBadges}}
                <span class='more-user-badges'>
                  {{#link-to 'user.badges' user}}
                    {{i18n 'badges.more_badges' count=moreBadgesCount}}
                  {{/link-to}}
                </span>
              {{/if}}
            </div>
          {{/if}}
        </div>
      {{/if}}
    {{/if}}
  </div>
{{/if}}
