<mat-card appearance="outlined">
    <mat-card-title>
        {{ page?.group }} / {{ page.name }}
    </mat-card-title>
    <mat-card-subtitle>
        {{ page.description }}
    </mat-card-subtitle>
    <mat-card-content>
        <!-- <p *ngIf='page.errors' class='errors'>
            Error: {{ page.errors }}
        </p> -->
        <mat-accordion
            [multi]='multiPanel'>
            <mat-expansion-panel *ngIf='page.attachment'
                [expanded]="expand.includes('attachment')">
                <mat-expansion-panel-header>
                    <mat-panel-title>Visual</mat-panel-title>
                </mat-expansion-panel-header>
                <div class='item' *ngIf='page.attachment' class='center'>
                    <img src='{{ page.attachment }}'>
                </div>
            </mat-expansion-panel>
            <mat-expansion-panel *ngIf='page.plotData'
                [expanded]="expand.includes('plot')">
                <mat-expansion-panel-header>
                    <mat-panel-title>Plot</mat-panel-title>
                </mat-expansion-panel-header>
                <plotly-plot
                    [data]="page.plotData"
                    [layout]="page.plotLayout"
                    [config]="plotlyConfig"
                    >
                </plotly-plot>
            </mat-expansion-panel>
            <mat-expansion-panel *ngIf='page.html'
                [expanded]="expand.includes('html')">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Information
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <div class='item' [innerHTML]='page.html | safeHtml'></div>
            </mat-expansion-panel>
            <mat-expansion-panel *ngIf='page.dfData.length > 0'
                [expanded]="expand.includes('data')">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Data
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <table mat-table
                    [dataSource]='getTableData()'>
                    <ng-container *ngFor='let colName of df_columns'
                        [matColumnDef]='colName'>
                        <th mat-header-cell *matHeaderCellDef>{{ colName }}</th>
                        <td mat-cell *matCellDef="let value"> {{ formatCell(value[colName]) }} </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="df_columns; sticky: true"></tr>
                    <tr mat-row *matRowDef="let row; columns: df_columns"></tr>
                </table>
            </mat-expansion-panel>
            <gisaf-dashboard-page-sections *ngIf='page.sections?.length > 0' [page]="page">
            </gisaf-dashboard-page-sections>
        </mat-accordion>
    </mat-card-content>
    <mat-card-footer>
        <span>
            <i>Generated:</i> {{ page.time | date: 'dd/MM/yyyy HH:mm:ss' }}
        </span>
        <span *ngIf='page.notebook'>
            <i>from: </i><a href="{{ page.notebook }}">{{ page.notebook.split('/').splice(-1) }}</a>
        </span>
    </mat-card-footer>
</mat-card>
