hummingbird-me/kitsu-web

<div class="card">
  <div class="group-result-header">
    <span class="result-filter-wrapper">
      {{search-input
        text=query
        update=(action "updateQueryParam" "query")
        placeholder=(t "group-list.filter")}}
    </span>

    <span class="result-sort-wrapper">
      {{#bootstrap/bs-dropdown as |dropdown|}}
        {{#dropdown.button type="button--dark-outline" class="button--small"}}
          {{t activeSort.value}}
        {{/dropdown.button}}
        {{#dropdown.menu}}
          {{#each sortOptions as |filter|}}
            {{#dropdown.menu-item onClick=(action "updateQueryParam" "sort" filter.key)}}
              {{t filter.value}}
              {{#if (eq sort filter.key)}}
                <span class="dropdown-checkmark">
                  {{svg-jar "checkmark"}}
                </span>
              {{/if}}
            {{/dropdown.menu-item}}
          {{/each}}
        {{/dropdown.menu}}
      {{/bootstrap/bs-dropdown}}
    </span>
  </div>

  <ul class="group-results">
    {{#if isLoading}}
      <div class="text-xs-center w-100 m-t-2 m-b-2">
        {{loading-spinner size="large"}}
      </div>
    {{else if groups}}
      {{#infinite-pagination onPagination=(action "onPagination")}}
        {{#each groups as |group|}}
          {{groups/group-result group=group categoryRoute=categoryRoute tagName="li"}}
        {{/each}}
      {{/infinite-pagination}}
    {{else}}
      <div class="text-xs-center m-t-1 m-b-1">
        <p>{{t "errors.contentEmpty"}}</p>
      </div>
    {{/if}}
  </ul>
</div>