<main class="min-h-screen bg-background p-6 text-foreground">
  <a
    routerLink="/dashboard"
    class="text-sm text-muted-foreground hover:text-foreground"
    >{{ 'plugins.pageHost.back' | translate }}</a
  >
  @if (page(); as pageRecord) {
    <section class="mx-auto mt-6 max-w-5xl">
      <p class="text-xs uppercase tracking-[0.18em] text-muted-foreground">{{ pageRecord.pluginId }}</p>
      <h1 class="mt-1 text-2xl font-semibold">{{ pageRecord.contribution.label }}</h1>
      <div class="mt-6 rounded-lg border border-border bg-card p-4">
        <app-plugin-render-host [render]="pageRecord.contribution.render" />
      </div>
    </section>
  } @else {
    <section class="mx-auto mt-6 max-w-2xl rounded-lg border border-border bg-card p-8 text-center">
      <h1 class="text-xl font-semibold">{{ 'plugins.pageHost.unavailableTitle' | translate }}</h1>
      <p class="mt-2 text-sm text-muted-foreground">{{ 'plugins.pageHost.unavailableBody' | translate }}</p>
    </section>
  }
</main>
