<div class="flex flex-col w-full">
    <app-page-header>
        <ng-template appPageHeaderLeft>
            <div>
                <app-page-breadcrumb [items]="breadcrumbItems()" />
                <p class="text-sm text-[var(--p-text-muted-color)]">{{ "integration.apiReference.subtitle" | transloco }}</p>
            </div>
        </ng-template>
    </app-page-header>

    <div class="api-reference-content max-w-7xl mx-auto w-full">
        @if (error(); as errorKey) {
        <div class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ errorKey | transloco }}</div>
        } @if (!viewerReady() && !error()) {
        <div class="api-reference-loading text-sm text-[var(--p-text-muted-color)]">{{ "integration.apiReference.loading" | transloco }}</div>
        }

        <div class="api-reference-viewer">
            <iframe
                class="api-reference-frame"
                [src]="scalarFrameSrc()"
                title="API reference"
                sandbox="allow-scripts allow-same-origin allow-popups"
                referrerpolicy="same-origin"
                loading="lazy"
                (load)="onFrameLoad()"
                (error)="onFrameError()"
            ></iframe>
        </div>
    </div>
</div>
