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

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

  {{#if hasMembers}}
    {{#load-more selector=".group-members tr" action=(action "loadMore")}}
      <table class="group-members">
        <thead>
          <tr>
            <th class="bulk-select">
              {{#if canManageGroup}}
                {{flat-button class="bulk-select" icon="list" action=(action "toggleBulkSelect") title="topics.bulk.toggle"}}
              {{/if}}
            </th>
            {{#if isBulk}}
              <th class="bulk-select-buttons">
                {{d-button action=(action "bulkSelectAll") label="topics.bulk.select_all"}}
                {{d-button action=(action "bulkClearAll") label="topics.bulk.clear_all"}}
              </th>
            {{/if}}
            {{table-header-toggle order=order asc=asc field="username_lower" labelKey="username" class="username"}}
            <th class="group-owner"></th>
            {{table-header-toggle order=order asc=asc field="added_at" labelKey="groups.member_added"}}
            {{table-header-toggle order=order asc=asc field="last_posted_at" labelKey="last_post"}}
            {{table-header-toggle order=order asc=asc field="last_seen_at" labelKey="last_seen"}}
            <th>
              {{#if isBulk}}
                {{group-member-dropdown
                  bulkSelection=bulkSelection
                  canAdminGroup=model.can_admin_group
                  onChange=(action "actOnSelection" bulkSelection)
                }}
              {{/if}}
            </th>
          </tr>
        </thead>

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

              <td class="avatar" colspan="2">
                {{user-info user=m skipName=skipName}}
              </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 canManageGroup}}
                  {{group-member-dropdown
                    member=m
                    canAdminGroup=model.can_admin_group
                    onChange=(action "actOnGroup" m)
                  }}
                {{/if}}
                {{!-- group parameter is used by plugins --}}
              </td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    {{/load-more}}

    {{conditional-loading-spinner condition=loading}}
  {{else if model.can_see_members}}
    <br>

    <div>{{i18n "groups.empty.members"}}</div>
  {{else}}
    <br>

    <div>{{i18n "groups.members.forbidden"}}</div>
  {{/if}}
</section>
