<!-- helm chart -->
<div ng-class="{ 'blocklist-item--selected': $ctrl.model.Selected }" class="blocklist-item template-item mx-[10px]" ng-click="$ctrl.onSelect($ctrl.model)">
  <div class="blocklist-item-box">
    <!-- helmchart-image -->
    <span ng-if="$ctrl.model.icon">
      <fallback-image
        src="$ctrl.model.icon"
        fallback-icon="'svg-helm'"
        class-name="'blocklist-item-logo h-16 w-auto'"
        fallback-class-name="'icon-nested-blue !h-12 !w-12 [&>*]:!h-8 [&>*]:!w-auto'"
        fallback-mode="'primary'"
        size="'xl'"
      ></fallback-image>
    </span>

    <div class="widget-icon space-right" ng-if="!$ctrl.model.icon">
      <pr-icon icon="'svg-helm'"></pr-icon>
    </div>

    <!-- !helmchart-image -->
    <!-- helmchart-details -->
    <div class="col-sm-12 helm-template-item-details">
      <!-- blocklist-item-line1 -->
      <div class="blocklist-item-line">
        <span>
          <span class="blocklist-item-title">
            {{ $ctrl.model.name }}
          </span>
          <span class="space-left blocklist-item-subtitle">
            <span class="vertical-center">
              <pr-icon icon="'svg-helm'" mode="'primary'"></pr-icon>
            </span>
            <span> Helm </span>
          </span>
        </span>
      </div>
      <!-- !blocklist-item-line1 -->
      <span class="blocklist-item-actions" ng-transclude="actions"></span>
      <!-- blocklist-item-line2 -->
      <div class="blocklist-item-line helm-template-item-details-sub">
        <span class="blocklist-item-desc">
          {{ $ctrl.model.description }}
        </span>
        <span class="small text-muted" ng-if="$ctrl.model.annotations.category">
          {{ $ctrl.model.annotations.category }}
        </span>
      </div>
      <!-- !blocklist-item-line2 -->
    </div>
    <!-- !helmchart-details -->
  </div>
  <!-- !helm chart -->
</div>
