@if (imageViewsQuery.isLoading()) {
    <app-spinner></app-spinner>
} @else if (imageViewsQuery.isError()) {
    <p>There was an error loading images.</p>
} @else if (imageViewsQuery.isSuccess()) {
    <div class="image-grid">
        @for (imageQuery of imageQueries(); track $index) {
            @if (imageQuery.isLoading()) {
                <app-spinner></app-spinner>
            } @else if (imageQuery.isError()) {
                <p>There was an error loading this image.</p>
            } @else {
                @let imageData = imageQuery.data();
                <mat-card>
                    <img
                        mat-card-image
                        [src]="imageData!.blobUrl"
                        alt="imageData!.imageView.alt"
                        (click)="onImageClick(imageData!.imageView)"
                        class="image-grid-image"
                    />
                    <mat-card-content>
                        <p>{{ imageData!.imageView.filename }}</p>
                    </mat-card-content>
                    <mat-card-actions>
                        <mat-checkbox
                            [checked]="isSelected(imageData!.imageView)"
                            (click)="onImageClick(imageData!.imageView)"
                            >Main?</mat-checkbox
                        >
                        <button matButton="text" type="button" [matMenuTriggerFor]="imageActionsMenu">
                            <fa-icon [icon]="faEllipsis"></fa-icon>
                        </button>
                        <mat-menu #imageActionsMenu>
                            <button mat-menu-item type="button" (click)="editImage(imageData!.imageView)">Edit</button>
                            <button mat-menu-item type="button" (click)="deleteImage(imageData!.imageView)">
                                Delete
                            </button>
                        </mat-menu>
                    </mat-card-actions>
                </mat-card>
            }
        }
    </div>
    <mat-paginator
        [length]="imageCount()"
        [pageSize]="pageSize()"
        [pageSizeOptions]="[3, 6, 9, 12]"
        (page)="onPage($event)"
    ></mat-paginator>
}