{{#d-section pageClass="users"}}
  {{#load-more selector=".user-card-directory .user-card-container" action=(action "loadMore")}}
    <div class="container">
      <div class='directory'>
        {{plugin-outlet name="users-top" connectorTagName='div' args=(hash model=model)}}
        
        <div class="filters">
          {{period-chooser period=period onChange=(action (mut period))}}
        </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>

        {{#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}}