@if (!editing()) {
  <header class="flex flex-wrap items-start justify-between gap-4 py-6">
    <div>
      <h1 class="text-2xl font-semibold text-text-primary">{{ 'XP.PromptWorkflow.LibraryTitle' | translate }}</h1>
      <p class="mt-2 text-sm text-text-tertiary">{{ 'XP.PromptWorkflow.LibraryDescription' | translate }}</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <button z-button zType="outline" [disabled]="loading()" (click)="refresh()">
        <z-icon zType="refresh" />{{ 'XP.PromptWorkflow.Refresh' | translate }}
      </button>
      @if (canWriteWorkspace()) {
        <button z-button zType="outline" (click)="openPanel('templates')">
          {{ 'XP.PromptWorkflow.FromTemplate' | translate }}
        </button>
        <button z-button (click)="edit()">
          <z-icon zType="plus" />{{ 'XP.PromptWorkflow.NewPrompt' | translate }}
        </button>
      }
    </div>
  </header>
  <div class="mb-4 flex flex-wrap items-center gap-3">
    <z-select
      class="w-52"
      [ngModel]="expertFilter()"
      (ngModelChange)="expertFilter.set($event)"
      [attr.aria-label]="'XP.PromptWorkflow.Scope' | translate"
    >
      <z-select-item zValue="all">{{ 'XP.PromptWorkflow.AllScopes' | translate }}</z-select-item>
      <z-select-item zValue="shared">{{ 'XP.PromptWorkflow.WorkspaceShared' | translate }}</z-select-item>
      @for (expert of experts(); track expert.id) {
        <z-select-item [zValue]="expert.id">{{ expert.title || expert.name }}</z-select-item>
      }
    </z-select>
    <z-select
      class="w-44"
      [ngModel]="sort()"
      (ngModelChange)="sort.set($event)"
      [attr.aria-label]="'XP.PromptWorkflow.Sort' | translate"
    >
      <z-select-item zValue="updated">{{ 'XP.PromptWorkflow.SortUpdated' | translate }}</z-select-item>
      <z-select-item zValue="name">{{ 'XP.PromptWorkflow.SortName' | translate }}</z-select-item>
    </z-select>
    <span class="ml-auto text-sm text-text-tertiary">{{
      'XP.PromptWorkflow.ResultCount' | translate: { count: filteredWorkflows().length }
    }}</span>
  </div>
  @if (loadError()) {
    <div role="alert" class="rounded-lg border border-divider-regular p-6">
      <p class="text-text-destructive">{{ loadError() }}</p>
      <button z-button zType="outline" class="mt-4" (click)="refresh()">
        {{ 'XP.PromptWorkflow.Retry' | translate }}
      </button>
    </div>
  } @else if (loading()) {
    <div
      role="status"
      [attr.aria-label]="'XP.PromptWorkflow.Loading' | translate"
      class="space-y-4 rounded-lg border border-divider-regular p-6"
    >
      @for (row of [1, 2, 3, 4]; track row) {
        <div class="h-12 animate-pulse rounded-md bg-hover-bg"></div>
      }
    </div>
  } @else if (!filteredWorkflows().length) {
    <div
      class="flex flex-col items-center gap-3 rounded-lg border border-dashed border-divider-regular px-6 py-16 text-center"
    >
      <z-icon zType="message-square" class="size-8 text-text-tertiary" />
      <h2 class="text-lg font-medium">
        {{
          (activeWorkflows().length ? 'XP.PromptWorkflow.NoMatches' : 'XP.PromptWorkflow.LibraryEmptyTitle') | translate
        }}
      </h2>
      <p class="text-sm text-text-tertiary">
        {{ (activeWorkflows().length ? 'XP.PromptWorkflow.NoMatchesHelp' : 'XP.PromptWorkflow.EmptyHelp') | translate }}
      </p>
      @if (activeWorkflows().length) {
        <button z-button zType="outline" (click)="clearFilters()">
          {{ 'XP.PromptWorkflow.ClearFilters' | translate }}
        </button>
      } @else if (canWriteWorkspace()) {
        <button z-button (click)="edit()">{{ 'XP.PromptWorkflow.NewPrompt' | translate }}</button>
      }
    </div>
  } @else {
    <div class="overflow-x-auto rounded-lg border border-divider-regular">
      <table z-table>
        <thead z-table-header>
          <tr z-table-row>
            <th z-table-head class="min-w-64">{{ 'XP.PromptWorkflow.DisplayName' | translate }}</th>
            <th z-table-head class="min-w-40">{{ 'XP.PromptWorkflow.OrganizationTags' | translate }}</th>
            <th z-table-head class="min-w-48">{{ 'XP.PromptWorkflow.Scope' | translate }}</th>
            <th z-table-head class="whitespace-nowrap">{{ 'XP.PromptWorkflow.UpdatedAt' | translate }}</th>
            <th z-table-head>
              <span class="sr-only">{{ 'XP.PromptWorkflow.Actions' | translate }}</span>
            </th>
          </tr>
        </thead>
        <tbody z-table-body>
          @for (workflow of filteredWorkflows(); track workflow.id) {
            <tr z-table-row>
              <td z-table-cell class="max-w-sm">
                <button
                  type="button"
                  class="text-left font-medium text-text-primary hover:underline"
                  (click)="edit(workflow)"
                >
                  {{ workflow.label || workflow.name }}
                </button>
                <p class="mt-1 truncate text-sm text-text-tertiary">{{ workflow.description }}</p>
                <p class="mt-1 font-mono text-xs text-text-tertiary">/{{ workflow.name }}</p>
              </td>
              <td z-table-cell>
                <div class="flex max-w-64 flex-wrap gap-1">
                  @for (tag of workflow.organizationTags; track tag.id) {
                    <z-badge zType="secondary">{{ tag.name }}</z-badge>
                  }
                  @if (!workflow.organizationTags?.length) {
                    <span class="text-text-tertiary">—</span>
                  }
                </div>
              </td>
              <td z-table-cell>
                @if (workflow.associatedXpertIds?.length) {
                  @let names = expertNames(workflow);
                  <span
                    class="block max-w-64 truncate text-sm text-text-secondary"
                    tabindex="0"
                    [zTooltip]="names"
                    zTooltipClass="max-w-sm whitespace-normal break-words text-left"
                    >{{ names }}</span
                  >
                } @else {
                  <span class="text-sm text-text-secondary">{{ 'XP.PromptWorkflow.WorkspaceShared' | translate }}</span>
                }
              </td>
              <td z-table-cell class="whitespace-nowrap text-sm text-text-tertiary">
                {{ workflow.updatedAt | date: 'yyyy-MM-dd HH:mm' }}
              </td>
              <td z-table-cell>
                <button
                  z-button
                  zType="ghost"
                  zSize="icon"
                  z-menu
                  [zMenuTriggerFor]="rowActions"
                  [zMenuTriggerData]="{ workflow: workflow }"
                  [attr.aria-label]="'XP.PromptWorkflow.Actions' | translate"
                >
                  <z-icon zType="more_vert" />
                </button>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
} @else {
  <header class="flex flex-wrap items-center justify-between gap-4 border-b border-divider-regular py-5">
    <div class="flex items-center gap-3">
      <button
        z-button
        zType="ghost"
        zSize="icon"
        (click)="back()"
        [disabled]="saving()"
        [attr.aria-label]="'XP.PromptWorkflow.Back' | translate"
      >
        <z-icon zType="arrow-left" />
      </button>
      <div>
        <p class="text-sm text-text-tertiary">
          {{ (selectedId() ? 'XP.PromptWorkflow.EditPrompt' : 'XP.PromptWorkflow.NewPrompt') | translate }}
        </p>
        <h1 class="mt-1 text-xl font-semibold">
          {{ formValue().label || ('XP.PromptWorkflow.Untitled' | translate) }}
        </h1>
      </div>
      @if (form.dirty) {
        <z-badge zType="secondary">{{ 'XP.PromptWorkflow.Unsaved' | translate }}</z-badge>
      }
    </div>
    <div class="flex gap-2">
      <button z-button zType="outline" (click)="back()" [disabled]="saving()">
        {{ 'XP.PromptWorkflow.Cancel' | translate }}
      </button>
      @if (canWriteWorkspace()) {
        <button z-button type="submit" form="prompt-workflow-form" [disabled]="saving()">
          {{ (saving() ? 'XP.PromptWorkflow.Saving' : 'XP.PromptWorkflow.SaveChanges') | translate }}
        </button>
      }
    </div>
  </header>
  <div class="mx-auto max-w-4xl py-6">
    @if (!canWriteWorkspace()) {
      <p role="status" class="mb-6 rounded-md border border-divider-regular p-4 text-sm text-text-tertiary">
        {{ 'XP.PromptWorkflow.ReadOnly' | translate }}
      </p>
    }
    @if (saveError()) {
      <p role="alert" class="mb-6 text-sm text-text-destructive">{{ saveError() }}</p>
    }
    <form id="prompt-workflow-form" [formGroup]="form" (ngSubmit)="save()" class="space-y-6">
      <div class="grid gap-6 md:grid-cols-2">
        <z-form-field
          ><label z-form-label for="prompt-label">{{ 'XP.PromptWorkflow.DisplayName' | translate }} *</label
          ><input z-input id="prompt-label" formControlName="label" maxlength="120" />
          <z-form-control
            [errorMessage]="
              form.controls.label.touched && form.controls.label.invalid
                ? ('XP.PromptWorkflow.NameRequired' | translate)
                : ''
            "
        /></z-form-field>
        <z-form-field
          ><label z-form-label for="prompt-name">{{ 'XP.PromptWorkflow.Command' | translate }} *</label
          ><input z-input id="prompt-name" formControlName="name" maxlength="64" class="col-span-full" />
          <z-form-message class="text-xs text-text-tertiary">{{
            'XP.PromptWorkflow.CommandHelp' | translate
          }}</z-form-message>
          <z-form-control
            [errorMessage]="
              form.controls.name.touched && form.controls.name.invalid
                ? ('XP.PromptWorkflow.CommandInvalid' | translate)
                : ''
            "
        /></z-form-field>
      </div>
      <z-form-field
        ><label z-form-label for="prompt-description">{{ 'XP.PromptWorkflow.EditorDescription' | translate }}</label
        ><textarea z-input id="prompt-description" formControlName="description" rows="2" maxlength="255"></textarea>
      </z-form-field>
      <z-form-field
        ><div class="col-span-full flex items-center justify-between gap-2">
          <label z-form-label>{{ 'XP.PromptWorkflow.OrganizationTags' | translate }}</label>
          <button z-button zType="link" zSize="sm" type="button" (click)="openPanel('tags')">
            {{ 'XP.PromptWorkflow.ManageTags' | translate }}
          </button>
        </div>
        <tag-select
          class="col-span-full block min-w-0 w-full"
          category="prompt_workflow"
          formControlName="organizationTags"
        />
        <p class="col-span-full text-xs text-text-tertiary">
          {{ 'XP.PromptWorkflow.OrganizationTagsHelp' | translate }}
        </p>
      </z-form-field>
      <z-form-field
        ><label z-form-label
          >{{ 'XP.PromptWorkflow.AssociatedExperts' | translate }}
          <span class="font-normal text-text-tertiary">{{ 'XP.PromptWorkflow.Optional' | translate }}</span></label
        >
        <xp-prompt-expert-select
          [experts]="experts()"
          [selected]="formValue().associatedXpertIds ?? []"
          [loading]="expertsLoading()"
          [disabled]="!canWriteWorkspace() || saving()"
          (selectionChange)="setExperts($event)"
        />
        @if (expertError()) {
          <p role="alert" class="text-xs text-text-destructive">{{ expertError() }}</p>
          <button z-button zType="link" type="button" (click)="refresh()">
            {{ 'XP.PromptWorkflow.Retry' | translate }}
          </button>
        }
      </z-form-field>
      <z-form-field
        ><label z-form-label for="prompt-template">{{ 'XP.PromptWorkflow.Content' | translate }} *</label
        ><textarea
          z-input
          id="prompt-template"
          formControlName="template"
          rows="10"
          class="col-span-full font-mono text-sm"
        ></textarea>
        <z-form-message class="text-xs text-text-tertiary">
          {{ 'XP.PromptWorkflow.ContentHelp' | translate: { args: '{{args}}' } }}
        </z-form-message>
        <z-form-control
          [errorMessage]="
            form.controls.template.touched && form.controls.template.invalid
              ? ('XP.PromptWorkflow.ContentRequired' | translate)
              : ''
          "
      /></z-form-field>
      <z-form-field
        ><label z-form-label for="prompt-args">{{ 'XP.PromptWorkflow.ArgumentHint' | translate }}</label
        ><input
          z-input
          id="prompt-args"
          formControlName="argsHint"
          maxlength="120"
          class="col-span-full"
          aria-describedby="prompt-args-help"
          [placeholder]="'XP.PromptWorkflow.ArgumentHintPlaceholder' | translate"
        />
        <z-form-message id="prompt-args-help" class="text-xs text-text-tertiary">{{
          'XP.PromptWorkflow.ArgumentHintHelp' | translate
        }}</z-form-message>
      </z-form-field>
      <xp-prompt-scenario-settings
        [scenarios]="form.controls.scenarios"
        [disabled]="!canWriteWorkspace() || saving()"
      />
      <section class="space-y-3 border-t border-divider-regular pt-5" aria-labelledby="prompt-capabilities-label">
        <h2 id="prompt-capabilities-label" class="text-sm font-medium">
          {{ 'XP.PromptWorkflow.Capabilities.Title' | translate }}
        </h2>
        <xp-prompt-capability-select
          [workspaceId]="workspaceId() ?? ''"
          [experts]="experts()"
          [associatedXpertIds]="formValue().associatedXpertIds ?? []"
          [value]="formValue().runtimeCapabilities"
          [disabled]="!canWriteWorkspace() || saving()"
          (valueChange)="setCapabilities($event)"
        />
      </section>
      <section class="border-t border-divider-regular pt-5">
        <button
          z-button
          zType="ghost"
          type="button"
          class="-ml-3"
          [attr.aria-expanded]="showAdvanced()"
          aria-controls="prompt-advanced"
          (click)="showAdvanced.set(!showAdvanced())"
        >
          <z-icon [zType]="showAdvanced() ? 'chevron-down' : 'chevron-right'" />{{
            'XP.PromptWorkflow.Advanced' | translate
          }}
        </button>
        @if (showAdvanced()) {
          <div id="prompt-advanced" class="mt-5 grid gap-6 md:grid-cols-2">
            <z-form-field
              ><label z-form-label for="prompt-aliases">{{ 'XP.PromptWorkflow.Aliases' | translate }}</label
              ><input z-input id="prompt-aliases" formControlName="aliasesText" class="col-span-full" />
              <z-form-message class="text-xs text-text-tertiary">{{
                'XP.PromptWorkflow.AliasesHelp' | translate
              }}</z-form-message></z-form-field
            >
            <z-form-field
              ><label z-form-label for="prompt-category">{{ 'XP.PromptWorkflow.Category' | translate }}</label
              ><input z-input id="prompt-category" formControlName="category" maxlength="80"
            /></z-form-field>
          </div>
        }
      </section>
    </form>
  </div>
}

<ng-template #rowActions let-workflow="workflow"
  ><div z-menu-content class="min-w-40 p-1">
    <button z-menu-item (click)="edit(workflow)">
      {{ (canWriteWorkspace() ? 'XP.PromptWorkflow.EditPrompt' : 'XP.PromptWorkflow.View') | translate }}
    </button>
    @if (canWriteWorkspace()) {
      <button z-menu-item (click)="duplicate(workflow)">{{ 'XP.PromptWorkflow.Duplicate' | translate }}</button>
    }
    <button z-menu-item (click)="copySkillCommand(workflow)">
      {{ 'XP.PromptWorkflow.CopySkillCommand' | translate }}
    </button>
    @if (canWriteWorkspace()) {
      <button z-menu-item zType="destructive" (click)="openPanel('archive', workflow)">
        {{ 'XP.PromptWorkflow.Archive' | translate }}
      </button>
    }
  </div></ng-template
>

<ng-template #dialogTemplate>
  <div
    xpDialogLayout="wide"
    [xpDialogPurpose]="panel() === 'discard' ? 'workflow' : 'standard'"
    [class]="panel() === 'tags' ? 'w-[960px] max-w-full max-h-[85dvh]' : 'w-[640px] max-w-full max-h-[85dvh]'"
  >
    <header xpDialogHeader>
      <h2 xpDialogHeading>{{ 'XP.PromptWorkflow.Panel.' + panel() | translate }}</h2>
      @if (panel() !== 'discard') {
        <button
          xpDialogCloseButton
          z-button
          zType="ghost"
          zSize="icon"
          (click)="closePanel()"
          [zDisabled]="saving()"
          [attr.aria-label]="'XP.PromptWorkflow.Close' | translate"
        >
          <z-icon zType="close" />
        </button>
      }
    </header>
    <div xpDialogBody>
      @if (panelError()) {
        <p role="alert" class="mb-4 text-sm text-text-destructive">{{ panelError() }}</p>
      }
      @switch (panel()) {
        @case ('export') {
          <p class="mb-4 text-sm text-text-tertiary">{{ 'XP.PromptWorkflow.Capabilities.ExportHelp' | translate }}</p>
          <z-select
            [ngModel]="exportExpertId()"
            (ngModelChange)="exportExpertId.set($event)"
            [zPlaceholder]="'XP.PromptWorkflow.SelectExperts' | translate"
          >
            @for (expert of exportExperts(); track expert.id) {
              <z-select-item [zValue]="expert.id">{{ expert.title || expert.name }}</z-select-item>
            }
          </z-select>
        }
        @case ('templates') {
          <div class="grid gap-3 sm:grid-cols-2">
            @for (template of templates; track template.name) {
              <button
                type="button"
                class="flex flex-col items-start gap-2 rounded-lg border border-border p-4 text-left whitespace-normal hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring"
                (click)="createFromTemplate(template)"
              >
                <span class="font-medium">{{ templateText(template, 'Label') }}</span
                ><span class="text-sm font-normal text-text-tertiary">{{ templateText(template, 'Description') }}</span>
              </button>
            }
          </div>
        }
        @case ('tags') {
          <xp-tag-directory />
        }
        @case ('archive') {
          <p class="text-sm leading-6">
            {{ 'XP.PromptWorkflow.ArchiveHelp' | translate: { name: panelWorkflow()?.label || panelWorkflow()?.name } }}
          </p>
        }
        @case ('discard') {
          <p class="text-sm text-text-tertiary">{{ 'XP.PromptWorkflow.UnsavedHelp' | translate }}</p>

          @if (saveError()) {
            <p role="alert" class="mt-4 text-sm text-text-destructive">{{ saveError() }}</p>
          }
        }
      }
    </div>
    <footer xpDialogFooter>
      @switch (panel()) {
        @case ('export') {
          <button
            z-button
            type="button"
            [zDisabled]="!exportExpertId()"
            (click)="copySkillCommand(panelWorkflow(), exportExpertId())"
          >
            {{ 'XP.PromptWorkflow.CopySkillCommand' | translate }}
          </button>
        }
        @case ('archive') {
          <button z-button zType="outline" [zDisabled]="saving()" (click)="closePanel()">
            {{ 'XP.PromptWorkflow.Cancel' | translate }}</button
          ><button z-button zType="destructive" [zLoading]="saving()" [zDisabled]="saving()" (click)="archive()">
            {{ 'XP.PromptWorkflow.Archive' | translate }}
          </button>
        }
        @case ('discard') {
          <button z-button zType="outline" [zDisabled]="saving()" (click)="closePanel(false)">
            {{ 'XP.PromptWorkflow.ContinueEditing' | translate }}</button
          ><button z-button zType="outline" [zDisabled]="saving()" (click)="closePanel(true)">
            {{ 'XP.PromptWorkflow.Discard' | translate }}</button
          ><button
            z-button
            [zLoading]="saving()"
            [zDisabled]="saving() || !canWriteWorkspace()"
            (click)="saveAndLeave()"
          >
            {{ 'XP.PromptWorkflow.SaveAndLeave' | translate }}
          </button>
        }
        @default {
          <button z-button zType="outline" type="button" (click)="closePanel()">
            {{ 'XP.PromptWorkflow.Close' | translate }}
          </button>
        }
      }
    </footer>
  </div>
</ng-template>