@if (assetService.loading()) {
  <div class="flex flex-col h-[calc(100vh-3.5rem)]">
    <!-- Header skeleton -->
    <div class="flex items-center gap-3 px-4 py-2 border-b border-surface shrink-0 bg-emphasis">
      <p-skeleton width="4rem" height="0.875rem"/>
      <span class="text-surface-300">|</span>
      <p-skeleton width="8rem" height="1.125rem"/>
      <p-skeleton width="3rem" height="0.875rem"/>
      <p-skeleton shape="circle" size="0.5rem"/>
      <p-skeleton width="4rem" height="1.375rem" borderRadius="0.25rem"/>
    </div>
    <!-- Tab bar skeleton -->
    <div class="flex gap-2 px-4 py-3 border-b border-surface">
      @for (tab of tabs; track tab) {
        <p-skeleton width="5rem" height="1rem"/>
      }
    </div>
    <!-- Tab-specific skeleton -->
    @if (activeTab() === 'History') {
      <div class="p-6">
        <p-skeleton width="100%" height="20rem"/>
      </div>
    } @else if (activeTab() === 'Settings') {
      <div class="p-6">
        <p-skeleton width="100%" height="8rem"/>
      </div>
    } @else {
      <div class="p-6 space-y-5">
        <p-panel header="General">
          <div class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-4">
            @for (_ of [1,2,3,4]; 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>
        <p-panel header="Metadata">
          <div class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-4">
            @for (_ of [1,2,3]; 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 {
  @let asset = assetService.selectedAsset();
  @if (asset) {
  <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/assets" class="text-sm text-primary hover:underline">&larr; Assets</a>
      <span class="text-surface-300">|</span>
      <h1 class="text-lg font-bold truncate">{{ asset.display_name }}</h1>
      <span class="text-sm text-surface-500 font-mono">({{ asset.name }})</span>
      <span class="w-2 h-2 rounded-full shrink-0" [class]="asset.is_active ? 'bg-positive' : 'bg-edge'"></span>
      @if (asset.asset_type_name) {
        <p-tag [value]="asset.asset_type_name!" severity="secondary"/>
      }
      <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($any($event))">
      <p-tablist>
        @for (tab of tabs; track tab) {
          <p-tab [value]="tab">{{ tab }}</p-tab>
        }
      </p-tablist>
    </p-tabs>

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

      <!-- ==================== DETAILS TAB ==================== -->
      @if (activeTab() === 'Details') {
        <div class="p-6 space-y-5">

          @if (editing()) {
            <!-- As-of Timestamp -->
            <div class="p-3 rounded-lg bg-emphasis border border-surface inline-flex items-center gap-3">
              <label class="text-xs text-surface-500 whitespace-nowrap">As-of Timestamp</label>
              <p-datepicker [(ngModel)]="editTimestamp" [showTime]="true" dateFormat="yy-mm-dd" hourFormat="24" [style]="{'width': '16rem'}"/>
            </div>
          }

          <!-- General -->
          <app-field-panel
            header="General"
            [fields]="generalFields()"
            [editing]="editing()"
            [editValues]="generalEditValues()"
            (editChange)="onGeneralEditChange($event)"/>

          <!-- Metadata -->
          @if (metadataLoading()) {
            <p-panel header="Metadata">
              <div class="flex flex-wrap gap-x-6 gap-y-4">
                @for (_ of [1,2,3]; track $index) {
                  <div class="min-w-0 flex-1 basis-[calc(25%-1.125rem)]">
                    <p-skeleton width="40%" height="0.75rem" styleClass="mb-2"/>
                    <p-skeleton width="100%" height="2.25rem" borderRadius="0.375rem"/>
                  </div>
                }
              </div>
            </p-panel>
          } @else if (metadataFields().length > 0) {
            <app-field-panel
              header="Metadata"
              [fields]="metadataFields()"
              [editing]="editing()"
              [editValues]="metadataEditValues()"
              (editChange)="onMetadataEditChange($event)"/>
          }

          <!-- Provider Mapping Metadata -->
          @if (asset.provider_links.length > 0 && providerAssetFields().length > 0) {
            <p-panel>
              <ng-template #header>
                <div class="flex items-center gap-3">
                  <span class="p-panel-title">Provider Mapping Metadata</span>
                  <p-select [ngModel]="selectedProviderId()" (ngModelChange)="onProviderSelect($event)" [options]="providerLinkOptions()" optionLabel="label" optionValue="value" placeholder="Select provider..." styleClass="w-56"/>
                </div>
              </ng-template>
              @if (selectedProviderId()) {
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-6 gap-y-4">
                  @for (paf of providerAssetFields(); track paf.metadata_id) {
                    @if (editing()) {
                      <div>
                        <label class="block text-xs text-surface-500 mb-1">
                          {{ paf.metadata_display_name }}
                          @if (paf.is_required) { <span class="text-negative">*</span> }
                        </label>
                        @if (paf.value_type === 'boolean') {
                          <p-select [(ngModel)]="editPAFieldValues[selectedProviderId()! + ':' + paf.metadata_id]" [options]="[{label: 'true', value: 'true'}, {label: 'false', value: 'false'}]" optionLabel="label" optionValue="value" placeholder="-- select --" class="w-full"/>
                        } @else if (paf.value_type === 'integer') {
                          <input [(ngModel)]="editPAFieldValues[selectedProviderId()! + ':' + paf.metadata_id]" type="number" step="1" pInputText placeholder="Enter integer..." class="w-full"/>
                        } @else if (paf.value_type === 'float') {
                          <input [(ngModel)]="editPAFieldValues[selectedProviderId()! + ':' + paf.metadata_id]" type="number" step="any" pInputText placeholder="Enter number..." class="w-full"/>
                        } @else if (paf.value_type === 'date') {
                          <input [(ngModel)]="editPAFieldValues[selectedProviderId()! + ':' + paf.metadata_id]" type="date" pInputText class="w-full"/>
                        } @else if (paf.value_type === 'time') {
                          <input [(ngModel)]="editPAFieldValues[selectedProviderId()! + ':' + paf.metadata_id]" type="time" step="1" pInputText class="w-full"/>
                        } @else if (paf.value_type === 'datetime') {
                          <input [(ngModel)]="editPAFieldValues[selectedProviderId()! + ':' + paf.metadata_id]" type="datetime-local" step="1" pInputText class="w-full"/>
                        } @else {
                          <input [(ngModel)]="editPAFieldValues[selectedProviderId()! + ':' + paf.metadata_id]" type="text" pInputText placeholder="Enter value..." class="w-full"/>
                        }
                      </div>
                    } @else {
                      @let pval = getProviderAssetFieldValue(selectedProviderId()!, paf.metadata_id);
                      @let pts = paFieldTimestamp(selectedProviderId()!, paf.metadata_id);
                      <div>
                        <label class="block text-xs text-surface-500 mb-1">{{ paf.metadata_display_name }}</label>
                        @if (pval !== null) {
                          <div class="text-sm font-mono py-1.5">{{ formatValue(pval) }}</div>
                          @if (pts) {
                            <div class="text-[0.6875rem] text-surface-400 -mt-0.5">as of {{ pts | date:'shortDate' }}</div>
                          }
                        } @else {
                          <div class="text-sm text-surface-400 italic py-1.5">Not set</div>
                        }
                      </div>
                    }
                  }
                </div>
              } @else {
                <div class="text-sm text-surface-400 italic">Select a provider to view mapping metadata.</div>
              }
            </p-panel>
          }

          @if (editing()) {
            <div class="flex gap-2">
              <p-button label="Save" severity="primary" (onClick)="submitEdit()"/>
              <p-button label="Cancel" severity="secondary" [text]="true" (onClick)="cancelEdit()"/>
            </div>
          }

        </div>

      <!-- ==================== HISTORY TAB ==================== -->
      } @else if (activeTab() === 'History') {
        <div class="p-6 space-y-5">

          <!-- Asset Metadata History -->
          <p-panel header="Asset Metadata History">
            <app-metadata-history-table
              [fields]="historyGrid()?.fields ?? []"
              [snapshots]="historyGrid()?.snapshots ?? []"
              [loading]="historyLoading()"
              [referenceOptions]="historyRefOptions()"
              (save)="onHistorySave($event)"/>
          </p-panel>

          <!-- Provider-Asset Metadata History (with selector) -->
          @if (asset.provider_links.length > 0 && providerAssetFields().length > 0) {
            <p-panel>
              <ng-template #header>
                <div class="flex items-center gap-3">
                  <span class="p-panel-title">Provider Mapping Metadata History</span>
                  <p-select [ngModel]="selectedProviderId()" (ngModelChange)="onProviderSelect($event)" [options]="providerLinkOptions()" optionLabel="label" optionValue="value" placeholder="Select provider..." styleClass="w-56"/>
                </div>
              </ng-template>
              @if (selectedProviderId()) {
                <app-metadata-history-table
                  [fields]="paHistoryGrids()[selectedProviderId()!]?.fields ?? []"
                  [snapshots]="paHistoryGrids()[selectedProviderId()!]?.snapshots ?? []"
                  [loading]="paHistoryLoading()"
                  [referenceOptions]="historyRefOptions()"
                  (save)="onPAHistorySave(selectedProviderId()!, $event)"/>
              } @else {
                <div class="text-sm text-surface-400 italic py-2">Select a provider to view history.</div>
              }
            </p-panel>
          }

        </div>

      <!-- ==================== SETTINGS TAB ==================== -->
      } @else if (activeTab() === 'Settings') {
        <div class="p-6">
          <div class="max-w-3xl">
            <app-danger-zone
              title="Delete this asset"
              description="Once deleted, all associated metadata and provider links will be permanently removed."
              actionLabel="Delete asset"
              (confirmed)="openDelete()"
            />
          </div>
        </div>
      }

    </div>
  </div>

  <app-safe-delete-dialog
    [(visible)]="showDeleteDialog"
    [entityLabel]="'Asset'"
    [entityName]="asset.display_name"
    [usage]="deleteUsage()"
    [deleting]="deleting()"
    (confirm)="confirmDelete()"
  />
  }
}