<div class="adf-metadata-properties">
    <mat-accordion displayMode="flat">
        <mat-expansion-panel [expanded]="!expanded" [hideToggle]="!expanded">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{ 'CORE.METADATA.BASIC.HEADER' | translate }}
                </mat-panel-title>
            </mat-expansion-panel-header>

            <adf-card-view
                [properties]="basicProperties$ | async"
                [editable]="editable"
                [displayEmpty]="displayEmpty">
            </adf-card-view>
        </mat-expansion-panel>

        <ng-container *ngIf="expanded">
            <ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
                <div *ngFor="let group of groupedProperties" class="adf-metadata-grouped-properties-container">
                    <mat-expansion-panel>
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                {{group.title}}
                            </mat-panel-title>
                        </mat-expansion-panel-header>

                        <adf-card-view
                            [properties]="group.properties"
                            [editable]="editable"
                            [displayEmpty]="displayEmpty">
                        </adf-card-view>
                    </mat-expansion-panel>
                </div>
            </ng-container>
            <ng-template #loading>
                <mat-progress-bar mode="indeterminate"></mat-progress-bar>
            </ng-template>
        </ng-container>
    </mat-accordion>
</div>