<div class="datatable">
  <rd-widget>
    <rd-widget-body classes="no-padding">
      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap w-full relative">
        <div class="toolBarTitle vertical-center">
          <div class="widget-icon space-right">
            <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
          </div>

          {{ $ctrl.titleText }}
        </div>

        <div class="searchBar vertical-center !mr-0">
          <pr-icon icon="'search'" feather="true" class="searchIcon"></pr-icon>
          <input
            type="text"
            class="searchInput"
            ng-model="$ctrl.state.textFilter"
            ng-change="$ctrl.onTextFilterChange()"
            placeholder="Search for a chart..."
            auto-focus
            ng-model-options="{ debounce: 300 }"
          />
        </div>
        <div>
          <ui-select ng-model="$ctrl.state.selectedCategory" theme="bootstrap" append-to-body="true">
            <ui-select-match placeholder="Select a category">
              <a class="btn btn-xs btn-link pull-right vertical-center" ng-click="$ctrl.clearCategory()">
                <pr-icon icon="'x'" feather="true"></pr-icon>
              </a>
              <span class="vertical-center">{{ $select.selected }}</span>
            </ui-select-match>
            <ui-select-choices repeat="category in ($ctrl.state.categories | filter: $select.search)">
              <span>{{ category }}</span>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>

      <div class="blocklist">
        <helm-templates-list-item
          ng-repeat="chart in $ctrl.charts | filter:$ctrl.state.textFilter | filter: $ctrl.state.selectedCategory "
          model="chart"
          type-label="helm"
          on-select="($ctrl.selectAction)"
        >
        </helm-templates-list-item>
        <div ng-if="$ctrl.loading" class="text-center text-muted">
          Loading...
          <div class="text-center text-muted"> Initial download of Helm Charts can take a few minutes </div>
        </div>
        <div ng-if="!$ctrl.loading && $ctrl.charts.length === 0" class="text-center text-muted"> No helm charts available. </div>
      </div>
    </rd-widget-body>
  </rd-widget>
</div>
