@if (!ShowForm) {
<div class="cert-dashboard">

  <div class="dash-header">
    <div class="dash-title">
      <h2>Training Certificate Register</h2>
      <span class="dash-subtitle">All issued certificates &middot; Track validity and renewal status</span>
    </div>
    <div class="header-actions">
      <button class="btn-add-cert" (click)="openNewForm()">+ New Certificate</button>
    </div>
  </div>

  <div class="stat-cards">
    <div class="stat-card">
      <div class="stat-icon stat-icon-active"><mat-icon>verified</mat-icon></div>
      <div class="stat-info">
        <div class="stat-value">{{ activeCount() }}</div>
        <div class="stat-label">Active</div>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon stat-icon-expired"><mat-icon>event_busy</mat-icon></div>
      <div class="stat-info">
        <div class="stat-value">{{ expiredCount() }}</div>
        <div class="stat-label">Expired</div>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon stat-icon-expiring"><mat-icon>schedule</mat-icon></div>
      <div class="stat-info">
        <div class="stat-value">{{ expiringCount() }}</div>
        <div class="stat-label">Expiring in 30 Days</div>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon stat-icon-revoked"><mat-icon>block</mat-icon></div>
      <div class="stat-info">
        <div class="stat-value">{{ revokedCount() }}</div>
        <div class="stat-label">Revoked</div>
      </div>
    </div>
  </div>

  <div class="dash-filters">
    <input class="search-input" type="text" placeholder="Search by cert no, employee, programme..."
      [value]="searchText()" (input)="searchText.set($any($event.target).value)" />
    <select class="filter-select" (change)="filterStatus.set($any($event.target).value)">
      @for (opt of STATUS_OPTIONS; track opt.value) {
      <option [value]="opt.value">{{ opt.label }}</option>
      }
    </select>
    <select class="filter-select" (change)="sortOrder.set($any($event.target).value)">
      <option value="recent">Newest First</option>
      <option value="oldest">Oldest First</option>
    </select>
    <span class="records-count">{{ filteredCertificates().length }} records</span>
  </div>

  <div class="cert-table-wrap">
    <div class="table-scroll scrollbar">
      <table class="cert-table">
        <thead>
          <tr>
            <th>Cert No</th>
            <th>Employee</th>
            <th>Programme</th>
            <th>Issued On</th>
            <th>Issued By</th>
            <th>Expiry Date</th>
            <th>Days Left</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          @for (cert of filteredCertificates(); track cert.TrainingCertificateId) {
          <tr>
            <td class="td-certno">{{ cert.CertificateNumber || '—' }}</td>
            <td class="td-employee">
              <span class="emp-name">{{ cert.EmployeeName || '—' }}</span>
              @if (cert.EmployeeCode) {
              <span class="emp-code">{{ cert.EmployeeCode }}</span>
              }
            </td>
            <td class="td-programme">{{ cert.ProgrammeTitle || '—' }}</td>
            <td class="td-date">{{ formatDate(cert.IssuedOn) }}</td>
            <td class="td-issuedby">{{ cert.IssuedByName || '—' }}</td>
            <td class="td-date">{{ formatDate(cert.ExpiryDate) }}</td>
            <td class="td-days">
              <span class="days-badge" [ngClass]="getDaysLeftClass(cert)">
                {{ getDaysLeftLabel(cert) }}
              </span>
            </td>
            <td>
              <span class="status-badge" [ngClass]="getStatusClass(cert.CertStatus)">
                {{ getStatusLabel(cert.CertStatus) }}
              </span>
            </td>
            <td class="td-actions">
              <button class="btn-view" title="View Certificate" (click)="viewCertificate(cert, $event)">
                <mat-icon>visibility</mat-icon>
              </button>
              <button class="btn-download" title="Download Signed Certificate (PDF + QR)"
                [disabled]="downloadingId() === cert.TrainingCertificateId" (click)="downloadCertificate(cert, $event)">
                <mat-icon>{{ downloadingId() === cert.TrainingCertificateId ? 'hourglass_empty' : 'download'
                  }}</mat-icon>
              </button>
              <button class="btn-edit" title="Edit" (click)="openEditForm(cert)">
                <mat-icon>edit</mat-icon>
              </button>
              <button class="btn-delete" title="Delete" (click)="deleteCert(cert, $event)">
                <mat-icon>delete</mat-icon>
              </button>
            </td>
          </tr>
          }
          @if (filteredCertificates().length === 0) {
          <tr>
            <td colspan="9" class="empty-state">No certificates found</td>
          </tr>
          }
        </tbody>
      </table>
    </div>
    <div class="table-footer">
      <span>{{ filteredCertificates().length }} of {{ certificates().length }} records</span>
    </div>
  </div>

</div>
}

@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>
    <div class="FormOverView">
      <div class="section-header"><span>IDENTITY</span></div>
      <div>
        <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" [FormData]="form.value"
          formControlName="CertificateNumber" class="adjacentField"></gb-newpicklist>
        <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" [FormData]="form.value"
          formControlName="CertificateTitle" class="adjacentField"></gb-newpicklist>
        <gb-combobox formControlName="CertStatus" class="adjacentField"></gb-combobox>
      </div>
      <div class="section-header"><span>LINKAGES</span></div>
      <div>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
          formControlName="EmployeeName" class="adjacentField"></gb-newpicklist>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
          formControlName="ProgrammeTitle" class="adjacentField"></gb-newpicklist>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
          formControlName="TrainingCompletionName" class="adjacentField"></gb-newpicklist>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
          formControlName="EnrollmentName" class="adjacentField"></gb-newpicklist>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
          formControlName="IssuedByName" class="adjacentField"></gb-newpicklist>
        <gb-input formControlName="ExternalCertRef" class="adjacentField"></gb-input>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
          formControlName="SignatoryName" class="adjacentField"></gb-newpicklist>
      </div>
      <div class="section-header"><span>VALIDITY</span></div>
      <div>
        <gb-date formControlName="IssuedOn" class="adjacentField"></gb-date>
        <gb-date formControlName="ExpiryDate" class="adjacentField"></gb-date>
        <gb-input formControlName="RenewalWindowDays" class="adjacentField"></gb-input>
        <gb-input formControlName="CertificateUrl" class="adjacentField"></gb-input>
      </div>
      @if (isEditMode) {
      <div class="section-header"><span>SIGNED DOCUMENT</span></div>
      <div class="signed-doc-actions">
        <button type="button" class="btn-download-cert"
          [disabled]="downloadingId() === form.value.TrainingCertificateId"
          (click)="downloadCertificate(form.value, $event)">
          <mat-icon>{{ downloadingId() === form.value.TrainingCertificateId ? 'hourglass_empty' : 'download'
            }}</mat-icon>
          Download Signed Certificate (PDF with verification QR)
        </button>
        <button type="button" class="btn-regenerate-cert" (click)="offerRegenerate(form.value.TrainingCertificateId)">
          <mat-icon>autorenew</mat-icon>
          Regenerate Signed PDF
        </button>
        <button type="button" class="btn-verify-cert" (click)="verifyCertificate()">
          <mat-icon>verified_user</mat-icon>
          Verify Now
        </button>
      </div>
      }
    </div>
  </form>
  }
</div>
}