@if (plugin(); as plugin) {
  <div class="relative overflow-hidden rounded-xl border-[0.5px] shadow-sm hover:shadow-md hover:bg-components-card-bg">
    <div class="p-4 pb-3">
      <div class="absolute right-0 top-0 flex max-w-[45%] pl-[13px]">
        <svg
          width="13"
          height="18"
          viewBox="0 0 13 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="-mr-[1px] shrink-0 text-background-default-subtle"
        >
          <path d="M0 0H13V20C9.98017 20 7.26458 18.1615 6.14305 15.3576L0 0Z" fill="currentColor"></path>
        </svg>
        <div
          class="h-[18px] truncate rounded-tr-xl bg-background-default-subtle pr-2 text-xs font-semibold font-body uppercase leading-5 text-text-tertiary"
        >
          {{ 'PAC.Plugin.Category_' + plugin.category | translate: { Default: plugin.category } }}
        </div>
      </div>
      <div class="flex">
        <div class="relative flex">
          <xp-icon
            [icon]="plugin.icon"
            size="32"
            class="flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl"
          />
          @if (installed()) {
            <div
              class="flex justify-center items-center gap-2 absolute bottom-[-4px] right-[-4px] w-[18px] h-[18px] rounded-full border-2 border-solid border-components-panel-bg bg-components-panel-bg"
            >
              <i class="ri-checkbox-circle-fill text-lg text-text-success"></i>
            </div>
          }
        </div>

        <div class="ml-3 w-0 grow pr-2">
          <div class="flex h-5 items-start">
            <button
              type="button"
              class="system-md-semibold min-w-0 truncate text-left text-text-secondary transition-colors hover:text-primary-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
              [class.line-through]="plugin.deprecated"
              [class.decoration-2]="plugin.deprecated"
              [class.decoration-current]="plugin.deprecated"
              (click)="pluginNameClick.emit($event)"
            >
              {{ plugin.displayName | i18n }}
            </button>
            @if (plugin.deprecated) {
              <i
                class="ri-alert-line ml-1 shrink-0 text-text-warning"
                [zTooltip]="
                  plugin.deprecationMessage
                    ? (plugin.deprecationMessage | i18n)
                    : ('PAC.Plugin.DeprecatedPlugin'
                      | translate
                        : {
                            Default:
                              'This plugin is deprecated. Use the built-in feature or a replacement plugin instead.'
                          })
                "
                zPosition="top"
              ></i>
            }
            <div class="flex shrink-0 items-center justify-center text-text-success ml-1">
              <i class="ri-verified-badge-fill"></i>
            </div>
            <ng-content select="[version]"></ng-content>
          </div>
          <div class="flex h-4 items-center space-x-0.5 mt-0.5">
            <a
              [href]="plugin.author.url"
              target="_blank"
              class="system-xs-regular shrink-0 hover:underline text-text-tertiary"
              >{{ plugin.author.name }}</a
            >
            <span class="system-xs-regular shrink-0 text-text-quaternary">/</span>
            <span class="system-xs-regular w-0 shrink-0 grow truncate text-text-tertiary">{{ plugin.name }}</span>
          </div>
        </div>
      </div>
      <div class="system-xs-regular text-text-tertiary line-clamp-2 mt-2 h-10">
        {{ plugin.description | i18n }}
      </div>

      <ng-content></ng-content>
    </div>
  </div>
}