<mat-list class="adf-version-list" *ngIf="!isLoading; else loading_template">
    <mat-list-item *ngFor="let version of versions">
        <mat-icon mat-list-icon>insert_drive_file</mat-icon>
        <h4 mat-line class="adf-version-list-item-name">{{version.entry.name}}</h4>
        <p mat-line>
            <span class="adf-version-list-item-version">{{version.entry.id}}</span> -
            <span class="adf-version-list-item-date">{{version.entry.modifiedAt | date}}</span>
        </p>
        <p mat-line class="adf-version-list-item-comment">{{version.entry.versionComment}}</p>

        <mat-menu #versionMenu="matMenu" yPosition="below" xPosition="before">
            <button mat-menu-item (click)="restore(version.entry.id)"> Restore </button>
        </mat-menu>

        <button mat-icon-button [matMenuTriggerFor]="versionMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </mat-list-item>
</mat-list>

<ng-template #loading_template>
    <mat-progress-bar data-automation-id="version-history-loading-bar" mode="indeterminate" color="accent"></mat-progress-bar>
</ng-template>
