<section class="user-content">
  <TextField
    @value={{this.filterInput}}
    @placeholderKey={{this.filterPlaceholder}}
    @autocomplete="off"
    @class="group-username-filter no-blur"
  />

  <div class="group-members-manage">
    {{#if this.canManageGroup}}
      <DButton
        @icon="plus"
        @label="groups.manage.add_members"
        @class="group-members-add"
        @action={{route-action "showAddMembersModal"}}
      />
    {{/if}}
  </div>

  {{#if this.hasMembers}}
    <LoadMore
      @selector=".group-members .user-info"
      @action={{action "loadMore"}}
    >
      <div class="group-members">
        {{#each this.model.members as |user|}}
          <div class="group-member">
            <UserInfo @user={{user}} @skipName={{this.skipName}}>
              {{#if user.owner}}<strong class="group-owner-label">{{i18n
                    "groups.owner"
                  }}</strong>{{/if}}

              <div class="group-member-info">
                <label>{{i18n "last_post"}}</label>
                <span class="text">{{bound-date user.last_posted_at}}</span>
              </div>

              <div class="group-member-info">
                <label>{{i18n "last_seen"}}</label>
                <span class="text">{{bound-date user.last_seen_at}}</span>
              </div>

              {{#if this.canManageGroup}}
                <GroupMemberDropdown
                  @member={{user}}
                  @canAdminGroup={{this.model.can_admin_group}}
                  @canEditGroup={{this.model.can_edit_group}}
                  @onChange={{action "actOnGroup" user}}
                />
              {{/if}}
            </UserInfo>
          </div>
        {{/each}}
      </div>
    </LoadMore>

    <ConditionalLoadingSpinner @condition={{this.loading}} />
  {{else}}
    <br />

    <div>{{i18n this.emptyMessageKey}}</div>
  {{/if}}
</section>