<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'core.reportbuilder.reports' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content *ngIf="state$ | async as state">
    <ion-refresher slot="fixed" [disabled]="!state.loaded" (ionRefresh)="refreshReports($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>
    <core-loading [hideUntil]="state.loaded">
        <ion-list *ngIf="reports.items?.length; else empty">
            <ion-item [attr.aria-current]="reports.getItemAriaCurrent(report)" [detail]="true" class="ion-text-wrap" [button]="true"
                *ngFor="let report of reports.items" (click)="reports.select(report)">
                <ion-label>
                    <p class="item-heading">
                        <core-format-text [clean]="true" [text]="report.name" [filter]="false" />
                    </p>
                    <p>{{ report.sourcename }}</p>
                </ion-label>
            </ion-item>
        </ion-list>

        <ng-template #empty>
            <core-empty-box *ngIf="!reports.items?.length" icon="fas-rectangle-list"
                [message]="'core.course.nocontentavailable' | translate" />
        </ng-template>

        <core-infinite-loading *ngIf="reports.items?.length" [enabled]="reports.loaded && !reports.completed"
            (action)="fetchMoreReports($event)" [error]="state.loadMoreError" />
    </core-loading>
</ion-content>
