<section class="user-content">
  <div class="group-members-actions">
    {{#if this.model.can_see_members}}
      <TextField
        @value={{this.filterInput}}
        @placeholderKey={{this.filterPlaceholder}}
        @autocomplete="off"
        @class="group-username-filter no-blur"
      />
    {{/if}}

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

        {{#if this.currentUser.can_invite_to_forum}}
          <DButton
            @icon="plus"
            @action={{route-action "showInviteModal"}}
            @label="groups.manage.invite_members"
            @class="btn-default group-members-add"
          />
        {{/if}}
      </div>
    {{/if}}
  </div>

  {{#if this.hasMembers}}
    <LoadMore @selector=".group-members tr" @action={{action "loadMore"}}>
      <table
        class={{if this.isBulk "group-members sticky-header" "group-members"}}
      >
        <thead>
          <tr>
            <th class="bulk-select">
              {{#if this.canManageGroup}}
                <FlatButton
                  @class="bulk-select"
                  @icon="list"
                  @action={{action "toggleBulkSelect"}}
                  @title="topics.bulk.toggle"
                />
              {{/if}}
            </th>
            {{#if this.isBulk}}
              <th class="bulk-select-buttons">
                <span class="bulk-select-buttons-wrap">
                  {{#if this.bulkSelection}}
                    <BulkGroupMemberDropdown
                      @bulkSelection={{this.bulkSelection}}
                      @canAdminGroup={{this.model.can_admin_group}}
                      @canEditGroup={{this.model.can_edit_group}}
                      @onChange={{action "actOnSelection" this.bulkSelection}}
                    />
                  {{/if}}
                  <DButton
                    @action={{action "bulkSelectAll"}}
                    @label="topics.bulk.select_all"
                  />
                  <DButton
                    @action={{action "bulkClearAll"}}
                    @label="topics.bulk.clear_all"
                  />
                </span>
              </th>
            {{/if}}
            <TableHeaderToggle
              @order={{this.order}}
              @asc={{this.asc}}
              @field="username_lower"
              @labelKey="username"
              @class="username"
              @automatic={{true}}
              @colspan="2"
            />
            <TableHeaderToggle
              @order={{this.order}}
              @asc={{this.asc}}
              @field="added_at"
              @labelKey="groups.member_added"
              @automatic={{true}}
            />
            <TableHeaderToggle
              @order={{this.order}}
              @asc={{this.asc}}
              @field="last_posted_at"
              @labelKey="last_post"
              @automatic={{true}}
            />
            <TableHeaderToggle
              @order={{this.order}}
              @asc={{this.asc}}
              @field="last_seen_at"
              @labelKey="last_seen"
              @automatic={{true}}
            />
            <th></th>
          </tr>
        </thead>

        <tbody>
          {{#each this.model.members as |m|}}
            <tr>
              {{#if this.isBulk}}
                <td class="bulk-select">
                  <Input
                    @type="checkbox"
                    class="bulk-select"
                    {{on "click" (action "selectMember" m)}}
                  />
                </td>
              {{/if}}

              <td class="group-member" colspan="2">
                <UserInfo
                  @user={{m}}
                  @skipName={{this.skipName}}
                  @showStatus={{true}}
                  @showStatusTooltip={{true}}
                />
              </td>

              <td class="group-owner">
                {{#if m.owner}}
                  {{d-icon "shield-alt"}}
                  {{i18n "groups.members.owner"}}<br />
                {{/if}}
                {{#if m.primary}}
                  {{i18n "groups.members.primary"}}
                {{/if}}
              </td>
              <td>
                <span class="text">{{bound-date m.added_at}}</span>
              </td>
              <td>
                <span class="text">{{bound-date m.last_posted_at}}</span>
              </td>
              <td>
                <span class="text">{{bound-date m.last_seen_at}}</span>
              </td>

              <td>
                {{#if this.canManageGroup}}
                  <GroupMemberDropdown
                    @member={{m}}
                    @canAdminGroup={{this.model.can_admin_group}}
                    @canEditGroup={{this.model.can_edit_group}}
                    @onChange={{action "actOnGroup" m}}
                  />
                {{/if}}
                {{! group parameter is used by plugins }}
              </td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    </LoadMore>

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

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