@if (providerService.loading()) {
  <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="5rem" height="0.875rem"/>
      <span class="text-surface-300">|</span>
      <p-skeleton width="10rem" height="1.125rem"/>
      <p-skeleton width="3.5rem" height="1.375rem" borderRadius="1rem"/>
      <p-skeleton width="4rem" height="1.375rem" borderRadius="0.25rem"/>
    </div>
    <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>
    @if (activeTab() === 'History') {
      <div class="p-6">
        <p-panel>
          <ng-template #header><p-skeleton width="10rem" height="1rem"/></ng-template>
          <div class="flex items-center justify-between mb-4">
            <p-skeleton width="6rem" height="2rem" borderRadius="0.375rem"/>
          </div>
          <div class="flex flex-col gap-0">
            <div class="flex gap-3 px-3 py-2.5 border-b border-surface">
              <p-skeleton width="12rem" height="1rem"/>
              @for (_ of [1,2,3]; track $index) { <p-skeleton width="8rem" height="1rem"/> }
              <p-skeleton width="3rem" height="1rem"/>
            </div>
            @for (_ of [1,2,3,4,5]; track $index) {
              <div class="flex gap-3 px-3 py-2.5 border-b border-surface">
                <p-skeleton width="12rem" height="2rem"/>
                @for (_ of [1,2,3]; track $index) { <p-skeleton width="8rem" height="2rem"/> }
                <p-skeleton width="3rem" height="2rem"/>
              </div>
            }
          </div>
        </p-panel>
      </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 provider = providerService.selectedProvider();
  @if (provider) {
  <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/providers" class="text-sm text-primary hover:underline">&larr; Providers</a>
      <span class="text-surface-300">|</span>
      <h1 class="text-lg font-bold truncate">{{ provider.display_name }}</h1>
      <span class="w-2 h-2 rounded-full shrink-0" [class]="provider.is_active ? 'bg-positive' : 'bg-edge'"></span>
      @if (provider.provider_type_name) {
        <p-tag [value]="provider.provider_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()) {
            <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>
          }

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

          @if (metadataLoading()) {
            <p-panel header="Metadata">
              <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 (_ 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>
          } @else if (metadataFields().length > 0) {
            <app-field-panel header="Metadata" [fields]="metadataFields()" [editing]="editing()" [editValues]="metadataEditValues()" (editChange)="onMetadataEditChange($event)"/>
          }

          @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>
          }

          @if (!editing()) {
            <!-- Mapped Assets -->
            <p-panel header="Mapped Assets">
              <app-data-table
                [columns]="mappedAssetsColumns"
                [value]="provider.asset_links"
                [showPaginator]="false"
                emptyMessage="No asset mappings for this provider."/>
            </p-panel>
          }

        </div>

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

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

        </div>

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

    </div>
  </div>

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