@if (certifications$ | async; as certifications) {
  <div class="flex h-full min-h-0 flex-col overflow-hidden">
    <div class="border-b border-divider-regular px-8 py-6">
      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div class="pac-page-title text-text-primary">
          {{ 'PAC.KEY_WORDS.Certification' | translate: { Default: 'Certification' } }}
        </div>

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
          <div ngmButtonGroup displayDensity="cosy">
            <button z-button zType="default" displayDensity="cosy" type="button" (click)="createCertification()">
              <z-icon nxDensity="cosy" zType="add"></z-icon>{{ 'PAC.ACTIONS.ADD' | translate: { Default: 'Add' } }}
            </button>
          </div>
        </div>
      </div>

      <div class="mt-1 text-sm text-text-tertiary">
        {{
          'PAC.KEY_WORDS.DigitalAssetCertificationTypes'
            | translate: { Default: 'Digital Asset Certification Types' }
        }}
      </div>
    </div>

    <div class="flex-1 min-h-0 px-8 py-6">
      <section class="flex h-full min-h-[32rem] flex-col xl:flex-row">
        <div
          class="flex min-h-0 min-w-0 flex-1 flex-col"
          [ngClass]="certification ? 'xl:border-r xl:border-divider-regular' : ''"
        >
          @if (certifications.length) {
            <div class="min-h-0 flex-1 overflow-auto">
              <table class="w-full min-w-[760px] table-fixed text-left text-sm">
                <thead class="border-b border-divider-regular bg-components-input-bg-normal text-text-secondary">
                  <tr>
                    <th class="px-6 py-3 font-semibold">
                      {{ 'PAC.KEY_WORDS.Name' | translate: { Default: 'Name' } }}
                    </th>
                    <th class="px-6 py-3 font-semibold">
                      {{ 'PAC.KEY_WORDS.Description' | translate: { Default: 'Description' } }}
                    </th>
                    <th class="px-6 py-3 font-semibold">
                      {{ 'PAC.KEY_WORDS.Owner' | translate: { Default: 'Owner' } }}
                    </th>
                    <th class="px-6 py-3 font-semibold">
                      {{ 'PAC.KEY_WORDS.ACTION' | translate: { Default: 'Action' } }}
                    </th>
                  </tr>
                </thead>

                <tbody>
                  @for (item of certifications; track item.id) {
                    <tr
                      class="group cursor-pointer border-b border-divider-regular transition-colors duration-150 ease-out hover:bg-hover-bg"
                      [class.bg-background-default-subtle]="certification?.id === item.id"
                      (click)="editCertification(item)"
                    >
                      <td class="px-6 py-4 align-top">
                        <div class="font-medium text-text-primary">{{ item.name }}</div>
                        <div class="mt-1 text-xs text-text-tertiary">
                          {{ 'PAC.Certification.Entry' | translate: { Default: 'Certification entry' } }}
                        </div>
                      </td>

                      <td class="px-6 py-4 align-top">
                        <div class="line-clamp-2 leading-6 text-text-secondary">
                          {{ certificationDescription(item) }}
                        </div>
                      </td>

                      <td class="px-6 py-4 align-top">
                        @if (item.owner) {
                          <pac-user-profile-inline [user]="item.owner" small />
                        } @else {
                          <div class="text-sm text-text-tertiary">
                            {{ 'PAC.Certification.NoOwner' | translate: { Default: 'No owner assigned' } }}
                          </div>
                        }
                      </td>

                      <td class="px-6 py-4 align-top">
                        <div
                          class="flex items-center gap-2 opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100"
                          [class.opacity-100]="certification?.id === item.id"
                        >
                          <button
                            type="button"
                            class="btn action-btn flex h-7 w-7 items-center justify-center rounded-lg"
                            (click)="$event.stopPropagation(); editCertification(item)"
                          >
                            <i class="ri-edit-box-line"></i>
                          </button>

                          <button
                            type="button"
                            class="btn action-btn danger flex h-7 w-7 items-center justify-center rounded-lg"
                            (click)="$event.stopPropagation(); removeCertification(item)"
                          >
                            <i class="ri-delete-bin-2-line"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                  }
                </tbody>
              </table>
            </div>
          } @else {
            <div class="flex flex-1 flex-col items-center justify-center px-6 py-10 text-center">
              <i class="ri-inbox-line text-2xl text-text-tertiary"></i>
              <div class="mt-3 text-base font-semibold text-text-primary">
                {{ 'PAC.Certification.CreateFirst' | translate: { Default: 'Create your first certification' } }}
              </div>
              <div class="mt-2 max-w-xl text-sm text-text-tertiary">
                {{
                  'PAC.Certification.EmptyHint'
                    | translate: { Default: 'Define reusable certification types for projects, assets, or review workflows.' }
                }}
              </div>
              <div ngmButtonGroup displayDensity="cosy" class="mt-5">
                <button z-button zType="default" displayDensity="cosy" type="button" (click)="createCertification()">
                  <z-icon nxDensity="cosy" zType="add"></z-icon>{{ 'PAC.ACTIONS.ADD' | translate: { Default: 'Add' } }}
                </button>
              </div>
            </div>
          }
        </div>

        <aside
          class="min-h-0 w-full shrink-0 flex-col bg-components-card-bg xl:w-[28rem]"
          [class.flex]="!!certification"
          [class.hidden]="!certification"
        >
            <div class="border-t border-divider-regular px-6 py-5 xl:border-t-0">
              <div class="text-lg font-semibold text-text-primary">
                {{ 'PAC.ACTIONS.Edit' | translate: { Default: 'Edit' } }}
              </div>
            </div>

            <div class="flex min-h-0 flex-1 flex-col overflow-y-auto px-6 pb-6">
              <form [formGroup]="formGroup" class="flex flex-1 flex-col gap-5" (ngSubmit)="onSubmit()">
                <z-form-field appearance="fill" floatLabel="always">
                  <z-form-label>
                    {{ 'PAC.KEY_WORDS.Name' | translate: { Default: 'Name' } }}
                  </z-form-label>
                  <input
                    z-input
                    type="text"
                    formControlName="name"
                    [placeholder]="'PAC.Certification.NamePlaceholder' | translate: { Default: 'Enter certification name' }"
                  />
                  @if (formControls.name.touched && formControls.name.invalid) {
                    <z-form-message zType="error">
                      {{ 'PAC.KEY_WORDS.NameRequired' | translate: { Default: 'Name is required' } }}
                    </z-form-message>
                  }
                </z-form-field>

                <z-form-field appearance="fill" floatLabel="always">
                  <z-form-label>
                    {{ 'PAC.KEY_WORDS.Description' | translate: { Default: 'Description' } }}
                  </z-form-label>
                  <textarea
                    z-input
                    rows="6"
                    formControlName="description"
                    class="min-h-[140px] resize-y"
                    [placeholder]="
                      'PAC.Certification.DescriptionPlaceholder'
                        | translate: { Default: 'Describe what this certification type validates or represents' }
                    "
                  ></textarea>
                </z-form-field>

                <z-form-field appearance="fill" floatLabel="always">
                  <z-form-label>
                    {{ 'PAC.KEY_WORDS.Owner' | translate: { Default: 'Owner' } }}
                  </z-form-label>
                  <z-select
                    class="w-full"
                    [zValue]="ownerSelectionValue()"
                    [zPlaceholder]="'PAC.Certification.OwnerPlaceholder' | translate: { Default: 'Select owner' }"
                    (zSelectionChange)="onOwnerSelectionChange($event)"
                  >
                    <z-select-item [zValue]="noOwnerValue">
                      {{ 'PAC.Certification.NoOwner' | translate: { Default: 'No owner assigned' } }}
                    </z-select-item>
                    @for (user of (users$ | async) ?? []; track user.id) {
                      <z-select-item [zValue]="user.id">
                        {{ userLabel(user) }}
                      </z-select-item>
                    }
                  </z-select>
                </z-form-field>

                <div class="mt-auto flex items-center gap-3 border-t border-divider-regular pt-5">
                  <button z-button zType="default" type="submit">
                    {{ 'PAC.ACTIONS.Save' | translate: { Default: 'Save' } }}
                  </button>
                  <button z-button zType="ghost" type="button" (click)="cancel($event)">
                    {{ 'PAC.ACTIONS.Cancel' | translate: { Default: 'Cancel' } }}
                  </button>
                </div>
              </form>
            </div>
          </aside>
      </section>
    </div>
  </div>
} @else {
  <div class="flex h-full min-h-0 flex-col overflow-hidden bg-components-panel-bg px-4 py-4 sm:px-6">
    <div class="animate-pulse rounded-3xl border border-divider-regular bg-components-card-bg px-5 py-5 sm:px-6">
      <div class="h-4 w-32 rounded-full bg-background-default-subtle"></div>
      <div class="mt-4 h-8 w-56 rounded-2xl bg-background-default-subtle"></div>
      <div class="mt-3 h-4 w-full max-w-2xl rounded-full bg-background-default-subtle"></div>
      <div class="mt-2 h-4 w-full max-w-xl rounded-full bg-background-default-subtle"></div>
    </div>

    <div class="mt-4 grid flex-1 min-h-0 gap-4 xl:grid-cols-12">
      <div class="min-h-[26rem] rounded-3xl border border-divider-regular bg-components-card-bg xl:col-span-7"></div>
      <div class="min-h-[26rem] rounded-3xl border border-divider-regular bg-components-card-bg xl:col-span-5"></div>
    </div>
  </div>
}