{{#if visible}}
  <div class="card-content">
    <div class="card-row first-row">
      <div class="group-card-avatar">
        <a href={{groupPath}} {{action "showGroup" group}} class="card-huge-avatar">
          {{avatar-flair
            flairURL=group.flair_url
            flairBgColor=group.flair_bg_color
            flairColor=group.flair_color
            groupName=group.name
          }}
        </a>
      </div>
      <div class="names">
        <span>
          <h1 class={{group.name}}>
            <a href={{groupPath}} {{action "showGroup" group}} class="group-page-link">{{group.name}}</a>
          </h1>
          {{#if group.full_name}}
            <h2 class="full-name">{{group.full_name}}</h2>
          {{else}}
            <h2 class="username">{{group.name}}</h2>
          {{/if}}
        </span>
      </div>
      <ul class="usercard-controls group-details-button">
        <li>
          {{group-membership-button
             model=group
             showLogin=(route-action "showLogin")
           }}
        </li>
        {{#if group.messageable}}
          <li>
            {{d-button
              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 group.members}}
      <div class="card-row third-row">
        <div class="members metadata">
          {{#each group.members as |user|}}
            <a {{action "close"}} href={{user.path}} class="card-tiny-avatar">{{bound-avatar user "tiny"}}</a>
          {{/each}}
          {{#if showMoreMembers}}
            <a href={{groupPath}} {{action "showGroup" group}} class="more-members-link">
              <span class="more-members-count">+{{moreMembersCount}} {{i18n "more"}}</span>
            </a>
          {{/if}}
        </div>
      </div>
    {{/if}}
  </div>
{{/if}}
