{{#if this.visible}}
  <div class="card-content">
    {{#if this.loading}}
      <div class="card-row first-row">
        <div class="group-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>
    {{else}}
      <div class="card-row first-row">
        <div class="group-card-avatar">
          <a
            href={{this.groupPath}}
            {{on "click" (fn this.handleShowGroup this.group)}}
            class="card-huge-avatar"
          >
            <AvatarFlair
              @flairName={{this.group.name}}
              @flairUrl={{this.group.flair_url}}
              @flairBgColor={{this.group.flair_bg_color}}
              @flairColor={{this.group.flair_color}}
            />
          </a>
        </div>
        <div class="names">
          <span>
            <h1 class={{this.group.name}}>
              <a
                href={{this.groupPath}}
                {{on "click" (fn this.handleShowGroup this.group)}}
                class="group-page-link"
              >{{this.group.name}}</a>
            </h1>
            {{#if this.group.full_name}}
              <h2 class="full-name">{{this.group.full_name}}</h2>
            {{else}}
              <h2 class="username">{{this.group.name}}</h2>
            {{/if}}
          </span>
        </div>
        <ul class="usercard-controls group-details-button">
          <li>
            <GroupMembershipButton
              @model={{this.group}}
              @showLogin={{route-action "showLogin"}}
            />
          </li>
          {{#if this.group.messageable}}
            <li>
              <DButton
                @action={{action "messageGroup"}}
                @class="btn-primary group-message-button inline"
                @icon="envelope"
                @label="groups.message"
              />
            </li>
          {{/if}}
        </ul>
      </div>

      {{#if this.group.bio_excerpt}}
        <div class="card-row second-row">
          <div class="bio">
            {{html-safe this.group.bio_excerpt}}
          </div>
        </div>
      {{/if}}

      {{#if this.group.members}}
        <div class="card-row third-row">
          <div class="members metadata">
            {{#each this.group.members as |user|}}
              <a
                {{on "click" this.close}}
                href={{user.path}}
                class="card-tiny-avatar"
              >{{bound-avatar user "tiny"}}</a>
            {{/each}}
            {{#if this.showMoreMembers}}
              <a
                href={{this.groupPath}}
                {{on "click" (fn this.handleShowGroup this.group)}}
                class="more-members-link"
              >
                <span class="more-members-count">+{{this.moreMembersCount}}
                  {{i18n "more"}}</span>
              </a>
            {{/if}}
          </div>
        </div>
      {{/if}}
    {{/if}}
  </div>
{{/if}}