{{#if this.model.canLoadMore}}
  {{hide-application-footer}}
{{/if}}

{{body-class "users-page"}}
<section>
  <LoadMore
    @selector=".user-card-directory .user-card-container"
    @action={{action "loadMore"}}
  >
    <div class="container">
      <div class="users-directory directory">
        <PluginOutlet
          @name="users-top"
          @connectorTagName="div"
          @outletArgs={{hash model=this.model}}
        />
        <div class="directory-controls">
          <div class="period-controls">
            <PeriodChooser
              @period={{this.period}}
              @onChange={{fn (mut this.period)}}
              @fullDay={{false}}
            />
            {{#if this.lastUpdatedAt}}
              <div class="directory-last-updated">
                {{i18n "directory.last_updated"}}
                {{this.lastUpdatedAt}}
              </div>
            {{/if}}
          </div>
          <div class="inline-form">
            <label class="total-rows">
              {{#if this.model.totalRows}}
                {{i18n "directory.total_rows" count=this.model.totalRows}}
              {{/if}}
            </label>
            <Input
              @value={{readonly this.emailInput}}
              placeholder={{i18n "directory.filter_name"}}
              class="filter-name no-blur"
              {{on "input" (with-event-value this.onUsernameFilterChanged)}}
            />
            {{#if this.showGroupFilter}}
              <ComboBox
                @value={{this.group}}
                @content={{this.groupOptions}}
                @onChange={{this.groupChanged}}
                @options={{hash none="directory.group.all"}}
                class="directory-group-selector"
              />
            {{/if}}
            {{#if this.currentUser.staff}}
              <DButton
                @icon="wrench"
                @action={{this.showEditColumnsModal}}
                class="btn-default open-edit-columns-btn"
              />
            {{/if}}
            <PluginOutlet
              @name="users-directory-controls"
              @outletArgs={{hash model=this.model}}
            />
          </div>
        </div>

        <ConditionalLoadingSpinner @condition={{this.isLoading}}>
          {{#if this.userCards.length}}
            <div class="user-card-directory">
              {{#each this.userCards as |userCard|}}
                <div class="user-card-container">
                  <UserCardStatic
                    @user={{userCard.user}}
                    @visible={{true}}
                    @loading={{userCard.loading}}
                    @username={{userCard.user.username}}
                    @showUser={{this.userCardShowUser}}
                  />
                  {{#if (theme-setting "show_stats")}}
                    <div class="user-card-directory-footer">
                      {{#each this.columns as |column|}}
                        <span
                          class="stat stat-{{dasherize column.name}}
                            stat-type-{{column.type}}"
                        >
                          <span class="value">
                            {{#if
                              (directory-column-is-user-field column=column)
                            }}
                              {{directory-item-user-field-value
                                item=userCard.directoryItem
                                column=column
                              }}
                            {{else}}
                              {{directory-item-value
                                item=userCard.directoryItem
                                column=column
                              }}
                            {{/if}}
                          </span>
                          <span class="label">
                            <TableHeaderToggle
                              @field={{column.name}}
                              @icon={{column.icon}}
                              @order={{this.order}}
                              @asc={{this.asc}}
                              @automatic={{directory-column-is-automatic
                                column=column
                              }}
                              @translated={{column.user_field_id}}
                              @onActiveRender={{this.setActiveHeader}}
                            />
                          </span>
                        </span>
                      {{/each}}
                    </div>
                  {{/if}}
                </div>
              {{/each}}
            </div>
            <ConditionalLoadingSpinner @condition={{this.model.loadingMore}} />
          {{else}}
            <div class="empty-state">
              <div class="empty-state-body">
                <p>
                  {{#if this.name}}
                    {{i18n "directory.no_results_with_search"}}
                  {{else}}
                    {{i18n "directory.no_results.body"}}
                    {{#if this.currentUser.staff}}
                      {{html-safe
                        (i18n
                          "directory.no_results.extra_body" basePath=(base-path)
                        )
                      }}
                    {{/if}}
                  {{/if}}
                </p>
              </div>
            </div>
          {{/if}}
        </ConditionalLoadingSpinner>
      </div>
    </div>
  </LoadMore>
</section>