hummingbird-me/hummingbird

<div class="container">

  {{! Only show pending section if there are pending members }}
  {{#if hasPendings}}
    <div class="group-pending">
      <h3>Pending Members</h3>
      {{#each pending as |member|}}
        <div class="follow-panel-wrapper">
          <div class="follow-panel">
            {{#link-to 'user' member.user}}
              <div class="follow-cover" {{bind-attr style=member.user.coverImageStyle}}></div>
            {{/link-to}}
            <div class="user-avatar">
              <a {{bind-attr href=member.user.userLink}}>
                {{avatar member.user 'thumb'}}
              </a>
            </div>
            <div class="user-info">
              <h4>
                {{#link-to 'user' member.user}}{{member.user.username}}{{/link-to}}
              </h4>
              <p class="mini-bio">
                {{member.user.truncatedBio}}
              </p>
            </div>

            <div class="group-actions">
              {{! change members rank }}
              {{#if currentMember.canApproveMembers}}
                {{! approve/reject application }}
                <button class="btn btn-primary group-approve" {{action "approveMember" member}}>
                  Approve
                </button>
                <button class="btn btn-primary group-reject" {{action "rejectMember" member}}>
                  Reject
                </button>
              {{/if}}
            </div>
          </div>
        </div>
      {{/each}}
    </div>
  {{/if}}

  {{#if hasStaff}}
    <div class="group-staff">
      <h3>Group Staff</h3>
      {{#each staff as |member|}}
        <div class="follow-panel-wrapper">
          <div class="follow-panel">
            {{#link-to 'user' member.user}}
              <div class="follow-cover" {{bind-attr style=member.user.coverImageStyle}}></div>
            {{/link-to}}
            <div class="user-avatar">
              <a {{bind-attr href=member.user.userLink}}>
                {{avatar member.user 'thumb'}}
              </a>
            </div>
            <div class="user-info">
              <h4>
                {{#link-to 'user' member.user}}{{member.user.username}}{{/link-to}}
              </h4>
              <p class="mini-bio">
                {{member.user.truncatedBio}}
              </p>
            </div>

            <div class="group-actions">
              {{! kick member out of group, staff section is admin only }}
              {{#if currentMember.isAdmin}}
                <button class="btn btn-primary group-kick" {{action "kickMember" member}}>
                  Kick
                </button>
              {{/if}}

              {{! change members rank }}
              {{#if currentMember.canChangeRank}}
                {{view "select"
                  content=ranks
                  optionValuePath="content.value"
                  optionLabelPath="content.label"
                  value=member.rank
                }}
              {{else}}
                <span class="mini-badge">{{member.displayRank}}</span>
              {{/if}}
            </div>
          </div>
        </div>
      {{/each}}
    </div>
  {{/if}}

  {{#if hasPlebs}}
    <div class="group-members">
      <h3>Group Members</h3>
      {{#each plebs as |member|}}
        <div class="follow-panel-wrapper">
          <div class="follow-panel">
            {{#link-to 'user' member.user}}
              <div class="follow-cover" {{bind-attr style=member.user.coverImageStyle}}></div>
            {{/link-to}}
            <div class="user-avatar">
              <a {{bind-attr href=member.user.userLink}}>
                {{avatar member.user 'thumb'}}
              </a>
            </div>
            <div class="user-info">
              <h4>
                {{#link-to 'user' member.user}}{{member.user.username}}{{/link-to}}
              </h4>
              <p class="mini-bio">
                {{member.user.truncatedBio}}
              </p>
            </div>

            <div class="group-actions">
              {{! kick member out of group }}
              {{#if currentMember.canKickMember}}
                <button class="btn btn-primary group-kick" {{action "kickMember" member}}>
                  Kick
                </button>
              {{/if}}

              {{! change members rank }}
              {{#if currentMember.canChangeRank}}
                {{view "select"
                  content=ranks
                  optionValuePath="content.value"
                  optionLabelPath="content.label"
                  value=member.rank
                }}
              {{else}}
                <span class="mini-badge">{{member.displayRank}}</span>
              {{/if}}
            </div>
          </div>
        </div>
      {{/each}}
    </div>
  {{/if}}
</div>

{{#if canLoadMore}}
  {{load-more classNames="light" action="loadNextPage"}}
{{/if}}