portainer/portainer

<section class="datatable" aria-label="Helm charts">
  <div class="toolBar vertical-center relative w-full flex-wrap !gap-x-5 !gap-y-1 !px-0">
    <div class="toolBarTitle vertical-center"> {{ $ctrl.titleText }} </div>

    <div class="searchBar vertical-center !mr-0">
      <pr-icon icon="'search'" class="searchIcon"></pr-icon>
      <input
        type="text"
        data-cy="helm-templates-search"
        class="searchInput"
        ng-model="$ctrl.state.textFilter"
        placeholder="Search..."
        auto-focus
        ng-model-options="{ debounce: 300 }"
        aria-label="Search input"
      />
    </div>
    <div class="w-1/5">
      <por-select
        placeholder="'Select a category'"
        value="$ctrl.state.selectedCategory"
        options="$ctrl.state.categories"
        on-change="($ctrl.onCategoryChange)"
        is-clearable="true"
        bind-to-body="true"
      ></por-select>
    </div>
  </div>
  <div class="w-full">
    <div class="small text-muted mb-2"
      >Select the Helm chart to use. Bring further Helm charts into your selection list via
      <a ui-sref="portainer.account({'#': 'helm-repositories'})">User settings - Helm repositories</a>.</div
    >
    <beta-alert
      is-html="true"
      message="'Beta feature - so far, this functionality has been tested in limited scenarios. For more information, see this <a href=\'https://www.portainer.io/blog/portainer-now-with-helm-support\' target=\'_blank\' class=\'hyperlink\'>blog post on Portainer Helm support</a>.'"
    ></beta-alert>
  </div>

  <div class="blocklist !px-0" role="list">
    <helm-templates-list-item
      ng-repeat="chart in allCharts = ($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="!allCharts.length" class="text-muted small mt-4"> No Helm charts found </div>
    <div ng-if="$ctrl.loading" class="text-muted text-center">
      Loading...
      <div class="text-muted text-center"> Initial download of Helm charts can take a few minutes </div>
    </div>
    <div ng-if="!$ctrl.loading && $ctrl.charts.length === 0" class="text-muted text-center"> No helm charts available. </div>
  </div>
</section>