@if (!details()) {
  <span
    [attr.data-wiki-state]="state()"
    class="inline-flex items-center gap-1 whitespace-nowrap rounded-md bg-background-section-burn px-2 py-0.5 text-xs"
    [ngClass]="stateClass()"
  >
    @if (active()) {
      <z-icon zType="loader-circle" class="size-3 animate-spin" />
    } @else {
      <i class="ri-book-open-line" aria-hidden="true"></i>
    }
    {{ 'XP.Knowledgebase.Wiki.DocumentProgress.States.' + state() | translate }}
  </span>
} @else {
  <section class="mt-6 border-t border-border pt-5">
    <div class="flex items-center justify-between gap-3">
      <h2 class="text-base font-semibold text-text-primary">
        {{ 'XP.Knowledgebase.Wiki.DocumentProgress.Title' | translate }}
      </h2>
      <span class="text-xs" [ngClass]="stateClass()" [attr.data-wiki-state]="state()">
        {{ 'XP.Knowledgebase.Wiki.DocumentProgress.States.' + state() | translate }}
      </span>
    </div>
    @if (progress(); as value) {
      <z-stepper
        orientation="horizontal"
        [selectedIndex]="stageIndex()"
        class="mt-4 pointer-events-none [&_[role=tabpanel]]:hidden! [&_.z-stepper__trigger[data-state=completed]_.z-stepper__indicator]:border-text-success/30 [&_.z-stepper__trigger[data-state=completed]_.z-stepper__indicator]:bg-text-success [&_.z-stepper__trigger[data-state=completed]_.z-stepper__indicator]:text-primary-foreground"
      >
        @for (stage of stageKeys; track stage) {
          <z-step [completed]="value.stages[stage] === 'complete'">
            <ng-template zStepLabel>
              <span [ngClass]="stageClasses[value.stages[stage]]">
                @if (value.stages[stage] === 'running') {
                  <z-icon zType="loader-circle" zSize="sm" class="mr-1 inline-flex animate-spin" />
                }
                {{ 'XP.Knowledgebase.Wiki.DocumentProgress.Stages.' + stage | translate }}
              </span>
            </ng-template>
          </z-step>
        }
      </z-stepper>
      <div class="mt-3 grid grid-cols-3 gap-3">
        @for (stage of stageKeys; track stage) {
          <p
            class="text-center text-xs"
            [ngClass]="stageClasses[value.stages[stage]]"
            [attr.data-wiki-stage]="stage"
            [attr.data-state]="value.stages[stage]"
          >
            {{ 'XP.Knowledgebase.Wiki.DocumentProgress.StageStates.' + value.stages[stage] | translate }}
          </p>
        }
      </div>
      @if (value.state === 'not_started' || value.state === 'outdated' || value.state === 'no_content') {
        <p class="mt-3 text-xs text-text-tertiary">
          {{ 'XP.Knowledgebase.Wiki.DocumentProgress.Hints.' + value.state | translate }}
        </p>
      }
      @if (value.waitingForBatch) {
        <p class="mt-3 text-xs text-text-tertiary">
          {{ 'XP.Knowledgebase.Wiki.DocumentProgress.WaitingForBatch' | translate }}
        </p>
      }
      @if (value.state === 'failed') {
        <p class="mt-3 break-words text-xs text-text-destructive" role="alert">
          {{ failureKey() | translate }}
        </p>
        @if (value.error) {
          <div
            data-wiki-error-details
            class="mt-2 rounded-lg border border-divider-subtle bg-components-input-bg-normal p-3"
          >
            <p class="system-xs-semibold text-text-secondary">
              {{ 'XP.Knowledgebase.FailureReason' | translate }}
            </p>
            <pre class="mt-1 max-h-48 overflow-y-auto whitespace-pre-wrap break-words text-xs text-text-destructive">{{
              value.error
            }}</pre>
          </div>
        }
      }
      @if (value.canView || value.retry) {
        <div class="mt-4 flex flex-wrap items-center gap-2">
          @if (value.retry) {
            <button
              z-button
              zType="outline"
              zSize="sm"
              data-wiki-retry
              [zDisabled]="busy() || retriedJobId() === value.retry.jobId"
              (click)="retry()"
            >
              {{
                (retriedJobId() === value.retry.jobId
                  ? 'XP.Knowledgebase.Wiki.DocumentProgress.RetryQueued'
                  : 'XP.Knowledgebase.Wiki.DocumentProgress.Retry'
                ) | translate
              }}
            </button>
          }
          @if (value.canView) {
            <a
              z-button
              zType="outline"
              zSize="sm"
              [routerLink]="['/xpert/knowledges', knowledgebaseId(), 'wiki']"
              queryParamsHandling="preserve"
            >
              {{ 'XP.Knowledgebase.Wiki.DocumentProgress.ViewWiki' | translate }}
            </a>
          }
        </div>
      }
    }
  </section>
}