@if (!ShowForm) {
<div class="catalogue-wrap">
  <aside class="filter-sidebar scrollbar">

    @if (distinctDomains().length) {
    <div class="filter-group">
      <div class="filter-group-label">DOMAIN</div>
      @for (item of distinctDomains(); track item.id) {
      <label class="filter-item">
        <input type="checkbox" [checked]="isDomainSelected(item.id)" (change)="toggleDomain(item.id)" />
        <span class="filter-name">{{ item.name }}</span>
        <span class="filter-count">{{ item.count }}</span>
      </label>
      }
    </div>
    }

    @if (distinctTypes().length) {
    <div class="filter-group">
      <div class="filter-group-label">PROGRAMME TYPE</div>
      @for (item of distinctTypes(); track item.type) {
      <label class="filter-item">
        <input type="checkbox" [checked]="isTypeSelected(item.type)" (change)="toggleType(item.type)" />
        <span class="filter-name">{{ PROGRAMME_TYPE_LABELS[item.type] }}</span>
        <span class="filter-count">{{ item.count }}</span>
      </label>
      }
    </div>
    }

    @if (distinctDeliveries().length) {
    <div class="filter-group">
      <div class="filter-group-label">DELIVERY MODE</div>
      @for (item of distinctDeliveries(); track item.mode) {
      <label class="filter-item">
        <input type="checkbox" [checked]="isDeliverySelected(item.mode)" (change)="toggleDelivery(item.mode)" />
        <span class="filter-name">{{ DELIVERY_MODE_LABELS[item.mode] }}</span>
        <span class="filter-count">{{ item.count }}</span>
      </label>
      }
    </div>
    }

    @if (distinctComplexities().length) {
    <div class="filter-group">
      <div class="filter-group-label">COMPLEXITY</div>
      @for (item of distinctComplexities(); track item.level) {
      <label class="filter-item">
        <input type="checkbox" [checked]="isComplexitySelected(item.level)" (change)="toggleComplexity(item.level)" />
        <span class="filter-name">{{ COMPLEXITY_LABELS[item.level] }}</span>
        <span class="filter-count">{{ item.count }}</span>
      </label>
      }
    </div>
    }

    @if (distinctProviders().length) {
    <div class="filter-group">
      <div class="filter-group-label">PROVIDER</div>
      @for (item of distinctProviders(); track item.type) {
      <label class="filter-item">
        <input type="checkbox" [checked]="isProviderSelected(item.type)" (change)="toggleProvider(item.type)" />
        <span class="filter-name">{{ PROVIDER_LABELS[item.type] }}</span>
        <span class="filter-count">{{ item.count }}</span>
      </label>
      }
    </div>
    }

    <button class="btn-clear-filters" (click)="clearAllFilters()">Clear All Filters</button>
  </aside>

  <div class="catalogue-main">
    <div class="catalogue-topbar">
      <div class="catalogue-header-text">
        <h2 class="catalogue-title">Programme Catalogue</h2>
        <span class="catalogue-subtitle">
          {{ programmes().length }} active programmes
        </span>
      </div>
      <div class="topbar-right">
        <div class="view-toggle">
          <button [class.vt-active]="displayMode() === 'grid'" (click)="displayMode.set('grid')">Grid</button>
          <button [class.vt-active]="displayMode() === 'list'" (click)="displayMode.set('list')">List</button>
        </div>
        <button class="btn-bulk-import" type="button" (click)="openBulkImport()">&#8593; Bulk Import</button>
        <button class="btn-new-programme" (click)="openDetailView(null)">+ New Programme</button>
      </div>
    </div>

    <div class="search-sort-bar">
      <input class="search-input" type="text" placeholder="Search programmes..." [value]="searchText()"
        (input)="searchText.set($any($event.target).value)" />
      <div class="sort-select-wrap">
        <span class="sort-label">Sort:</span>
        <select class="sort-select" [value]="sortOption()" (change)="sortOption.set($any($event.target).value)">
          <option value="recent">Most Recent</option>
          <option value="name">Name (A–Z)</option>
          <option value="duration">Duration</option>
        </select>
      </div>
      <span class="prog-count">{{ totalCount() }} programmes</span>
    </div>

    @if (displayMode() === 'grid') {
    <div class="card-grid scrollbar">
      @for (prog of filteredProgrammes(); track prog.ProgrammeId) {
      <div class="prog-card" (click)="openDetailView(prog)">

        <!-- Card header: avatar + title -->
        <div class="card-head">
          <div class="card-avatar" [style.background]="getCardColor(prog)">
            {{ getCardInitial(prog) }}
          </div>
          <div class="card-title-area">
            <div class="card-title">{{ prog.ProgrammeTitle }}</div>
            <div class="card-code">{{ prog.ProgrammeCode }}</div>
          </div>
        </div>

        <div class="card-tags">
          @if (prog.DomainName) {
          <span class="ctag ctag-domain">{{ prog.DomainName }}</span>
          }
          <span class="ctag" [ngClass]="getTypeBadgeClass(prog.ProgrammeType)">
            {{ getProgrammeTypeLabel(prog.ProgrammeType) }}
          </span>
          <span class="ctag" [ngClass]="getDelivBadgeClass(prog.DeliveryMode)">
            {{ getDeliveryLabel(prog.DeliveryMode) }}
          </span>
          @if (prog.ComplexityLevel !== null) {
          <span class="ctag ctag-complexity">{{ getComplexityLabel(prog.ComplexityLevel) }}</span>
          }
          <span class="status-pill" [class.sp-active]="prog.IsActive === 1" [class.sp-inactive]="prog.IsActive !== 1">
            {{ prog.IsActive === 1 ? 'Active' : 'Inactive' }}
          </span>
        </div>

        <!-- Metrics 2×2 grid -->
        <div class="card-metrics">
          <div class="card-metric">
            <span class="cm-val">{{ prog.DurationHours ? (prog.DurationHours + ' hrs') : '&#8212;' }}</span>
            <span class="cm-lbl">Duration</span>
          </div>
          <div class="card-metric">
            <span class="cm-val">{{ prog.MaxCapacity || '&#8212;' }}</span>
            <span class="cm-lbl">Max Seats</span>
          </div>
          <div class="card-metric">
            <span class="cm-val">{{ prog.SessionCount || '&#8212;' }}</span>
            <span class="cm-lbl">Sessions</span>
          </div>
          <div class="card-metric">
            <span class="cm-val">{{ prog.PassRate ? (prog.PassRate + '%') : '&#8212;' }}</span>
            <span class="cm-lbl">Pass Rate</span>
          </div>
        </div>

        <div class="card-footer">
          <span class="card-footer-info">
            @if (prog.NextInstanceDate) {
            Next: {{ prog.NextInstanceDate }} &middot; {{ prog.EnrolledYTD || 0 }} enrolled YTD
            } @else if (prog.EnrolledYTD) {
            {{ prog.EnrolledYTD }} enrolled YTD
            }
          </span>
          <div class="card-footer-btns">
            <button class="btn-card-action" [class.btn-schedule]="!!prog.NextInstanceDate"
              (click)="openDetailView(prog); $event.stopPropagation()">
              {{ prog.NextInstanceDate ? 'Schedule' : 'View' }}
            </button>
            <button class="btn-card-del" (click)="deleteFromList(prog, $event)" title="Delete">&#10005;</button>
          </div>
        </div>

      </div>
      }

      @if (filteredProgrammes().length === 0) {
      <div class="grid-empty">No programmes match the selected filters.</div>
      }
    </div><!-- /card-grid -->
    }

    @if (displayMode() === 'list') {
    <div class="list-wrap scrollbar">
      <table class="prog-list-table">
        <thead>
          <tr>
            <th>Code</th>
            <th>Programme Title</th>
            <th>Domain</th>
            <th>Type</th>
            <th>Delivery</th>
            <th>Complexity</th>
            <th>Hrs</th>
            <th>Seats</th>
            <th>Refresher</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          @for (prog of filteredProgrammes(); track prog.ProgrammeId) {
          <tr (click)="openDetailView(prog)">
            <td class="tc-code">{{ prog.ProgrammeCode }}</td>
            <td class="tc-name">
              {{ prog.ProgrammeTitle }}
              @if (prog.ProgrammeVersionNo) {
              <span class="tc-ver">{{ prog.ProgrammeVersionNo }}</span>
              }
            </td>
            <td>{{ prog.DomainName || '&#8212;' }}</td>
            <td>
              <span class="ctag" [ngClass]="getTypeBadgeClass(prog.ProgrammeType)">
                {{ getProgrammeTypeLabel(prog.ProgrammeType) }}
              </span>
            </td>
            <td>
              <span class="ctag" [ngClass]="getDelivBadgeClass(prog.DeliveryMode)">
                {{ getDeliveryLabel(prog.DeliveryMode) }}
              </span>
            </td>
            <td>{{ getComplexityLabel(prog.ComplexityLevel) }}</td>
            <td class="tc-num">{{ prog.DurationHours || '&#8212;' }}</td>
            <td class="tc-num">
              @if (prog.MinCapacity || prog.MaxCapacity) {
              {{ prog.MinCapacity }}&ndash;{{ prog.MaxCapacity }}
              } @else { &#8212; }
            </td>
            <td>
              <span class="refresher-pill" [class.rp-no]="+prog.IsRefresher === 0">
                {{ +prog.IsRefresher === 0 ? 'No' : 'Yes' }}
              </span>
            </td>
            <td>
              <span class="status-pill" [class.sp-active]="prog.IsActive === 1"
                [class.sp-inactive]="prog.IsActive !== 1">
                {{ prog.IsActive === 1 ? 'Active' : 'Inactive' }}
              </span>
            </td>
            <td class="tc-actions" (click)="$event.stopPropagation()">
              <button class="btn-list-edit" (click)="openDetailView(prog)" title="Edit">&#9998;</button>
              <button class="btn-list-del" (click)="deleteFromList(prog, $event)" title="Delete">&#10005;</button>
            </td>
          </tr>
          }
          @if (filteredProgrammes().length === 0) {
          <tr>
            <td colspan="11" class="list-empty">No programmes found.</td>
          </tr>
          }
        </tbody>
      </table>
    </div>
    }

  </div><!-- /catalogue-main -->
</div><!-- /catalogue-wrap -->
}

@if (ShowForm) {
<div class="detail-wrap">
  @if (form.bFormReady) {
  <form [formGroup]="form">

    <gb-formaction [FormDetails]="form" [FormData]="form.value" [MenuRights]="MenuRights"
      (FormOutput)="FormOutput($event)" [IsListButtonRequired]="true"></gb-formaction>

    <!-- ── Programme header card ── -->
    <!-- <div class="prog-header-card">
      <div class="prog-header-left">
        <h2 class="prog-card-title">{{ getFormValue('ProgrammeTitle') || 'New Training Programme' }}</h2>
        <div class="prog-badge-row">
          @if (getFormValue('ProgrammeCode')) {
          <span class="pbadge pbadge-code">{{ getFormValue('ProgrammeCode') }}</span>
          }
          <span class="pbadge" [class.pbadge-active]="getFormValue('IsActive') === 1"
            [class.pbadge-inactive]="getFormValue('IsActive') !== 1">
            {{ getFormValue('IsActive') === 1 ? 'Active' : 'Inactive' }}
          </span>
        </div>
      </div>
      <div class="prog-header-actions">
        <button class="btn-deactivate" type="button" (click)="toggleActivation()">
          {{ getFormValue('IsActive') === 1 ? 'Deactivate' : 'Activate' }}
        </button>
        <button class="btn-duplicate" type="button" (click)="duplicateProgramme()">Duplicate</button>
      </div>
    </div> -->

    <!-- ── Tab bar ── -->
    <div class="prog-tab-bar">
      @for (tab of TABS; track $index; let i = $index) {
      <button class="prog-tab" type="button" [class.prog-tab-active]="activeTab() === i" (click)="goToTab(i)">
        {{ tab }}
        @if (i === 3 && sessions().length > 0) {
        <span class="tab-count">{{ sessions().length }}</span>
        }
        @if (i === 4 && skillMaps().length > 0) {
        <span class="tab-count">{{ skillMaps().length }}</span>
        }
        @if (i === 5 && prerequisites().length > 0) {
        <span class="tab-count">{{ prerequisites().length }}</span>
        }
        @if (i === 6 && revisionHistory().length > 0) {
        <span class="tab-count">{{ revisionHistory().length }}</span>
        }
      </button>
      }
    </div>

    <!-- ── Tab content ── -->
    <div class="prog-tab-content">

      <!-- TAB 0: Identity -->
      <div class="tab-pane" [hidden]="activeTab() !== 0">
        <div class="FormOverView">
          <div>
            <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" [FormData]="form.value"
              formControlName="ProgrammeCode" class="adjacentField"></gb-newpicklist>
            <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" [FormData]="form.value"
              formControlName="ProgrammeTitle" class="adjacentField"></gb-newpicklist>
            <gb-input formControlName="ProgrammeVersionNo" class="adjacentField"></gb-input>
          </div>
          <div>
            <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
              formControlName="DomainName" class="adjacentField"></gb-newpicklist>
            <gb-combobox formControlName="ProgrammeType" class="adjacentField"></gb-combobox>
            <gb-combobox formControlName="DeliveryMode" class="adjacentField"></gb-combobox>
            <gb-combobox formControlName="ComplexityLevel" class="adjacentField"></gb-combobox>
            <gb-combobox formControlName="ProgrammeLevel" class="adjacentField"></gb-combobox>
          </div>
        </div>
      </div>

      <!-- TAB 1: Scope & capacity -->
      <div class="tab-pane" [hidden]="activeTab() !== 1">
        <div class="FormOverView">
          <div>
            <gb-input formControlName="DurationHours" class="adjacentField"></gb-input>
            <gb-combobox formControlName="DifficultyLevel" class="adjacentField"></gb-combobox>
            <gb-input formControlName="MinCapacity" class="adjacentField"></gb-input>
            <gb-input formControlName="MaxCapacity" class="adjacentField"></gb-input>
          </div>
          <div>
            <gb-combobox formControlName="ProviderType" class="adjacentField"></gb-combobox>
            <gb-input formControlName="CostPerParticipant" class="adjacentField"></gb-input>
            <gb-input formControlName="PassMark" class="adjacentField"></gb-input>
            <gb-input formControlName="CertValidityDays" class="adjacentField"></gb-input>
            <gb-input formControlName="RenewalWindowDays" class="adjacentField"></gb-input>
          </div>
          <div class="checkbox-row">
            <gb-checkbox formControlName="CertOnComplete"></gb-checkbox>
            <gb-checkbox formControlName="HasAssessment"></gb-checkbox>
            <gb-checkbox formControlName="HasPreAssessment"></gb-checkbox>
            <gb-checkbox formControlName="IsRefresher"></gb-checkbox>
          </div>
        </div>
      </div>

      <!-- TAB 2: Description -->
      <div class="tab-pane" [hidden]="activeTab() !== 2">
        <div class="FormOverView">
          <gb-textarea formControlName="FullDescription" class="fullField"></gb-textarea>
        </div>
      </div>

      <!-- TAB 3: Sessions -->
      <div class="tab-pane sessions-pane" [hidden]="activeTab() !== 3">

        <!-- Stats bar -->
        <div class="sess-stats-bar">
          <div class="sess-stat-chip">
            <mat-icon>layers</mat-icon>
            <div class="ssc-text">
              <span class="ssc-val">{{ sessions().length }}</span>
              <span class="ssc-lbl">Sessions</span>
            </div>
          </div>
          <div class="sess-stat-chip">
            <mat-icon>schedule</mat-icon>
            <div class="ssc-text">
              <span class="ssc-val">{{ totalSessionHours() }}h</span>
              <span class="ssc-lbl">Total hours</span>
            </div>
          </div>
          <div class="sess-stat-chip">
            <mat-icon>label</mat-icon>
            <div class="ssc-text">
              <span class="ssc-val">{{ totalTopicCount() }}</span>
              <span class="ssc-lbl">Topics</span>
            </div>
          </div>
          <span class="sess-stats-spacer"></span>
          <button class="btn-add-sess" type="button" (click)="openSessionDialog()">+ Add Session</button>
        </div>

        <!-- Session cards -->
        @for (s of sessions(); track $index; let si = $index) {
        <div class="sess-card" [class.sess-card-open]="expandedSessionIndex() === si">
          <!-- Card header row -->
          <div class="sess-card-hd" (click)="toggleSessCard(si)">
            <span class="sess-drag"><mat-icon>drag_indicator</mat-icon></span>
            <div class="sess-num">{{ (si + 1).toString().padStart(2, '0') }}</div>
            <div class="sess-hd-info">
              <div class="sess-hd-badges">
                @if (s.SessionCode) {
                <span class="sbadge sbadge-code">{{ s.SessionCode }}</span>
                }
                <span class="sbadge sbadge-type">{{ SESSION_TYPE_LABELS[s.SessionType] ?? 'Session' }}</span>
              </div>
              <div class="sess-hd-title">{{ s.SessionTitle }}</div>
              <div class="sess-hd-meta">
                <span class="sess-meta-chip">
                  <mat-icon>schedule</mat-icon>
                  {{ s.DurationHours }}h
                </span>
                <span class="sess-meta-chip">
                  <mat-icon>chat</mat-icon>
                  {{ SESSION_DELIV_LABELS[s.SessionDelivMode] ?? 'Classroom' }}
                </span>
                @if ((s.Topics ?? []).length > 0) {
                <span class="sess-meta-chip">
                  <mat-icon>label</mat-icon>
                  {{ (s.Topics ?? []).length }} topics
                </span>
                }
              </div>
            </div>
            <div class="sess-hd-actions" (click)="$event.stopPropagation()">
              <button class="sess-act-btn" type="button" title="Edit" (click)="openSessionDialog(s, si)">
                <mat-icon>edit</mat-icon>
              </button>
              <button class="sess-act-btn sess-act-del" type="button" title="Delete" (click)="deleteSessionRow(s)">
                <mat-icon>delete</mat-icon>
              </button>
              <button class="sess-act-btn sess-act-chevron" type="button" (click)="toggleSessCard(si)">
                <mat-icon [style.transform]="expandedSessionIndex() === si ? 'rotate(180deg)' : 'rotate(0deg)'"
                  style="transition: transform 0.25s">expand_more</mat-icon>
              </button>
            </div>
          </div>

          <!-- Expanded body -->
          @if (expandedSessionIndex() === si) {
          <div class="sess-card-body">
            <div class="sess-body-left">
              @if (s.DeliveryNote) {
              <div class="sess-section sess-desc-row">
                <span class="sess-section-lbl">DESCRIPTION</span>
                <p class="sess-desc">{{ s.DeliveryNote }}</p>
              </div>
              }
              <div class="sess-section">
                <div class="sess-section-lbl">
                  TOPICS
                  @if ((s.Topics ?? []).length > 0) {
                  <span class="topic-total-badge">{{ (s.Topics ?? []).length }} total</span>
                  }
                </div>
                @for (t of (s.Topics ?? []); track $index; let ti = $index) {
                <div class="topic-row-card">
                  <span class="topic-num">{{ ti + 1 }}</span>
                  <span class="topic-title-txt">{{ t.TopicTitle }}</span>
                  <mat-icon class="topic-clock">schedule</mat-icon>
                  <span class="topic-dur-text">{{ t.DurationHours ?? 0 }} h</span>
                  <button class="topic-act-btn" type="button" title="Edit" (click)="editTopicDialog(s, si, t, ti); $event.stopPropagation()">
                    <mat-icon>edit</mat-icon>
                  </button>
                  <button class="topic-act-btn topic-act-del" type="button" title="Delete" (click)="deleteTopic(si, ti, t)">
                    <mat-icon>delete</mat-icon>
                  </button>
                </div>
                }
                <div class="topic-add-center">
                  <button class="btn-topic-open" type="button" (click)="openTopicDialog(s, si); $event.stopPropagation()">
                    + Topic
                  </button>
                </div>
              </div>
            </div>

          </div>
          }

        </div>
        }

        @if (sessions().length === 0) {
        <div class="sess-empty-state">
          <mat-icon class="empty-icon">layers</mat-icon>
          <p>No sessions yet. Click + Add Session to begin.</p>
          <button class="btn-add-sess" type="button" (click)="openSessionDialog()">+ Add Session</button>
        </div>
        }

      </div>

      <!-- TAB 4: Skill map -->
      <div class="tab-pane skillmap-pane" [hidden]="activeTab() !== 4">

        <!-- Stats bar -->
        <div class="sess-stats-bar">
          <div class="sess-stat-chip">
            <mat-icon>account_tree</mat-icon>
            <div class="ssc-text">
              <span class="ssc-val">{{ skillMaps().length }}</span>
              <span class="ssc-lbl">Skill Maps</span>
            </div>
          </div>
          <span class="sess-stats-spacer"></span>
          <button class="btn-add-sess" type="button" (click)="openSkillMapDialog()">+ Add Skill Map</button>
        </div>

        <!-- Skill map cards -->
        @for (sm of skillMaps(); track $index; let smi = $index) {
        <div class="sm-card">
          <div class="sm-card-main">
            <div class="sm-num">{{ (smi + 1).toString().padStart(2, '0') }}</div>
            <div class="sm-info">
              <div class="sm-skill-name">{{ sm.SkillName || '—' }}</div>
              <div class="sm-meta-row">
                @if (sm.QualifiesForLevelNo !== null && sm.QualifiesForLevelNo !== undefined) {
                <span class="sm-level-badge sm-level-{{ sm.QualifiesForLevelNo }}">
                  {{ SKILL_LEVEL_LABELS[sm.QualifiesForLevelNo] }}
                </span>
                }
                @if (sm.SessionTitle) {
                <span class="sm-chip">{{ sm.SessionTitle }}</span>
                }
                @if (sm.ModelName) {
                <span class="sm-chip">{{ sm.ModelName }}</span>
                }
                @if (sm.ProductFamilyName) {
                <span class="sm-chip">{{ sm.ProductFamilyName }}</span>
                }
              </div>
              <div class="sm-bool-row">
                @if (sm.IsAutoPropose) {
                <span class="sm-bool-chip sm-bool-on">Auto Propose</span>
                }
                @if (sm.RequiresPassedAssess) {
                <span class="sm-bool-chip sm-bool-on">Requires Assessment</span>
                }
                @if (sm.IsDirectEvidence) {
                <span class="sm-bool-chip sm-bool-on">Direct Evidence</span>
                }
                @if (sm.Remarks) {
                <span class="sm-bool-chip sm-bool-note">{{ sm.Remarks }}</span>
                }
              </div>
            </div>
            <div class="sm-card-actions">
              <button class="sess-act-btn" type="button" title="Edit" (click)="openSkillMapDialog(sm, smi)">
                <mat-icon>edit</mat-icon>
              </button>
              <button class="sess-act-btn sess-act-del" type="button" title="Delete" (click)="deleteSkillMapRow(smi, sm)">
                <mat-icon>delete</mat-icon>
              </button>
            </div>
          </div>
        </div>
        }

        @if (skillMaps().length === 0) {
        <div class="sess-empty-state">
          <mat-icon class="empty-icon">account_tree</mat-icon>
          <p>No skill maps yet. Click + Add Skill Map to begin.</p>
          <button class="btn-add-sess" type="button" (click)="openSkillMapDialog()">+ Add Skill Map</button>
        </div>
        }

      </div>

      <!-- TAB 5: Prerequisites -->
      <div class="tab-pane prereq-pane" [hidden]="activeTab() !== 5">

        <!-- Stats bar -->
        <div class="sess-stats-bar">
          <div class="sess-stat-chip">
            <mat-icon>checklist</mat-icon>
            <div class="ssc-text">
              <span class="ssc-val">{{ prerequisites().length }}</span>
              <span class="ssc-lbl">Prerequisites</span>
            </div>
          </div>
          <span class="sess-stats-spacer"></span>
          <button class="btn-add-sess" type="button" (click)="openPrerequisiteDialog()">+ Add Prerequisite</button>
        </div>

        <!-- Prerequisite cards -->
        @for (pr of prerequisites(); track $index; let pri = $index) {
        <div class="prereq-card">
          <div class="prereq-card-main">
            <div class="sm-num">{{ (pri + 1).toString().padStart(2, '0') }}</div>
            <div class="prereq-info">
              <div class="prereq-prog-name">{{ pr.PrerequisiteProgrammeName || pr.ProgrammePrereqName || '—' }}</div>
              <div class="prereq-meta-row">
                <span class="prereq-type-badge" [class.ptb-mandatory]="pr.IsHard === 1" [class.ptb-optional]="pr.IsHard !== 1">
                  {{ pr.IsHard === 1 ? 'Mandatory' : 'Optional' }}
                </span>
                @if (pr.ValidWithinDays > 0) {
                <span class="sm-chip">Valid within {{ pr.ValidWithinDays }} days</span>
                }
                @if (pr.Remarks) {
                <span class="sm-chip">{{ pr.Remarks }}</span>
                }
              </div>
            </div>
            <div class="sm-card-actions">
              <button class="sess-act-btn" type="button" title="Edit" (click)="openPrerequisiteDialog(pr, pri)">
                <mat-icon>edit</mat-icon>
              </button>
              <button class="sess-act-btn sess-act-del" type="button" title="Delete" (click)="deletePrerequisiteRow(pri, pr)">
                <mat-icon>delete</mat-icon>
              </button>
            </div>
          </div>
        </div>
        }

        @if (prerequisites().length === 0) {
        <div class="sess-empty-state">
          <mat-icon class="empty-icon">checklist</mat-icon>
          <p>No prerequisites yet. Click + Add Prerequisite to begin.</p>
          <button class="btn-add-sess" type="button" (click)="openPrerequisiteDialog()">+ Add Prerequisite</button>
        </div>
        }

      </div>

      <!-- TAB 6: Revision history -->
      <div class="tab-pane revision-pane" [hidden]="activeTab() !== 6">

        <div class="sess-stats-bar">
          <div class="sess-stat-chip">
            <mat-icon>history</mat-icon>
            <div class="ssc-text">
              <span class="ssc-val">{{ revisionHistory().length }}</span>
              <span class="ssc-lbl">Revisions</span>
            </div>
          </div>
          <span class="sess-stats-spacer"></span>
        </div>

        @if (revisionHistoryLoading()) {
        <div class="sess-empty-state"><p>Loading revision history…</p></div>
        }

        @if (!revisionHistoryLoading() && revisionHistory().length === 0) {
        <div class="sess-empty-state">
          <mat-icon class="empty-icon">history</mat-icon>
          <p>No revisions recorded yet — every destructive update to this programme is snapshotted here automatically.</p>
        </div>
        }

        @if (!revisionHistoryLoading() && revisionHistory().length > 0) {
        <table class="revision-table">
          <thead>
            <tr>
              <th>Rev #</th>
              <th>Effective From</th>
              <th>Change Summary</th>
              <th>Revised By</th>
              <th>Revised On</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            @for (rev of revisionHistory(); track rev.ProgrammeRevisionId) {
            <tr>
              <td>{{ rev.RevisionNo }}</td>
              <td>{{ rev.EffectiveFrom | date:'dd MMM yyyy' }}</td>
              <td class="td-changesummary">{{ rev.ChangeSummary || '—' }}</td>
              <td>{{ rev.RevisedByName || '—' }}</td>
              <td>{{ rev.RevisedOn | date:'dd MMM yyyy, h:mm a' }}</td>
              <td class="td-actions">
                <button class="sess-act-btn" type="button" title="View Snapshot" (click)="viewRevisionSnapshot(rev)">
                  <mat-icon>visibility</mat-icon>
                </button>
              </td>
            </tr>
            }
          </tbody>
        </table>
        }

      </div>

    </div><!-- /prog-tab-content -->

    <!-- ── Bottom navigation ── -->
    <div class="prog-tab-footer">
      @if (activeTab() > 0) {
      <button class="btn-tab-back" type="button" (click)="prevTab()">&#8592; Back</button>
      }
      @if (activeTab() < TABS.length - 1) {
      <button class="btn-tab-next" type="button" (click)="nextTab()">
        Next: {{ TABS[activeTab() + 1] }} &#8594;
      </button>
      }
    </div>

  </form>
  }

  <!-- Sub-form lightbox -->
  @if (subFormType() !== null) {
  <div class="sub-form-overlay" (click)="subFormType.set(null)">
    <div class="lightbox-box" (click)="$event.stopPropagation()">
      @if (subFormType() === 'session') {
      <gb-programmesession
        [data]="subFormData()"
        (saved)="onSessionSaved($event)"
        (cancelled)="subFormType.set(null)">
      </gb-programmesession>
      }
      @if (subFormType() === 'topic') {
      <gb-programmesessiontopic
        [data]="subFormData()"
        (saved)="onTopicSaved($event)"
        (cancelled)="subFormType.set(null)">
      </gb-programmesessiontopic>
      }
      @if (subFormType() === 'skillmap') {
      <gb-programmeskillmap
        [data]="subFormData()"
        (saved)="onSkillMapSaved($event)"
        (cancelled)="subFormType.set(null)">
      </gb-programmeskillmap>
      }
      @if (subFormType() === 'prerequisite') {
      <gb-programmeprerequisite
        [data]="subFormData()"
        (saved)="onPrerequisiteSaved($event)"
        (cancelled)="subFormType.set(null)">
      </gb-programmeprerequisite>
      }
    </div>
  </div>
  }
</div>
}

<!-- ── Bulk Import Modal ────────────────────────────────────────────── -->
@if (showBulkImport()) {
<div class="bi-modal-overlay" (click)="closeBulkImport()">
  <div class="bi-modal-content" (click)="$event.stopPropagation()">
    <div class="bi-modal-header">
      <div class="bi-modal-title">Bulk Import Training Programmes</div>
      <mat-icon (click)="closeBulkImport()" class="bi-close-icon">clear</mat-icon>
    </div>
    <div class="bi-modal-body scrollbar">
      <p class="bi-desc">
        Session Code/Title are required — every programme needs at least one session to save, so this
        import creates one basic session per row. Domain is matched by name against the Training Domain
        master automatically — no need to look up a numeric id.
      </p>

      @if (bulkLookupsLoading()) {
      <div class="bi-hints">Loading Training Domain master list&hellip;</div>
      }
      @if (bulkLookupsError()) {
      <div class="bi-hints bi-hints-error">
        Couldn't load the Training Domain master list needed to match names. <a href="javascript:void(0)" (click)="retryBulkLookups()">Retry</a>
      </div>
      }

      <div class="bi-toolbar">
        <button class="btn-bulk-import" type="button" [disabled]="!bulkLookupsReady()" (click)="downloadBulkTemplate()">&#8595; Download Template</button>
        <label class="btn-new-programme bi-upload-label" [class.bi-disabled]="!bulkLookupsReady()">
          &#8593; Choose File
          <input type="file" accept=".xlsx,.xls,.csv" [disabled]="!bulkLookupsReady()" (change)="onBulkFileSelected($event)" hidden />
        </label>
        @if (bulkFileName()) { <span class="bi-filename">{{ bulkFileName() }}</span> }
      </div>

      @if (bulkRows().length === 0) {
      <div class="bi-hints">
        <p>Expected columns:</p>
        <ul>
          @for (col of bulkColumns; track col.key) {
          <li>
            <strong>{{ col.label }}</strong>
            @if (col.required) { <span class="bi-required">*</span> }
            @if (col.hint) { <span class="bi-hint"> &mdash; {{ col.hint }}</span> }
          </li>
          }
        </ul>
      </div>
      }

      @if (bulkRows().length > 0) {
      <div class="bi-summary">
        <span class="bi-chip">{{ bulkRows().length }} rows</span>
        @if (bulkInvalidCount() > 0) { <span class="bi-chip bi-chip-warn">{{ bulkInvalidCount() }} invalid</span> }
        @if (bulkSuccessCount() > 0) { <span class="bi-chip bi-chip-ok">{{ bulkSuccessCount() }} imported</span> }
        @if (bulkErrorCount() > 0) { <span class="bi-chip bi-chip-error">{{ bulkErrorCount() }} failed</span> }
        @if (bulkImporting()) { <span class="bi-progress">Importing&hellip; {{ bulkProcessedCount() }} / {{ bulkValidCount() }}</span> }
      </div>

      <div class="bi-table-wrap scrollbar">
        <table class="bi-table">
          <thead>
            <tr>
              <th>#</th>
              @for (col of bulkColumns; track col.key) { <th>{{ col.label }}</th> }
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            @for (row of bulkRows(); track row._rowNum) {
            <tr [ngClass]="'bi-row-' + row._status">
              <td>{{ row._rowNum }}</td>
              @for (col of bulkColumns; track col.key) { <td>{{ row[col.key] }}</td> }
              <td class="bi-status-cell">
                <span class="bi-status-badge" [ngClass]="'bi-status-' + row._status">{{ row._status }}</span>
                @if (row._errors.length) { <div class="bi-row-msg">{{ row._errors.join(', ') }}</div> }
                @if (row._message) { <div class="bi-row-msg bi-row-msg-error">{{ row._message }}</div> }
              </td>
            </tr>
            }
          </tbody>
        </table>
      </div>
      }
    </div>
    <div class="bi-actions">
      <button class="btn-bulk-import" type="button" (click)="closeBulkImport()">{{ bulkDone() ? 'Close' : 'Cancel' }}</button>
      <button class="btn-new-programme" type="button" [disabled]="bulkImporting() || bulkValidCount() === 0 || bulkDone()"
        (click)="startBulkImport()">
        {{ bulkImporting() ? 'Importing…' : 'Start Import (' + bulkValidCount() + ')' }}
      </button>
    </div>
  </div>
</div>
}