<!-- template -->
<div ng-class="{ 'blocklist-item--selected': $ctrl.model.Selected }" class="blocklist-item template-item !mr-0 !my-0" ng-click="$ctrl.onSelect($ctrl.model)">
  <div class="blocklist-item-box">
    <!-- template-image -->
    <div class="vertical-center justify-center min-w-[56px]">
      <fallback-image
        src="$ctrl.model.Logo"
        fallback-icon="'svg-rocket'"
        class-name="'blocklist-item-logo'"
        fallback-class-name="'!h-14 !w-14 [&>*]:!h-8 [&>*]:!w-auto icon-nested-blue'"
        fallback-mode="'primary'"
      ></fallback-image>
    </div>
    <!-- !template-image -->
    <!-- template-details -->
    <div class="col-sm-12 template-item-details">
      <!-- blocklist-item-line1 -->
      <div class="blocklist-item-line gap-2">
        <span class="blocklist-item-title">
          {{ $ctrl.model.Title }}
        </span>
        <div class="inline-flex items-center space-left blocklist-item-subtitle">
          <div ng-if="$ctrl.model.Type != 3" class="vertical-center">
            <i class="fab fa-linux space-right" aria-hidden="true" ng-if="$ctrl.model.Platform === 1 || $ctrl.model.Platform === 'linux' || !$ctrl.model.Platform"></i>
            <span ng-if="!$ctrl.model.Platform"> &amp; </span>
            <pr-icon
              icon="'svg-microsoft'"
              ng-if="$ctrl.model.Platform === 2 || $ctrl.model.Platform === 'windows' || !$ctrl.model.Platform"
              class-name="'[&>*]:flex [&>*]:items-center'"
              size="'lg'"
            ></pr-icon>
          </div>
          <div ng-if="$ctrl.model.Type === 3" class="vertical-center">
            <pr-icon icon="'svg-kubernetes'" size="'lg'" class="align-bottom" class-name="'[&>*]:flex [&>*]:items-center'"></pr-icon>
          </div>
          {{ $ctrl.typeLabel }}
        </div>
      </div>
      <!-- !blocklist-item-line1 -->
      <span class="blocklist-item-actions" ng-transclude="actions"></span>
      <!-- blocklist-item-line2 -->
      <div class="blocklist-item-line template-item-details-sub">
        <span class="blocklist-item-desc">
          {{ $ctrl.model.Description }}
        </span>
        <span class="small text-muted" ng-if="$ctrl.model.Categories.length > 0">
          {{ $ctrl.model.Categories.join(', ') }}
        </span>
      </div>
      <!-- !blocklist-item-line2 -->
    </div>
    <!-- !template-details -->
  </div>
  <!-- !template -->
</div>
