<div class="nxv-example-viewer" [class.nxv-example-viewer--no-box]="config?.hideHeader">
    @if (!config?.hideHeader) {
        <div class="nxv-example-viewer__header">
            <span nxCopytext="small">
                {{ exampleDescriptor.title }}
            </span>
            <div class="nxv-example-viewer__actions">
                @if (showSourceCode) {
                    <button nxButton="small secondary" class="nxv-example-viewer__copy-code-button" (click)="copySourceCode()">
                        <nx-icon name="duplicate"></nx-icon>
                        {{ copyButtonText }}
                    </button>
                }
                <button nxButton="small secondary" class="nxv-example-viewer__show-code-button" (click)="toggleSourceView()">
                    {{ showSourceCode ? 'hide' : 'show code' }}
                </button>
                <nx-link>
                    <a
                        [routerLink]="'/examples/' + example"
                        nxTooltip="View example in fullscreen"
                        nxTooltipPosition="top"
                        queryParamsHandling="preserve"
                        class="nxv-fullscreen-button"
                    >
                        <nx-icon name="popout" aria-hidden="true"></nx-icon>
                    </a>
                </nx-link>
                @if (!config?.hideStackblitzButton) {
                    <nxv-stack-blitz-button [example]="example"></nxv-stack-blitz-button>
                }
            </div>
        </div>
    }
    <!-- Code to the example -->
    @if (showSourceCode) {
        <div class="nxv-example-viewer__source">
            <nx-tab-group #tabsComponent appearance="expert">
                @for (type of exampleDescriptorTypes; track type) {
                    <nx-tab [label]="type.label">
                        <div class="nvx-tab__content">
                            <pre class="nxv-docs__example-code"><nxv-doc-viewer id={{type.type}}
              [fileUrl]="getExampleSourceUrl(type.type, exampleDescriptor.url)"></nxv-doc-viewer>
            </pre>
                        </div>
                    </nx-tab>
                }
            </nx-tab-group>
        </div>
    }
    @if (showSourceCode) {
        <hr class="nxv-example-viewer__divider" />
    }

    <!-- Live example -->
    <div class="nxv-example-viewer__body">
        <nxv-lazy-example [exampleId]="example"></nxv-lazy-example>
    </div>
</div>
