{{#if showHeader}}
  <section class="header clearfix">
    <div class="pull-left">
      <h1>
        {{t (if istio "catalogPage.istio.header" "catalogPage.index.header")}}
      </h1>
    </div>

    <div class="right-buttons">
      <div class="search-group input-group pull-right ml-20">
        {{input
          value=search
          type="search"
          class="input-sm pull-right"
          placeholder=(t "generic.search")
        }}
        {{#if search}}
          <span class="input-group-btn">
            <button class="btn bg-transparent text-info pl-10 pr-10" {{action "clearSearch"}}>
              <i class="icon icon-close"/>
            </button>
          </span>
        {{/if}}
      </div>

      <div class="dropdown filter-group pull-right ml-20">
        {{#basic-dropdown
           horizontalPosition="right"
           verticalPosition="below"
           as |dd|
        }}
          {{#dd.trigger
             class="btn bg-default btn-md pt-5 pb-5 "
          }}
            <i class="icon icon-chevron-down pull-right ml-10"></i>
            <span class="text-capitalize">
              {{#if (eq category "")}}
                {{t "catalogPage.index.allCategories"}}
              {{else}}
                {{category}}
              {{/if}}
            </span>
          {{/dd.trigger}}

          {{#dd.content
             class="text-right"
          }}
            <li class="text-capitalize {{if (eq category "") "active"}}">
              <a href="#" {{action "filterCatalog" "" dd}}>
                {{t "catalogPage.index.allCategories"}} ({{matchingSearch.length}})
              </a>
            </li>
            {{#each categories as |opt|}}
              <li class="{{if (eq category opt.category) "active"}}">
                <a href="#" {{action "filterCatalog" opt.category dd}}>
                  <div class="text-capitalize">{{opt.name}} ({{opt.count}})</div>
                </a>
              </li>
            {{/each}}
          {{/dd.content}}

        {{/basic-dropdown}}

      </div>

      <div class="pull-right">
        <button
          type="button"
          class="btn bg-primary icon-btn"
          disabled={{eq updating "yes"}}
          {{action "update"}}
        >
          {{#if (eq updating "yes")}}
            <span class="darken"><i class="icon icon-spinner icon-spin"></i></span>
          {{else}}
            {{#if (eq updating "error")}}
              <span class="darken"><i class="icon icon-spinner icon-alert"></i></span>
            {{else}}
              <span class="darken"><i class="icon icon-refresh"></i></span>
            {{/if}}
          {{/if}}
          <span>{{t "catalogPage.index.refreshBtn"}}</span>
        </button>
      </div>
    </div>
  </section>
{{/if}}

{{#if scope.currentCluster.isWindows}}
  {{banner-message
    icon="icon-info"
    color="bg-warning mb-0 mt-10"
    message=(t "catalogPage.index.windowsWarning" htmlSafe=true)
  }}
{{/if}}

{{#each groupedContent as |group|}}
  <div class="catalog-group">
    <div class="clearfix">
      <button class="btn btn-sm bg-transparent mt-10 pull-right" {{action "toggleCollapse" group}}>
        {{t (if group.collapsed 'generic.expand' 'generic.collapse')}}
      </button>
      <p>{{group.name}}</p>
    </div>
    {{#if (not group.collapsed) }}
      <div class="clearfix">
        {{#each group.items as |catalogItem|}}
          {{catalog-box
            model=catalogItem
            launchAction=(action launch)
          }}
        {{else}}
          <div class="text-muted mt-20">
            {{t "catalogPage.index.noData.singular"}}
          </div>
        {{/each}}
      </div>
    {{/if}}
  </div>
{{else}}
  <div class="text-muted mt-20">
    {{t "catalogPage.index.noData.plural"}}
  </div>
{{/each}}
