df-api-docs.component.html

<div
  class="api-doc-button-container"
  [class]="(isDarkMode | async) ? 'dark-theme' : ''"
  style="display: flex; align-items: center; gap: 16px">
  <button class="cancel-btn" mat-raised-button (click)="goBackToList()">
    {{ 'goBack' | transloco }}
  </button>

  <button class="save-btn" mat-raised-button (click)="downloadApiDoc()">
    {{ 'apiDocs.downloadApiDoc' | transloco }}
  </button>
</div>

<!-- Moved API Keys Dropdown -->
<div class="api-keys-container" *ngIf="apiKeys.length">
  <mat-form-field appearance="outline" class="api-keys-select">
    <mat-label>{{ 'apiDocs.apiKeys.label' | transloco }}</mat-label>
    <mat-select>
      <mat-option [value]="null">
        <div class="api-key-option">
          <div class="key-info">
            <span class="key-name"
              >None (Session token based authentication)</span
            >
            <span class="key-preview"
              >Uses session token to build the request</span
            >
          </div>
        </div>
      </mat-option>
      <mat-option *ngFor="let key of apiKeys" [value]="key.apiKey">
        <div class="api-key-option">
          <div class="key-info">
            <span class="key-name">{{ key.name }}</span>
            <span class="key-preview">{{ key.apiKey | slice: 0 : 8 }}...</span>
          </div>
          <button
            mat-icon-button
            (click)="$event.stopPropagation(); copyApiKey(key.apiKey)">
            <fa-icon [icon]="faCopy"></fa-icon>
          </button>
        </div>
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div #swaggerInjectedContentContainer class="custom-swagger-content-wrapper">
  <div
    #healthBannerElement
    class="api-health-banner"
    *ngIf="healthStatus"
    [ngClass]="{
      'status-loading': healthStatus === 'loading',
      'status-healthy': healthStatus === 'healthy',
      'status-unhealthy': healthStatus === 'unhealthy',
      'status-warning': healthStatus === 'warning'
    }">
    <div *ngIf="healthStatus === 'loading'">
      <p>{{ 'apiHealthBanner.loading' | transloco }}</p>
    </div>
    <div *ngIf="healthStatus === 'healthy'">
      <p>{{ 'apiHealthBanner.healthy' | transloco }}</p>
    </div>
    <div *ngIf="healthStatus === 'unhealthy'">
      <p>
        {{ 'apiHealthBanner.unhealthyBase' | transloco }}
        <button
          mat-button
          color="accent"
          class="view-details-button"
          (click)="toggleUnhealthyErrorDetails()">
          {{
            (showUnhealthyErrorDetails
              ? 'apiHealthBanner.hideDetails'
              : 'apiHealthBanner.viewDetails'
            ) | transloco
          }}
        </button>
      </p>
      <div *ngIf="showUnhealthyErrorDetails" class="unhealthy-error-details">
        <pre>{{ healthError }}</pre>
      </div>
    </div>
    <div *ngIf="healthStatus === 'warning'">
      <p>
        {{ 'apiHealthBanner.warningDefault' | transloco }}
      </p>
    </div>
  </div>

  <df-api-quickstart
    *ngIf="serviceName"
    [apiDocJson]="apiDocJson"
    [serviceName]="serviceName"></df-api-quickstart>
  <div
    *ngIf="apiDocJson?.info?.group === 'Database'"
    style="margin: 16px 0 8px 0">
    <mat-slide-toggle
      [(ngModel)]="expandSchema"
      (ngModelChange)="reloadApiDocs()">
      Populate table/field names in API docs
    </mat-slide-toggle>
    <div style="font-size: 12px; color: #888; margin-left: 40px">
      When enabled, the API documentation will include live table and field
      names from your database. (May be slow for large databases)
    </div>
  </div>
</div>

<div #apiDocumentation class="swagger-ui"></div>