@let attr = attribute();
@if (!attr) {
  <div class="flex flex-col h-[calc(100vh-3.5rem)]">
    <div class="flex items-center gap-3 px-4 py-2 border-b border-surface shrink-0 bg-emphasis">
      <p-skeleton width="7rem" height="0.875rem"/>
      <span class="text-surface-300">|</span>
      <p-skeleton width="10rem" height="1.125rem"/>
      <p-skeleton width="3rem" height="1.375rem" borderRadius="0.25rem"/>
    </div>
    <div class="flex gap-2 px-4 py-3 border-b border-surface">
      @for (_ of [1,2]; track $index) {
        <p-skeleton width="5rem" height="1rem"/>
      }
    </div>
    <div class="p-6 space-y-5">
      <p-panel header="General">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
          @for (_ of [1,2]; track $index) {
            <div>
              <p-skeleton width="40%" height="0.75rem" styleClass="mb-2"/>
              <p-skeleton width="100%" height="2.25rem" borderRadius="0.375rem"/>
            </div>
          }
        </div>
      </p-panel>
    </div>
  </div>
} @else {
  <div class="flex flex-col h-[calc(100vh-3.5rem)]">
    <!-- Header Bar -->
    <div class="flex items-center gap-3 px-4 py-2 border-b border-surface shrink-0 bg-emphasis">
      <a routerLink="/settings/attributes" class="text-sm text-primary hover:underline">&larr; Attributes</a>
      <span class="text-surface-300">|</span>
      <h1 class="text-lg font-bold truncate">{{ attr.display_name }}</h1>
      <p-tag [value]="attr.is_active ? 'Active' : 'Inactive'" [severity]="attr.is_active ? 'success' : 'warn'"/>
      <div class="ml-auto flex items-center gap-2">
        @if (!editing()) {
          <p-button label="Edit" severity="secondary" [text]="true" size="small" (onClick)="startEdit()"/>
        }
      </div>
    </div>

    <!-- Tab Bar -->
    <p-tabs [value]="activeTab()" (valueChange)="onTabChange($event + '')">
      <p-tablist>
        <p-tab value="0">Details</p-tab>
        <p-tab value="1">Settings</p-tab>
      </p-tablist>
    </p-tabs>

    <!-- Content -->
    <div class="flex-1 overflow-y-auto">

      @if (activeTab() === '0') {
        <div class="p-6 space-y-5">

          <app-field-panel
            header="General"
            [fields]="generalFields()"
            [editing]="editing()"
            [editValues]="generalEditValues()"
            (editChange)="onGeneralEditChange($event)"/>
          @if (editing()) {
            <div class="flex gap-2">
              <p-button label="Save" severity="primary" (onClick)="saveEdit()"/>
              <p-button label="Cancel" severity="secondary" [text]="true" (onClick)="cancelEdit()"/>
            </div>
          }

        </div>
      } @else if (activeTab() === '1') {
        <div class="p-6">
          <div class="max-w-3xl">
            <app-danger-zone
              title="Delete this attribute"
              description="Once deleted, all associated data will be permanently removed."
              actionLabel="Delete attribute"
              (confirmed)="openDelete()"
            />
          </div>
        </div>
      }

    </div>
  </div>

  <app-safe-delete-dialog
    [(visible)]="showDeleteDialog"
    [entityLabel]="'Attribute'"
    [entityName]="attr.name"
    [usage]="usage()"
    [deleting]="deleting()"
    (confirm)="confirmDelete()"
  />
}