{{#d-section pageClass="users"}}
  {{#load-more selector=".user-card-directory .user-card-container" action=(action "loadMore")}}
    <div class="container">
      <div class="users-directory directory">
        {{plugin-outlet name="users-top" connectorTagName='div' args=(hash model=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="filters">            
            <span class="group-filter {{if group "active"}}">
              {{combo-box content=availableGroups
                        value=group
                        options=(hash clearable=true none=(theme-prefix 'filter_by_group'))
                        valueAttribute="value"}}
            </span>
            <span class="username-filter">
              {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name no-blur"}}
            </span>
          </div>
        </div>

        {{#conditional-loading-spinner condition=model.loading}}
          {{#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
                  }}
                <div class='user-card-directory-footer'>
                  {{#each stats as |stat|}}
                    <span class="stat stat-{{stat.name}}">
                      <span class="value">
                        {{number (get userCard.directoryItem stat.name)}}
                      </span>
                      <span class="label">
                        {{table-header-toggle field=stat.name order=order asc=asc icon=stat.icon tagName="span"}}
                      </span>
                    </span>
                  {{/each}}
                </div>
              </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}}