<section class="user-content">

  <div class="group-members-actions">
    <TextField
      @value={{this.filterInput}}
      @placeholderKey={{this.filterPlaceholder}}
      @class="group-username-filter no-blur"
    />
  </div>

  {{#if this.hasRequesters}}
    <LoadMore @selector=".group-members tr" @action={{action "loadMore"}}>
      <table class="group-members">
        <thead>
          <TableHeaderToggle
            @order={{this.order}}
            @asc={{this.asc}}
            @field="username_lower"
            @labelKey="username"
            @automatic={{true}}
          />
          <TableHeaderToggle
            @order={{this.order}}
            @asc={{this.asc}}
            @field="requested_at"
            @labelKey="groups.member_requested"
            @automatic={{true}}
          />
          <th>{{i18n "groups.requests.reason"}}</th>
          <th></th>
          <th></th>
        </thead>

        <tbody>
          {{#each this.model.requesters as |m|}}
            <tr>
              <td class="group-member">
                <UserInfo @user={{m}} @skipName={{this.skipName}} />
              </td>
              <td>
                <span class="text">{{bound-date m.requested_at}}</span>
              </td>
              <td>{{m.reason}}</td>
              <td>
                {{#if m.request_undone}}
                  {{i18n "groups.requests.undone"}}
                {{else if m.request_accepted}}
                  {{i18n "groups.requests.accepted"}}
                  <DButton
                    @action={{action "undoAcceptRequest"}}
                    @actionParam={{m}}
                    @label="groups.requests.undo"
                  />
                {{else if m.request_denied}}
                  {{i18n "groups.requests.denied"}}
                {{else}}
                  <DButton
                    @action={{action "acceptRequest"}}
                    @actionParam={{m}}
                    @label="groups.requests.accept"
                    @class="btn-primary"
                  />
                  <DButton
                    @action={{action "denyRequest"}}
                    @actionParam={{m}}
                    @label="groups.requests.deny"
                    @class="btn-danger"
                  />
                {{/if}}
              </td>
              <td></td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    </LoadMore>

    <ConditionalLoadingSpinner @condition={{this.loading}} />
  {{else}}
    <div>{{i18n "groups.empty.requests"}}</div>
  {{/if}}

</section>