<ng-container *ngIf="dataSource">
    <div *ngIf="config && config.layout === 'panels'" class="record-content panel-layout container-fluid pl-0 pr-0">
        <div class="row no-gutters mb-3" *ngFor="let panel of panels">
            <div class="col">
                <scrm-panel [title]="panel.label" mode="collapsible">
                    <div panel-body class="panel-{{panel.key}}">
                        <scrm-field-layout [dataSource]="getLayoutDataSource(panel)"></scrm-field-layout>
                    </div>
                </scrm-panel>
            </div>
        </div>

    </div>

    <div *ngIf="config && config.layout === 'tabs'" class="record-content tabs-layout container-fluid pl-0 pr-0">

        <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
            <li class="tab" *ngFor="let panel of panels; index as i;" [ngbNavItem]="i+1">
                <a class="tab-link" ngbNavLink>{{panel.label}}</a>
                <ng-template ngbNavContent>
                    <div class="tab-{{panel.key}}">
                        <scrm-field-layout [dataSource]="getLayoutDataSource(panel)"></scrm-field-layout>
                    </div>
                </ng-template>
            </li>
        </ul>
        <div [ngbNavOutlet]="nav" class="p-2 pt-3"></div>

    </div>

</ng-container>
