{{#d-section pageClass="users"}}
  {{#load-more
    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">
            {{period-chooser
              period=period
              onChange=(action (mut period))
              fullDay=false
            }}
            {{#if lastUpdatedAt}}
              <div class="directory-last-updated">
                {{i18n "directory.last_updated"}}
                {{lastUpdatedAt}}
              </div>
            {{/if}}
          </div>
          <div class="inline-form">
            <label class="total-rows">
              {{#if model.totalRows}}
                {{i18n "directory.total_rows" count=model.totalRows}}
              {{/if}}
            </label>
            <Input
              @value={{readonly emailInput}}
              placeholder={{I18n "directory.filter_name"}}
              class="filter-name no-blur"
              {{on
                "input"
                (action "onUsernameFilterChanged" value="target.value")
              }}
            />
            {{#if showGroupFilter}}
              {{combo-box
                class="directory-group-selector"
                value=group
                content=groupOptions
                onChange=(action groupChanged)
                options=(hash none="directory.group.all")
              }}
            {{/if}}
            {{#if currentUser.staff}}
              {{d-button
                icon="wrench"
                action=(action "showEditColumnsModal")
                class="btn-default open-edit-columns-btn"
              }}
            {{/if}}
            <PluginOutlet
              @name="users-directory-controls"
              @outletArgs={{hash model=this.model}}
            />
          </div>
        </div>

        {{#conditional-loading-spinner condition=isLoading}}
          {{#if userCards.length}}
            <div class="user-card-directory">
              {{#each userCards as |userCard|}}
                <div class="user-card-container">
                  {{user-card-static
                    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 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">
                            {{table-header-toggle
                              field=column.name
                              icon=column.icon
                              order=order
                              asc=asc
                              automatic=(directory-column-is-automatic
                                column=column
                              )
                              translated=column.user_field_id
                              onActiveRender=setActiveHeader
                            }}
                          </span>
                        </span>
                      {{/each}}
                    </div>
                  {{/if}}
                </div>
              {{/each}}
            </div>
            {{conditional-loading-spinner condition=model.loadingMore}}
          {{else}}
            <div class="clearfix"></div>
            <p>{{i18n "directory.no_results"}}</p>
          {{/if}}
        {{/conditional-loading-spinner}}

      </div>
    </div>
  {{/load-more}}
{{/d-section}}