<ng-container *ngIf="state$ | async as state">

    <core-loading [hideUntil]="state.loaded">

        <ion-refresher slot="fixed" [disabled]="!state.loaded" (ionRefresh)="refreshReport($event.target)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
        </ion-refresher>

        <ng-container *ngIf="state.report?.data?.rows?.length && state.report?.data?.headers && state.report?.details; else empty">

            <ng-container *ngIf="isCardLayout">
                <ion-card *ngFor="let row of state.report.data.rows; let rowIndex = index">
                    <ion-list class="ion-text-wrap">
                        <core-report-builder-report-column *ngFor="let column of row.columns | slice:0:row.isExpanded ?
                            row.columns.length : state.cardVisibleColumns; let columnIndex = index" [columnIndex]="columnIndex"
                            [rowIndex]="rowIndex" [isExpandable]="columnIndex === 0 && row.columns.length > state.cardVisibleColumns"
                            [isExpanded]="row.isExpanded" [showFirstTitle]="state.cardviewShowFirstTitle" [source]="source$ | async"
                            [contextId]="state.report.details.contextid" [header]="state.report.data.headers[columnIndex]" [column]="column"
                            (onToggleRow)="toggleRow(rowIndex)" />
                    </ion-list>
                </ion-card>
            </ng-container>

            <div *ngIf="!isCardLayout" class="x-scrollable">
                <table class="core-table">
                    <thead>
                        <tr>
                            <th *ngFor="let header of state.report.data.headers">
                                {{ header }}
                            </th>
                        </tr>
                    </thead>
                    <tbody class="auto-striped">
                        <tr *ngFor="let row of state.report.data.rows">
                            <td *ngFor="let column of row.columns">
                                <core-format-text *ngIf="isString(column); else notText" [text]="column" [contextLevel]="source$ | async"
                                    [contextInstanceId]="state.report.details.contextid" />
                                <ng-template #notText> {{ column }} </ng-template>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </ng-container>

        <ng-template #empty>
            <core-empty-box icon="fas-rectangle-list">
                <p> {{ 'core.course.nocontentavailable' | translate }} </p>
            </core-empty-box>
        </ng-template>

        <core-infinite-loading *ngIf="!isBlock && state.report?.data?.rows?.length && state.report?.data?.headers && state.report?.details"
            [enabled]="state.canLoadMoreRows" (action)="fetchMoreInfo($event)" [error]="state.errorLoadingRows" />

    </core-loading>

</ng-container>
