@if (plugin(); as plugin) {
  <div class="relative grid max-h-[88vh] w-[min(920px,calc(100vw-2rem))] grid-rows-[auto_minmax(0,1fr)]">
    <button
      z-button
      type="button"
      zType="ghost"
      zSize="icon"
      zShape="circle"
      class="absolute right-4 top-4 z-10"
      (click)="close()"
    >
      <i class="ri-close-line"></i>
    </button>

    <header class="border-b border-divider-regular px-6 pt-5 pr-14 pb-2">
      <div class="flex items-start gap-4">
        <xp-icon
          [icon]="plugin.icon"
          size="40"
          class="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-divider-regular bg-components-panel-bg"
        />
        <div class="min-w-0">
          <div class="flex flex-wrap items-center gap-2">
            <h2 class="truncate text-2xl font-semibold text-text-primary">
              {{ plugin.displayName | i18n }}
            </h2>
            @if (plugin.version) {
              <z-badge class="font-mono">v{{ plugin.version }}</z-badge>
            }
            @if (plugin.sourceName) {
              <z-badge zType="secondary">
                @if (plugin.sourceNameI18nKey) {
                  {{ plugin.sourceNameI18nKey | translate: { Default: plugin.sourceName } }}
                } @else {
                  {{ plugin.sourceName }}
                }
              </z-badge>
            }
          </div>
          <p class="mt-2 max-w-3xl text-sm text-text-tertiary">
            {{ plugin.description | i18n }}
          </p>
          @if (plugin.artifactNamespace) {
            <div class="mt-3 flex flex-wrap items-center gap-2 text-xs text-text-tertiary">
              <span>
                {{ 'XP.Plugin.ArtifactNamespace' | translate: { Default: 'Artifact namespace' } }}
              </span>
              <z-badge zType="outline" class="font-mono">
                {{ plugin.artifactNamespace }}
              </z-badge>
            </div>
          }
        </div>
      </div>
    </header>

    <div class="min-h-0 overflow-auto px-6 py-5">
      @if (showActions && trialCardBackgroundImage(); as backgroundImage) {
        <section class="mb-6">
          <div
            class="plugin-trial-card relative flex min-h-56 items-center justify-center overflow-hidden rounded-2xl border border-divider-regular bg-cover bg-center px-5 py-7"
            [style.background-image]="backgroundImage"
          >
            <div class="absolute inset-0 bg-components-card-bg/20"></div>

            @if (trialShortcuts().length) {
              <div class="relative z-[1] flex w-full max-w-xl flex-col gap-3">
                @for (shortcut of trialShortcuts(); track shortcut.id) {
                  <button
                    type="button"
                    class="group flex min-h-12 w-full items-center gap-2 rounded-2xl bg-components-card-bg/85 px-4 py-2.5 text-left shadow-sm ring-1 ring-divider-regular backdrop-blur-sm transition hover:bg-components-card-bg hover:shadow-md disabled:cursor-not-allowed disabled:opacity-70"
                    [disabled]="trialSubmitting()"
                    [title]="shortcut.prompt"
                    (click)="tryShortcut(shortcut, $event)"
                  >
                    <xp-icon
                      [icon]="shortcut.icon"
                      size="20"
                      class="flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-md"
                    />
                    <span class="min-w-0 grow text-sm">
                      <span class="font-semibold text-primary" [style.color]="shortcut.color || null">{{
                        shortcut.skillLabel
                      }}</span>
                      <span class="ml-2 text-text-primary">{{ shortcut.labelValue | i18n }}</span>
                    </span>
                    <span
                      class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-components-panel-bg text-text-secondary transition group-hover:bg-hover-bg group-hover:text-text-primary"
                    >
                      @if (activeTrialShortcutId() === shortcut.id) {
                        <xp-spin small />
                      } @else {
                        <i class="ri-arrow-right-line"></i>
                      }
                    </span>
                  </button>
                }
              </div>
            }
          </div>
        </section>
      }

      <section>
        <div class="flex items-center justify-between">
          <h3 class="text-base font-semibold text-text-primary">
            {{ 'XP.Plugin.IncludedContent' | translate: { Default: 'Included content' } }}
          </h3>
          <span class="text-xs text-text-tertiary">
            {{ contents().length }}
          </span>
        </div>

        @if (contents().length) {
          <div
            class="mt-3 divide-y divide-divider-regular overflow-hidden rounded-2xl border border-divider-regular bg-background-default-subtle"
          >
            @for (content of contents(); track content.type + ':' + content.name) {
              <div
                class="flex w-full items-start gap-3 px-4 py-3 text-left transition hover:bg-hover-bg"
                [class.cursor-pointer]="plugin.installed && content.type === 'skill' && !!resourceContribution(content)"
                [attr.role]="
                  plugin.installed && content.type === 'skill' && resourceContribution(content) ? 'button' : null
                "
                [attr.tabindex]="
                  plugin.installed && content.type === 'skill' && resourceContribution(content) ? 0 : null
                "
                (click)="openContentDetail(content, $event)"
                (keydown.enter)="openContentDetail(content, $event)"
              >
                <span
                  class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-divider-regular bg-components-panel-bg text-text-secondary"
                >
                  <i [class]="contentTypeIcon(content.type)"></i>
                </span>
                <span class="min-w-0 grow">
                  <span class="flex flex-wrap items-center gap-2">
                    <span class="font-medium text-text-primary">
                      {{ content.displayName || content.name | i18n }}
                    </span>
                    <z-badge zType="outline" [class]="contentTypeBadgeClass(content.type)">
                      {{ 'XP.Plugin.MarketplaceContentType_' + content.type | translate: { Default: content.type } }}
                    </z-badge>
                  </span>
                  @if (content.description) {
                    <span class="mt-1 block text-sm text-text-tertiary">
                      {{ content.description | i18n }}
                    </span>
                  }
                </span>
                @if (showActions && resourceContribution(content); as resource) {
                  <span
                    class="ml-3 mt-0.5 shrink-0"
                    [title]="
                      plugin.installed
                        ? ''
                        : ('XP.Plugin.InstallPluginBeforeInitializeResource'
                          | translate: { Default: 'Install or load this plugin before initializing the resource.' })
                    "
                  >
                    @if (resource.type === 'skill') {
                      <button
                        z-button
                        type="button"
                        zType="secondary"
                        zSize="sm"
                        class="gap-1 whitespace-nowrap"
                        [zDisabled]="!plugin.installed"
                        (click)="initializeResource(resource, $event)"
                      >
                        <i class="ri-apps-2-add-line"></i>
                        <span>
                          {{ 'XP.Plugin.InstallResource' | translate: { Default: 'Install' } }}
                        </span>
                      </button>
                    } @else {
                      <button
                        z-button
                        type="button"
                        zType="secondary"
                        zSize="sm"
                        class="gap-1 whitespace-nowrap"
                        [zDisabled]="!plugin.installed"
                        (click)="initializeResource(resource, $event)"
                      >
                        <i class="ri-apps-2-add-line"></i>
                        <span>
                          {{ 'XP.Plugin.InstallResource' | translate: { Default: 'Install' } }}
                        </span>
                      </button>
                    }
                  </span>
                } @else if (showActions && isAssistantTemplate(content)) {
                  <span
                    class="ml-3 mt-0.5 shrink-0"
                    [title]="
                      plugin.installed
                        ? ''
                        : ('XP.Plugin.InstallPluginBeforeInitialize'
                          | translate: { Default: 'Install or load this plugin before initializing the assistant.' })
                    "
                  >
                    <button
                      z-button
                      type="button"
                      zType="secondary"
                      zSize="sm"
                      class="gap-1 whitespace-nowrap"
                      [zDisabled]="!plugin.installed"
                      (click)="initializeAssistantTemplate(content, $event)"
                    >
                      <i class="ri-play-circle-line"></i>
                      <span>
                        {{ 'XP.Plugin.InitializeAssistantTemplate' | translate: { Default: 'Initialize' } }}
                      </span>
                    </button>
                  </span>
                }
              </div>
            }
          </div>
        } @else {
          <div class="mt-3 rounded-2xl border border-divider-regular px-4 py-6 text-center text-sm text-text-tertiary">
            {{
              'XP.Plugin.NoExecutableContent'
                | translate: { Default: 'No assistant templates or installable resources were declared.' }
            }}
          </div>
        }
      </section>

      @if (appContents().length || mcpContents().length) {
        <div data-testid="plugin-primary-sections" class="mt-6 grid gap-6">
          @if (appContents().length) {
            <section>
              <div class="flex items-center justify-between">
                <h3 class="text-base font-semibold text-text-primary">
                  {{ 'XP.Plugin.Applications' | translate: { Default: 'Applications' } }}
                </h3>
                <span class="text-xs text-text-tertiary">
                  {{ appContents().length }}
                </span>
              </div>

              <div
                class="mt-3 divide-y divide-divider-regular overflow-hidden rounded-2xl border border-divider-regular bg-background-default-subtle"
              >
                @for (app of appContents(); track app.type + ':' + app.name) {
                  <div
                    class="flex w-full cursor-pointer items-start gap-3 px-4 py-3 text-left transition hover:bg-hover-bg"
                    [class.bg-components-input-bg-normal]="selectedApp()?.name === app.name"
                    role="button"
                    tabindex="0"
                    (click)="selectApp(app)"
                    (keydown.enter)="selectApp(app)"
                  >
                    <span
                      class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-divider-regular bg-components-panel-bg text-text-secondary"
                    >
                      <i [class]="contentTypeIcon(app.type)"></i>
                    </span>
                    <span class="min-w-0 grow">
                      <span class="flex flex-wrap items-center gap-2">
                        <span class="font-medium text-text-primary">
                          {{ app.displayName || app.name | i18n }}
                        </span>
                        <z-badge zType="outline" [class]="contentTypeBadgeClass(app.type)">
                          {{ 'XP.Plugin.MarketplaceContentType_app' | translate: { Default: 'App' } }}
                        </z-badge>
                        @if (appCapabilities(app).length) {
                          <z-badge zType="secondary">
                            {{
                              'XP.Plugin.CapabilityCount'
                                | translate
                                  : {
                                      Default: appCapabilities(app).length + ' capabilities',
                                      count: appCapabilities(app).length
                                    }
                            }}
                          </z-badge>
                        }
                      </span>
                      @if (app.description) {
                        <span class="mt-1 block text-sm text-text-tertiary">
                          {{ app.description | i18n }}
                        </span>
                      }
                    </span>
                    @if (showActions && appSetupAction(app); as action) {
                      <span
                        class="ml-3 mt-0.5 shrink-0"
                        [title]="
                          appActionRequiresInstalledPlugin(action) && !plugin.installed
                            ? ('XP.Plugin.InstallPluginBeforeUseApp'
                              | translate: { Default: 'Install or load this plugin before using the app.' })
                            : ''
                        "
                      >
                        <button
                          z-button
                          type="button"
                          zType="secondary"
                          zSize="sm"
                          class="gap-1 whitespace-nowrap"
                          [zDisabled]="appActionRequiresInstalledPlugin(action) && !plugin.installed"
                          (click)="handleAppAction(app, $event)"
                        >
                          @switch (action.type) {
                            @case ('install-app') {
                              <i class="ri-apps-2-add-line"></i>
                              <span>{{ 'XP.Plugin.InstallApp' | translate: { Default: 'Install app' } }}</span>
                            }
                            @case ('initialize-template') {
                              <i class="ri-play-circle-line"></i>
                              <span>{{
                                'XP.Plugin.InitializeAssistantTemplate' | translate: { Default: 'Initialize' }
                              }}</span>
                            }
                            @case ('select-template') {
                              <i class="ri-list-check-2"></i>
                              <span>{{ 'XP.Plugin.ChooseTemplate' | translate: { Default: 'Choose template' } }}</span>
                            }
                            @default {
                              <i class="ri-arrow-right-s-line"></i>
                              <span>{{ 'XP.Plugin.ViewDetails' | translate: { Default: 'View details' } }}</span>
                            }
                          }
                        </button>
                      </span>
                    }
                  </div>
                }
              </div>
            </section>
          }

          @if (mcpContents().length) {
            <section>
              <div class="flex items-center justify-between">
                <h3 class="text-base font-semibold text-text-primary">
                  {{ 'XP.Plugin.McpCapabilities' | translate: { Default: 'MCP' } }}
                </h3>
                <span class="text-xs text-text-tertiary">
                  {{ mcpContents().length }}
                </span>
              </div>

              <div
                class="mt-3 divide-y divide-divider-regular overflow-hidden rounded-2xl border border-divider-regular bg-background-default-subtle"
              >
                @for (mcp of mcpContents(); track mcp.type + ':' + mcp.name) {
                  <div class="w-full px-4 py-3 text-left transition hover:bg-hover-bg">
                    <div class="flex items-start gap-3">
                      <span
                        class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-divider-regular bg-components-panel-bg text-text-secondary"
                      >
                        <i [class]="contentTypeIcon(mcp.type)"></i>
                      </span>
                      <span class="min-w-0 grow">
                        <span class="flex flex-wrap items-center gap-2">
                          <span class="font-medium text-text-primary">
                            {{ mcp.displayName || mcp.name | i18n }}
                          </span>
                          <z-badge zType="outline" [class]="contentTypeBadgeClass(mcp.type)">
                            {{ 'XP.Plugin.MarketplaceContentType_mcp' | translate: { Default: 'MCP' } }}
                          </z-badge>
                        </span>
                        @if (mcp.description) {
                          <span class="mt-1 block text-sm text-text-tertiary">
                            {{ mcp.description | i18n }}
                          </span>
                        }
                      </span>
                      @if (showActions && !runtimeMcpComponent(mcp) && resourceContribution(mcp); as resource) {
                        <span
                          class="ml-3 mt-0.5 shrink-0"
                          [title]="
                            plugin.installed
                              ? ''
                              : ('XP.Plugin.InstallPluginBeforeInitializeResource'
                                | translate
                                  : { Default: 'Install or load this plugin before initializing the resource.' })
                          "
                        >
                          <button
                            z-button
                            type="button"
                            zType="secondary"
                            zSize="sm"
                            class="gap-1 whitespace-nowrap"
                            [zDisabled]="!plugin.installed"
                            (click)="initializeResource(resource, $event)"
                          >
                            <i class="ri-apps-2-add-line"></i>
                            <span>{{ 'XP.Plugin.InstallResource' | translate: { Default: 'Install' } }}</span>
                          </button>
                        </span>
                      }
                    </div>

                    @if (plugin.installed && runtimeMcpComponent(mcp); as component) {
                      @if (installedPluginName(); as pluginName) {
                        <xp-plugin-marketplace-mcp-provider
                          class="ml-12 block"
                          [pluginName]="pluginName"
                          [component]="component"
                          [showActions]="showActions"
                          [reload]="reload"
                        />
                      }
                    }
                  </div>
                }
              </div>
            </section>
          }
        </div>
      }

      @if (selectedApp(); as app) {
        <section class="mt-6">
          <div class="flex items-start justify-between gap-4">
            <div class="min-w-0">
              <h3 class="text-base font-semibold text-text-primary">
                {{ app.displayName || app.name | i18n }}
              </h3>
              <p class="mt-1 text-sm text-text-tertiary">
                {{ 'XP.Plugin.AppUsage' | translate: { Default: 'Usage' } }}
              </p>
            </div>
            <z-badge zType="secondary">
              {{
                'XP.Plugin.CapabilityCount'
                  | translate
                    : { Default: appCapabilities(app).length + ' capabilities', count: appCapabilities(app).length }
              }}
            </z-badge>
          </div>

          @if (app.description) {
            <p class="mt-3 text-sm text-text-tertiary">
              {{ app.description | i18n }}
            </p>
          }

          @if (appSetupAction(app); as action) {
            @if (action.type === 'details') {
              <div
                class="mt-4 rounded-2xl border border-divider-regular bg-background-default-subtle px-4 py-3 text-sm text-text-tertiary"
              >
                {{
                  'XP.Plugin.RuntimeAppNoInstallRequired'
                    | translate
                      : {
                          Default:
                            'This app is provided by plugin runtime capabilities and does not need a separate app installation.'
                        }
                }}
              </div>
            }
          }

          @if (appTemplates(app).length > 1) {
            <div class="mt-4">
              <h4 class="text-sm font-semibold text-text-primary">
                {{ 'XP.Plugin.AssistantTemplates' | translate: { Default: 'Assistant templates' } }}
              </h4>
              <div class="mt-2 grid gap-2 md:grid-cols-2">
                @for (template of appTemplates(app); track template.type + ':' + template.name) {
                  <div class="rounded-xl border border-divider-regular bg-background-default-subtle px-3 py-3">
                    <div class="flex items-start gap-3">
                      <span
                        class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-divider-regular bg-components-panel-bg text-text-secondary"
                      >
                        <i [class]="contentTypeIcon(template.type)"></i>
                      </span>
                      <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-center gap-2">
                          <span class="font-medium text-text-primary">
                            {{ template.displayName || template.name | i18n }}
                          </span>
                          <z-badge zType="outline" [class]="contentTypeBadgeClass(template.type)">
                            {{
                              'XP.Plugin.MarketplaceContentType_' + template.type
                                | translate: { Default: template.type }
                            }}
                          </z-badge>
                        </div>
                        @if (template.description) {
                          <p class="mt-1 text-sm text-text-tertiary">
                            {{ template.description | i18n }}
                          </p>
                        }
                        @if (showActions) {
                          <button
                            z-button
                            type="button"
                            zType="secondary"
                            zSize="sm"
                            class="mt-3 gap-1"
                            [zDisabled]="!plugin.installed"
                            (click)="initializeAssistantTemplate(template, $event)"
                          >
                            <i class="ri-play-circle-line"></i>
                            <span>{{
                              'XP.Plugin.InitializeAssistantTemplate' | translate: { Default: 'Initialize' }
                            }}</span>
                          </button>
                        }
                      </div>
                    </div>
                  </div>
                }
              </div>
            </div>
          }

          @if (appCapabilities(app); as capabilities) {
            @if (capabilities.length) {
              <div class="mt-4">
                <h4 class="text-sm font-semibold text-text-primary">
                  {{ 'XP.Plugin.AppCapabilities' | translate: { Default: 'Included capabilities' } }}
                </h4>
                <div class="mt-2 grid gap-2 md:grid-cols-2">
                  @for (capability of capabilities; track capability.type + ':' + capability.name) {
                    <div class="rounded-xl border border-divider-regular bg-background-default-subtle px-3 py-3">
                      <div class="flex items-start gap-3">
                        <span
                          class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-divider-regular bg-components-panel-bg text-text-secondary"
                        >
                          <i [class]="contentTypeIcon(capability.type)"></i>
                        </span>
                        <div class="min-w-0 flex-1">
                          <div class="flex flex-wrap items-center gap-2">
                            <span class="font-medium text-text-primary">
                              {{ capability.displayName || capability.name | i18n }}
                            </span>
                            <z-badge zType="outline" [class]="contentTypeBadgeClass(capability.type)">
                              {{
                                'XP.Plugin.MarketplaceContentType_' + capability.type
                                  | translate: { Default: capability.type }
                              }}
                            </z-badge>
                          </div>
                          @if (capability.description) {
                            <p class="mt-1 text-sm text-text-tertiary">
                              {{ capability.description | i18n }}
                            </p>
                          }
                        </div>
                      </div>
                    </div>
                  }
                </div>
              </div>
            } @else {
              <div
                class="mt-4 rounded-2xl border border-divider-regular bg-background-default-subtle px-4 py-6 text-center text-sm text-text-tertiary"
              >
                {{ 'XP.Plugin.NoAppCapabilities' | translate: { Default: 'No app capabilities were declared.' } }}
              </div>
            }
          }
        </section>
      }
    </div>
  </div>
}