<div class="uk-flex uk-flex-between">
  <div class="uk-button-group">
    {{#each this.categories as |category|}}
      <UkButton
        data-test-filter={{category.value}}
        @onClick={{fn @onUpdateCategory category.value}}
        @label={{category.label}}
        @color={{if (eq @category category.value) "primary"}}
      />
    {{/each}}
  </div>
  <div>
    <UkButton
      data-test-new-form
      @onClick={{optional @onNewForm}}
      @label={{t "caluma.form-builder.form.new"}}
    />
  </div>
</div>

<div class="uk-search uk-search-default uk-width-1-1 uk-margin-top">
  <span class="uk-search-icon-flip" uk-search-icon></span>
  <input
    data-test-form-search-input
    class="uk-search-input"
    type="search"
    placeholder="{{t 'caluma.form-builder.global.search'}}..."
    aria-label="{{t 'caluma.form-builder.global.search'}}"
    value={{@search}}
    {{on "input" this.search.perform}}
  />
</div>

{{#if this.formsQuery.value.length}}
  <ul data-test-form-list class="uk-list uk-list-divider uk-list-large">
    {{#each this.formsQuery.value key="id" as |item|}}
      <CfbFormList::Item
        data-test-form-list-item={{item.slug}}
        @item={{item}}
        @onEditForm={{@onEditForm}}
      />
    {{/each}}
    {{#if this.formsQuery.isLoading}}
      <li class="uk-text-center">
        <UkSpinner />
      </li>
    {{else if this.formsQuery.hasNextPage}}
      <li class="uk-text-center cfb-pointer">
        <a
          data-test-form-loader-button
          href="#"
          {{on "click" this.formsQuery.fetchMore}}
        >
          {{t "caluma.form-builder.form.loadMore"}}
        </a>
      </li>
    {{/if}}
  </ul>
{{else if this.formsQuery.isLoading}}
  <div class="uk-height-small uk-flex uk-flex-center uk-flex-middle">
    <UkSpinner @ratio={{2}} />
  </div>
{{else}}
  <div
    data-test-form-list-empty
    class="uk-padding-large uk-padding-remove-horizontal uk-text-center"
  >
    <UkIcon @icon="search" @ratio={{10}} />
    <p class="uk-text-muted">
      {{t "caluma.form-builder.form.empty"}}
    </p>
  </div>
{{/if}}